JavaScriptで音階の生成と同時発声

パソコンのキーボードでピアノレッスン

2017年04月17日 18時00分更新

文● 加藤兄　プログラム作成･監修●松下浩則

●登場人物

尾地定数（おじ･さだかず）自称「日曜プログラマー」。芽衣のおじ。

開発芽衣（かいほつ･めい）尾地のめいで、近所に住む中学生。

おじ　めいの家ってさ、オルガンあるじゃん？　弾けないの？
めい　ねこふんじゃったくらいなら。お母さんがうまいんだよ。
おじ　あー、姉さんは昔、幼稚園の先生やってたからな。
めい　でも弾けたらいいよね。
おじ　というわけで、4月18日発売の週刊アスキーNo.1123ではミニピアノのプログラムを取り上げました。

めい　パソコンのキーボードを押すと、画面に表示された鍵盤が赤くなって、その音が鳴るというプログラム。
おじ　たとえば、キーボード左下の「Z」キーを押したら下の「ラ」の音、その横の「X」のキーを押したら「シ」の音が鳴る感じだな。よくできてると思ったのは、「S」のキーがちょうど黒鍵の「ラ#」の位置にあって、押すともちろん「ラ#」の音が鳴ること。
めい　キーボードのキーが列によってちょっと横にずれてるのがポイントだよね。
おじ　プログラム的にはちょっと難しかったけど、理解できた？
めい　うーん、実はあんまり……。
おじ　音を鳴らすために、Web Audio APIを使っていたね。「オシレーターノード」と「ゲインノード」というのを作っていた。
めい　ゲインノードは音の大きさだったね。0～1をプロパティに入れて使う。オシレーターは、周波数がどうのこうのなんとかかんとか。
おじ　理論はともかく、オシレータ―の周波数のプロパティに440を入れると、下の「ラ」の音が鳴り、880を入れると１オクターブ上の「ラ」の音が鳴るんだ。キーボードの「,」のキーに当たる音だね。
めい　2倍の数を入れるってことね。その間の「ド」とか「ソ」とかの音も決まった数を入れるんだよね？　いちいち440とか覚えなきゃいけないの？
おじ　いや、1音上がるごとに2の12乗根倍していけばいいので、それ以外は全部計算で求められるよ。それこそプログラムが得意とするところだ。
めい　その2の12乗根倍っていうのがもう意味わかんない。
おじ　そうだね。まぁ、下に掲載したプログラムで言うと58行にある式をコピーして使っとけばいいんじゃないかな。
めい　そうして、周波数と音の大きさを設定して、73行のように「start()」ってやると「プー」って音が鳴るんだったよね。
おじ　正確には、ここの段階では無音で鳴らしておいて、キーを押したときに音量を上げて音が鳴るんだけどな。
めい　あと、そうそう思い出した。これピアノの鍵盤っぽい絵が描かれているけど、キャンバスとか使ってなくて、入力フォームのボタンで描いてるんだよね。
おじ　そう、スタイルシートで、鍵盤っぽく見せてるんだ。
めい　なんでそんなことしてるの？
おじ　もちろん、ボタンなら、押したときに色を変えたり、「特定の関数を実行する」っていう指定がやりやすいからだね。キャンバスだと、そうだな……いちいち座標で計算しないといけないかもしれない。
めい　ふーん。
おじ　そっちから聞いてきてなんで興味ない返事なんだよ。
めい　はい、これが今回のプログラム～。