Web Audio APIのモジュラー接続デモを作ってみる(4)

公開:2015-10-24 20:55
更新:2017-09-22 05:40
カテゴリ:web audio api,javascript,html5,audio,webaudiomodular,d3.js

いい加減な実装だが、ようやく音が鳴らせるようになり、AudioNodeの追加・削除、ノード間の接続・切断ができるようになった。だけどAudioBufferSourceNodeとかはまだ実装できていないし、エディターズ・ドラフトレベルの機能も使っている(任意のコネクションを切断できるバージョンのdisconnectを使用)ので、残念ながら動作するのはChromeのみである。最終的に狙っているのはElectron上での動作なのでそれでいいんだけどね。いやでもElectron上のChromiumだから別物っちゃぁ別物なので、確認はしないといけないなぁ。。はやくWeb Audio APIが勧告になってすべてのブラウザで等しく動作するようになってほしいよ。

デモとソースコード

Gist

操作方法

d3.jsのデータ・ドリブンなところを本格的に使ってみた。やっぱりよくできているよ。d3.jsは。SVGによるビジュアライズだけではなく、DOMエレメントとのデータ・バインドも簡単にできてしまう。

なので久しぶりにコード書きが楽しくできた気がする。いい加減な実装なんだけどね。。

まだまだ未完成でやることはまだたくさんあるけど、最終的にはステップ・シーケンサーを作って、演奏がきちんとできるようにしたいなぁとか考えている。STED2みたいなシーケンス・エディタをなんとか実装したいなと。シーケンス・エディタというのは私にとっては大きな壁なので、今回は乗り越えたいなぁと。

他のブラウザで動作しないのはWeb Audio APIのところだけではないようだ。イベント処理のところとかもちょっとおかしくなっているな。ちょっと調べないといけないな。。

10/25追記:

ちょっと調べた結果、FirefoxとEdgeの現バージョンで動かないのは以下のためだった。

最初に突っかかる部分だけ調べたので、他の要因もあるかもしれないけども。上記を修正したらdisconnectの部分以外は動くようになった。 繰り返すようだけどこういうのってWeb Audio APIが勧告レベルに達してないというのが大きいと思うんだよね。複雑だけど面白いAPIなので早く勧告になってほしいよ。。