いい加減な実装だが、ようやく音が鳴らせるようになり、AudioNodeの追加・削除、ノード間の接続・切断ができるようになった。だけどAudioBufferSourceNodeとかはまだ実装できていないし、エディターズ・ドラフトレベルの機能も使っている（任意のコネクションを切断できるバージョンのdisconnectを使用）ので、残念ながら動作するのはChromeのみである。最終的に狙っているのはElectron上での動作なのでそれでいいんだけどね。いやでもElectron上のChromiumだから別物っちゃぁ別物なので、確認はしないといけないなぁ。。はやくWeb Audio APIが勧告になってすべてのブラウザで等しく動作するようになってほしいよ。
操作方法
- 画面の何もないところで右クリック ... AudioNodeの挿入
- AudioNodeをShift+左クリック ... 削除
- 出力端子をドラッグ ... 端子接続
- コネクションをShift+左クリック ... 接続解除
- AudioNode上で右クリック ... パラメータ設定
d3.jsのデータ・ドリブンなところを本格的に使ってみた。やっぱりよくできているよ。d3.jsは。SVGによるビジュアライズだけではなく、DOMエレメントとのデータ・バインドも簡単にできてしまう。
なので久しぶりにコード書きが楽しくできた気がする。いい加減な実装なんだけどね。。
まだまだ未完成でやることはまだたくさんあるけど、最終的にはステップ・シーケンサーを作って、演奏がきちんとできるようにしたいなぁとか考えている。STED2みたいなシーケンス・エディタをなんとか実装したいなと。シーケンス・エディタというのは私にとっては大きな壁なので、今回は乗り越えたいなぁと。
他のブラウザで動作しないのはWeb Audio APIのところだけではないようだ。イベント処理のところとかもちょっとおかしくなっているな。ちょっと調べないといけないな。。
10/25追記:
ちょっと調べた結果、FirefoxとEdgeの現バージョンで動かないのは以下のためだった。
Osciilatorノードのstartメソッドの引数漏れ。Chromeでは引数なしでは0を引数に取るのと同じ動作をする。仕様では引数なしでは0と同じだから、Firefoxの動作が少しおかしい気がする。- Firefoxは
disconnectの仕様がドラフト版のままなので、動作しない。しかしドラフトレベルのdisconnectは使い物にならない。指定したAudioNodeの全コネクションが切断されてしまうので、任意のコネクションを切断するとなると、いったん全部切断してそれからつなぎなおさなければならない。connectとdisconnectの機能に対称性がないのだ。 - Edgeはそれに加えて、
AudioContextにcreateMediaStreamDestinationがない。
最初に突っかかる部分だけ調べたので、他の要因もあるかもしれないけども。上記を修正したらdisconnectの部分以外は動くようになった。
繰り返すようだけどこういうのってWeb Audio APIが勧告レベルに達してないというのが大きいと思うんだよね。複雑だけど面白いAPIなので早く勧告になってほしいよ。。