今年つくったWEB楽器 (8+2) - 音の鳴るブログ

2012年に作ったWEB楽器、Web Audio API や Audio Data APIの作例です。ちょっと思いついたものをバーっと書いて簡単に動かせる（インストールとかしなくて良い）のがWEB楽器の利点だと思っていて、だいたい半日で書いて調整とかデータの用意にもう半日くらいかかるみたいな感じで適当に作っています。コード量も多くないはず。

WEB楽器って言葉を気に入って良く使っているのだけど、楽器とはほど遠いものばかりだったし、もうちょっとWEBならではという感じを出したら良くなるのかな。こうして並べてみると、本格的なものを作るのを避けてアイデアだけでどうにか試行錯誤している様子が良くわかりますね。よいおとしを。

WEB楽器

1ビット音楽
- PWM制御(0と1の比率の制御)だけで多声音楽をつくる。良いアイデアだと思っていたのだけど、昔から当たり前に使われていた手法だったり、ΔΣ変調というのがあるようで、それに比べてしょぼすぎワロタ状態になってしまった。でも、自分で考えた感覚が強いので気に入っています。無知で良かった。恥ずかしくなったけど。
- ブログ記事 / ソースコード
- pico.js を使った
押すとサイン波が鳴るだけの iPhone WEB楽器
- スマートフォンっぽい操作で使えて、つくった中では一番楽器っぽいので気に入っている。大人数でサイン波を出したら面白いかなと、思っていたらこんなのあった。
- ブログ記事 / ソースコード
- Web Audio API を使った
スケールするマリオの曲
- マリオの地上BGMの調性(長調とか短調とか日本風とか)を切り換えできるやつ。別のものを作っているときに検証用につくった。雲井調子のやつとか忍者ゲームっぽい。
- ブログ記事 / ソースコード
- timbre.js を使った
無限ホーミー
- モンゴルの喉歌っぽいのがずっと聞ける。フォルマント合成を試してみたかった。
- ブログ記事 / ソースコード
- timbre.js を使った
音の鳴る画像
- 音声データを直接埋めこんだ画像を作れるサービス。最初 heroku + mongodb で書いていたのだけど、めっちゃ盛り上がると思って画像容量の確保のために GAE + blobstore(2GBまで処理できる) で書き直した。でも、全然もりあがらなかった。画像を用意して、さらに音声を用意するのがすごく面倒。
- ブログ記事 / ソースコード
- Web Audio API / Audio Data API / File API / GAE を使った (herokuでも動く)
Glitched Movie Player
- 動画ファイルをドラッグ&ドロップすると、ギャギャギャギャっと再生するやつ。Chromeで動く。動画から音の鳴る画像がつくれたら便利だとおもって、習作のつもりで書いた。
- ブログ記事 / ソースコード
- Web Audio API / File API を使った
耳grep
- Togetterのこのまとめを見てつくった。気がついたらgrepしてなかった。
- ブログ記事 / ソースコード
ドッドッドリドリドドドドドリランド
- 適当につくったのに凄い反響あってビックリした。他人のふんどしと言う他ないのだけど、iOS6以前にiPhoneで音を鳴るように工夫した部分(サーバーで音を作ってiPhoneで再生する)は頑張ったような記憶がある。
- ブログ記事 / ソースコード
- Web Audio API / Audio Data API / heroku / Gumroad を使った

ライブラリ

timbre.js
- サウンドプログラミング用のライブラリ。Lisp風に書くというアイデアが最初にあって、jQueryのインターフェイスも使えるのではないかとか、Max/MSPのCUI版じゃないのか？？とかそういう感じでつくった。プログラムの書き方について、くだらないことを考えすぎたせいでコードがめっちゃ分かりにくくなっている。
- モダンでグッドパーツなHigh Performance JavaScriptで書き直し中。
pico.js
- アドベントカレンダーの記事を書こうと、新しいtimbre.jsのコアの部分だけを抜きだしたやつ。 Flash経由でOperaとかで音を出したり、node.jsで音を出したりできるようになったり良いブラッシュアップになったので満足している。

あと、せっかくなので去年つくって気に入っているやつも書いておきます。

無限インベンション
- マルコフ連鎖で永遠に続くインベンション。UIちゃんと作った。
- ブログ記事 / ソースコード
- 使った: (旧)pico.js