読者です 読者をやめる 読者になる 読者になる

console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

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

HTML JavaScript WebAudio

職場のとある神エンジニアさんから、最近の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ってタブを選ぶだけで使えます。
表示されてなかったらおなじみの歯車マークから表示するようにします。

テストページ

参考:Web Audio! | Labs.lealog.net

Web Audio Editor開いた状態で↑にアクセスすると、すぐわかると思います。
そして、どうすればAudioNodeがGCされてくれるのかもわかります。

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

AudioNodeをGCさせるには

参考:2.3.3 Lifetime | Web Audio API

というわけで、

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

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

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

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