オルゴール-雪乃☆雫作

オルゴール by 雪乃☆雫
＃ウェブオーディオAPIよう 
オーディオコンテキストとは変数。
オシレータとは変数。
ゲインとは変数。

＃設定
音階＝6。
音量＝100。# 0～127
テンポ＝120。# 1秒間に4分音符が何個入るか。
音符＝4。
音長＝空。
設定変換処理。

●設定変換処理
    音量＝0.25*音量/127。# 0.25はスマホでの和音再生時の音割れ防止。
    テンポ＝60/テンポ*4。
    音符＝1/音符。# 全音符を1として。
    音長＝テンポ*音符。
ここまで。

＃UI作成
再生ボタン＝「オルゴール演奏」のボタン作成。
停止ボタン＝「停止」のボタン作成。停止フラグ＝オフ。
「｜」のラベル作成。
クリアボタン＝「クリア」のボタン作成。

オルゴール＝「table」のDOM部品作成。
html＝「<tr>」。
音名＝["ド","#","レ","#","ミ","ファ","#","ソ","#","ラ","#","シ"]
24回
    html＝htmlに「<th>{音名[(回数-1)%12]}</th>」を一行追加。
ここまで。
html＝htmlに「</tr>」を一行追加。

白,黒＝[白色,灰色]
色＝[白,黒,白,黒,白,白,黒,白,黒,白,黒,白]
32回
    行＝回数-1。
    html＝htmlに「<tr>」を一行追加。
    24回
        列＝回数-1。
        html＝htmlに「<td style="background-color:{色[列%12]}"><input type="checkbox" id="No{行*24+列}" name="{行}" value="{列}" /></td>」を一行追加。
    ここまで。
    html＝htmlに「</tr>」を一行追加。
    もし、行%8＝7ならば、html＝htmlに「<tr><td colspan="24" style="background-color:white"/></tr>」を一行追加。
ここまで。
html＝htmlに「</table>」を一行追加。

html＝htmlに「<style>
table {波カッコ}border-collapse: collapse;{波カッコ閉じ}
th {波カッコ}font-size:14px;{波カッコ閉じ}
td {波カッコ}border:solid 1px {銀色};{波カッコ閉じ}
input[type="checkbox"] {波カッコ}accent-color: gold;{波カッコ閉じ}
</style>」を一行追加。
htmlをオルゴールへHTML設定。

初期値＝[5,9,29,33,53,57,62,76,81,88,101,105,113,124,129,136,146,153,158,172,194,202,218,226,241,249,266,271,292,297,338,364,389,393,413,417,437,441,446,460,465,472,485,489,497,508,513,520,530,537,542,556,578,586,602,607,629,633,657,674,701,722]
初期値を反復
    「#No」&対象の「checked」にオンをDOM属性設定。
ここまで。

＃イベント
クリアボタンをクリックした時には、
    24*32回
        「#No」&回数-1の「checked」にオフをDOM属性設定。
    ここまで。
ここまで。
停止ボタンをクリックした時には、
    停止フラグ＝オン。
ここまで。
再生ボタンをクリックした時には、
    楽譜＝空配列。鍵盤＝空配列。
    32回
        行＝回数-1。
        楽譜[行]＝空配列。
        24回
            列＝回数-1。
            もし、(「#No{行*24+列}」の「checked」をDOM属性取得)＝はいならば、
                楽譜[行]に((列/12を整数変換)+音階)*12+列%12を配列追加。
                鍵盤に行*24+列を配列追加。
            ここまで。
        ここまで。
    ここまで。
    //鍵盤をJSONエンコードして表示
    //楽譜をJSONエンコードして表示
    楽譜を再生処理。
ここまで。

●(Aを)再生処理とは
    0.1秒待つ。
    Aを反復
        対象を反復
            もし、停止フラグ＝オンならば、
                停止フラグ＝オフ。
                戻る。
            ここまで。
            もし、(対象＝空配列)でなければ、
                音番号＝対象。
                音準備。
                オシレータ["frequency"]["value"]＝音番号を周波数変換。
                オシレータの「start」を[]でJSメソッド実行。
                オシレータの「stop」を[音長+1]でJSメソッド実行。
            ここまで。
        ここまで。
        (音長)秒待つ。
    ここまで。
ここまで。

●(音番号を)周波数変換
    440*(2^((音番号-69)/12))で戻る
ここまで。

●音準備
    # オーディオコンテキストとオシレータを作る
    オーディオコンテキスト＝「new AudioContext()」をJS実行。
    オシレータ＝「new OscillatorNode(sys.__findVar("オーディオコンテキスト"))」をJS実行。
    # オルゴールっぽい(？)音にする
    ゲイン＝「new GainNode(sys.__findVar("オーディオコンテキスト"))」をJS実行。
    ゲイン["gain"]の「setValueAtTime」を[音量,0]でJSメソッド実行。
    ゲイン["gain"]の「exponentialRampToValueAtTime」を[0.001,音長+1]でJSメソッド実行。
    # 接続
    オシレータの「connect」を[ゲイン]でJSメソッド実行。
    それの「connect」を[オーディオコンテキスト["destination"]]でJSメソッド実行。
ここまで。