BPMから音符の秒数を計算する入力フォームを作ってみました

前回の「Arduinoでダース・ベイダーのテーマを鳴らす」では、メロディがしっかり流れるように音符の長さを計算しました。
今回は、自分の備忘録のためと、JavaScriptの練習のために、BPMから音符の秒数(msec)を計算する入力フォームを作ってみました。

BPMから音符の秒数(msec)を計算する入力フォーム

2分音符	ms
4分音符	ms
付点8分音符	ms
8分音符	ms
16分音符	ms

こちらにBPMを入力すると音符の秒数がミリ秒で出てきます。

BPMについて

そもそもBPMとは？

Beats Per Minute
・テンポの単位 – 一分間の拍数のこと。音楽用語。
出典：Wikipedia

BPMとは、1分間に何拍をとるかを数値化する単位です。

例えば4分音符の場合、
「1分間で4分音符を何拍とるか」を示します。

BPM=60の場合、4分音符を1分間に60拍とることとなり、
これは時計の秒針と同じ速さとなります。

音符の長さの計算式

BPMの定義より、1分間つまり60秒をBPMで割った値が4分音符の長さとなります。
また、秒よりもミリ秒(×10-3s)のほうが扱いやすいのでミリ秒で表記します。

以下が計算式となります。

4分音符の長さ(msec) = 60000(msec) ÷ BPM

4分音符の長さが求まれば、
2分音符は2倍、8分音符は1/2倍、16分音符は1/4倍となります。

また、付点8分音符の計算式は以下のようになります。

付点8分音符の長さ(msec) = 8分音符 + (4分音符 – 8分音符) / 2

BPMから音符の秒数(msec)を計算するプログラム

BPMから音符の秒数(msec)を計算するプログラムです。

<form style="
    width: 360px;
    background: #eeeeee;
    padding: 10px;
    text-align: center;
">
<p>
    BPM : <input type="text" id="bpm" style="
    width: 80px;
    text-align: right;
    ">
</p>
<span id="msg1" style="color: #ff0000;"></span>
<p>
    <input type="button" value="BPM計算" onclick="bpm_cal();" style="
    width: 100px;
    height: 30px;
    font-size: 15px;
    color: #fff;
    background: #F99695;
    border: solid 2px #F99695;
    ">
</p>
<p>
    結果
</p>
<table>
    <tr>
        <th>2分音符</th>
        <th><span id="msg2"></span>ms</th>
    </tr>
    <tr>
        <th>4分音符</th>
        <th><span id="msg3"></span>ms</th>
    </tr>
    <tr>
        <th>付点8分音符</th>
        <th><span id="msg4"></span>ms</th>
    </tr>
    <tr>
        <th>8分音符</th>
        <th><span id="msg5"></span>ms</th>
    </tr>
    <tr>
        <th>16分音符</th>
        <th><span id="msg6"></span>ms</th>
    </tr>
</table>

<noscript>
    このブラウザはスクリプトが実行しないように制限されています。
</noscript>
</form>

<script type="text/javascript">
function bpm_cal() {
    var bpm = document.getElementById("bpm").value;
    var bt4 = Math.round(60000 / bpm)
    var bt2 = Math.round(bt4 * 2)
    var bt8 = Math.round(bt4 / 2)
    var bt8f = Math.round(bt8 + (bt4 - bt8) / 2)
    var bt16 = Math.round(bt4 / 4)
    
    if (Number.isFinite(1 / bpm)) {
        document.getElementById("msg1").innerHTML = '';
    } else {
        document.getElementById("msg1").innerHTML ='BPMが入力されていません';
    }
    if (bpm > 0) {
        document.getElementById("msg2").innerHTML = bt2;
        document.getElementById("msg3").innerHTML = bt4;
        document.getElementById("msg4").innerHTML = bt8f;
        document.getElementById("msg5").innerHTML = bt8;
        document.getElementById("msg6").innerHTML = bt16;
    } else {
        document.getElementById("msg2").innerHTML = '';
        document.getElementById("msg3").innerHTML = '';
        document.getElementById("msg4").innerHTML = '';
        document.getElementById("msg5").innerHTML = '';
        document.getElementById("msg6").innerHTML = '';
    }
}
</script>