ブラウザ上で使えるピアノキーボード

Web Audio API の勉強がてらに単純なシンセサイザー(バーチャルピアノ？)を自作してみたので公開…

これはなに？

趣味で作っためちゃくちゃ単純なシンセサイザーです。マウスやキーボードで音が鳴らせます(キーボードの操作は A～; キーが白鍵、W～P キーが黒鍵)。MIDI キーボードを使った入力も可能ですが、対応したブラウザでないとデバイスが認識されないので注意。とりあえず Chrome なら問題なく動作すると思います。

現時点ではスマホやタブレットのタッチ操作には対応していません。

動作確認は Chrome 80、Firefox 72、EdgeHTML 18 で行っています。Safari、Internet Explorer その他のブラウザはサポートしていません。対応しているブラウザであっても、不具合で音が出ない、音が鳴りっぱなしになる、ブラウザの挙動が不安定になるなど、意図しない動作を引き起こす可能性もあります。あらかじめご了承ください。

設定項目

visualizer	音色をグラフにして表示します。freq は周波数分布モード、wave は波形モードです。なお波形を見やすくするためにデータ更新のタイミングを少しいじっています。
guide	鍵盤上に音階を表示します。M7 を選択した場合、同時に複数のキーを押すとルート音からの音程が表示されます。
key shift	入力したキーと実際の音程をずらします。
volume	音量です。
velocity	キーを叩いたときの強さを反映させるかどうかを指定します。MIDI キーボード使用時限定の項目です。
attack	音が鳴りはじめてから最大音量に到達するまでにかかる時間です。あまり値が小さすぎると音を鳴らしたときに「プツッ」という雑音が聞こえるかもしれません。
release	音の再生を停止してから完全に鳴り止むまでにかかる時間です。
waveform	音の波形です。音色が変わります。sine(サイン波)、square(矩形波)、sawtooth(のこぎり波)、triangle(三角波)、custom(カスタム波形)から選択できます。

右下のボタンを押すと現在の各設定がURLに変換されます。その状態でページを「お気に入り」などに登録しておけば、次にページを開いたとき自動的に設定が読み込まれます。

その他

制作時に参考にしたサイトや苦戦した箇所は別記事にまとめました。

更新履歴
2020年2月20日：カスタム波形に倍音モード(overtone)追加
2020年2月18日：設定出力ボタン追加
2020年2月17日：公開