utoroのJS解説

JavaScriptプログラムの解説。動作条件の説明があるので先頭から読んでください。

PCのキーボードでも演奏

前回マウスクリックで演奏できるようになりましたが、マウスでの演奏はあまり実用性がありませんよね。そこで今回はPCのキーボードを鍵盤がわりにして演奏できるように改良します。まずは下記のリンクを右クリックして別ウインドウで開いてください。

サンプル4(PCキーボードでも演奏)

まずは鍵盤をマウスクリックして鳴るのを確認したら、次は英数モード状態で「Z,X,C,S,D」の各キーを押して音が鳴ることを確認してください。同時に押せば和音も出るので、表現力は飛躍的にアップしました。

ソースを見てみましょう。ソースが長くなるので、今回から前回との主な差分のみを表示するようにします。まずは鍵盤のhtmlですが、各spanに普通に文字を表示させているだけです。

var kmapは、割り当てたアルファベットキーが押されたときに、そのキーコード番号をどの音高に対照させるかを指定するキーマップ配列です。

それに続くonkeydownの部分が発音させる関数、onkeyupの部分が消音させる関数です。その中身は前回のマウスクリック演奏のときのものと共通性が多く、弾いた鍵盤をハイライトする仕組みも同じです。

これで、マウスでもPCキーボードでも音を鳴らせるようになりました。