このページの本文へ

日曜プログラマー大歓迎 JavaScriptの部屋 第13回

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

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

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

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

  • この記事をはてなブックマークに追加
  • 本文印刷

●登場人物

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

開発芽衣(かいほつ・めい) 尾地のめいで、近所に住む中学生。

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

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

おじ 実は、結構簡単に鍵盤の数を増やせるんだよね。そのほか詳細は、週刊アスキー本誌を読んでください。
めい あと、曲に合わせて鍵盤を押す感じのゲームとか作ったら、遊びながらピアノがうまくなったりすると思うんだ。
おじ では、いつものプログラム募集の告知。こちらからどうぞ。

めい お待ちしてます~。

★アスキーの有料会員サービス「ASCII倶楽部」会員の方は、下記リンクをクリックすると直接ページが開きます。

日曜プログラマー大歓迎
JavaScriptの部屋

週刊アスキーNo.1123はBOOK☆WALKER、Kindle、kobo等電子書店で発売中!

週刊アスキー No.1123 (2017年4月18日発行)[Amazon]

電子版週刊アスキーの購入はこちらから

カテゴリートップへ

この連載の記事

注目ニュース

ASCII倶楽部

プレミアムPC試用レポート

ピックアップ

ASCII.jp RSS2.0 配信中

ASCII.jpメール デジタルMac/iPodマガジン