将某些字母映射到JS中的数字

Question

我在这里遇到了很多问题。下图显示了音符和以Hz为单位的频率。我在html中创建了一个范围滑块，范围从0到7902，这是最高值。我想要的是将实际音调（aa字母）映射到滑块中的当前值，这样我就可以打印出来而不仅仅是数字。我的问题是：我如何将这些字母映射到它的号码？我想要显示这封信。在一个div或什么的。

<input id="frequency" name="frequency" type="range" min="0" max="7902" step="1" value="0" />

参考：

Answer 1

在处理音乐音高时，通常更容易使用音高类而不是音符名称，直到您确实需要显示音符名称。这避免了和谐音符的问题。您可以使用简单的公式从频率到音级。然后使用音高类从数组中获取所需的音符名称。要使用音高等级（它的音高为0 c）：

var pitchClass =  Math.round(12 * (Math.log2(f/16.35))) % 12

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="frequency" id="frequency" name="frequency" type="range" min="0" max="7902" step="1" value="0" />

<div class="answer">c</div>

<script type="text/javascript">
  $('.frequency').on('change', show_note);
  var notes = ['c', 'c-sharp', 'd', 'e-flat', 'e', 'f', 'f-sharp', 'g', 'g-sharp', 'a', 'b-flat', 'b']


  function show_note() {

    var f = $('.frequency').val();
    var pitchClass = Math.round((12 * Math.log2(f / 16.35)) % 12)
    var notename = notes[pitchClass];

    $('.answer').html('frequency: ' + f + ' note: ' + notename);

  }
</script>

＆＃13;

＆＃13;

＆＃13;

Answer 2

沿着这些方向的东西，按递增顺序添加更多音符：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="frequency" id="frequency" name="frequency" type="range" min="0" max="7902" step="1" value="0" />

<div class="answer">C0</div>

<script type="text/javascript">

$('.frequency').on('change', show_note);

var freqs = [
             {'f': 16, 'l': 'C0'},
             {'f': 32, 'l': 'C1'},
             {'f': 65, 'l': 'C2'},
             {'f': 131, 'l': 'C3'},
             {'f': 262, 'l': 'C4'},
             {'f': 523, 'l': 'C5'},
             {'f': 1047, 'l': 'C6'},
             {'f': 2093, 'l': 'C7'},
             {'f': 4186, 'l': 'C8'},
             {'f':100000, 'l': 'dummy'}
             ];

function show_note(){

	var current = $('.frequency').val();
	var ret = false;

	$.each(freqs, (key, val) => !ret && current < (val.f + freqs[key + 1].f)/2 ? ret = val.l : '');

	$('.answer').html(ret);
	
}


</script>