🍃このブログは移転しました。
3秒後、自動的に移動します・・・。

WebAudioAPIさわるならFirefoxのWeb Audio Editorで

職場のとある神エンジニアさんから、最近のFirefoxがイケてるという話を聞き。

実際にFirefoxのNightly使ってみてるんですけど、良いですねコレ!
Firebugないとどうしようもなかったあの頃のFirefoxとは違うのだよ!

というわけで、FirefoxのNightlyで先行実装されてるWeb Audio Editorがアツかったのでメモ。
Firefox 32から搭載らしいですねー。

参考:Introducing the Web Audio Editor in Firefox Developer Tools ✩ Mozilla Hacks – the Web developer blog

Web Audio Editor

Web Audio APIの山ほどあるなんたらNodeですが、コード上で繋いでいくとエフェクターボードみたいにごちゃごちゃになります。

で、どれとどれが繋がれててどんなパラメータになってて・・みたいなのを可視化できるツールが、
Web Audio Editorです。

開発者ツール開いて、Web Audioってタブを選ぶだけで使えます。
表示されてなかったらおなじみの歯車マークから表示するようにします。

冒頭の参考記事のコメントのところにもあるんですけど、
GCされたであろうノードが表示されたままになるのは、バージョン33で直ってるそうなので、
今もまだGCされないようであれば、何か忘れてることになりますねー。

AudioNodeをGCさせるには

参考:2.3.3 Lifetime | Web Audio API

というわけで、

  • Nodeつくって
  • connectして
  • start / noteOn

したNodeをGCさせるためには、

  • stop / noteOffして
  • disconnectして
  • nullいれる

しないといけないみたいですね。
null入れなくても回収されると思ってました・・。