HTML5で電子ピアノを作ってみました。

2013年6月28日

Pocket

こんにちわ。山本です。
なんか書かないとあかんな~、と思いつつ、特に書くことないなーと思い悩んでいたのですが、昨日の夜暇つぶしに表題の通り「電子ピアノ」を作ってみましたので、公開しちゃいます。

デモサイト。
なお、対応しているブラウザはWebKit系だけなので、多分ChromeとSafariです(Safariでは確認していません)。

要は、Javascript上で、音声の波形を合成して再生しているわけです。
AudioAPIにはwebkitAudioを使っています。音声波形も特に何も考えることなく正弦波(サイン波)です。

特に珍しいサンプルじゃないかもしれませんが、やっぱり音声ファイルを別に用意しなくてもちょっとした音が鳴らせるって楽しいですね。
フィルターとかも自由に作れるみたいですし。

ただ、今回のサンプルは強弱(ヴェロシティ)付けられないので、「ピアノ(ピアノフォルテ)」じゃねーよ。っていうツッコミは勘弁して下さい。
その場合は、電子パイプオルガン、みたいな感じで。はい。

会社のテーマソングとか作って、ブラウザ上で合成演奏させるのもいいかもしれないとか思いました。
貴方の会社のウェブサイトにとか、どうでしょうか?
でわでわ。

Leave a Comment

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)