Web無料相談会2018冬
Web無料相談会2018冬
2017.01.19

「Web Audio Editor」でより直感的なWeb Audio API開発を! – 続々々々「Web Audio API」入門

つっちー

こんにちは。フロントエンドエンジニアのつっちーです。

タイトルの「続」に「々」が増えすぎてゾクゾクしていますが、引き続き「Web Audio API」入門です。

今回は、WebAudioAPIによる開発を補助してくれるFirefoxの機能、「Web Audio Editor」についてご紹介します。

「Web Audio Editor」とは?

Web Audio Editorは、Firefoxが提供する、WebAudioAPIを用いた開発のための補助機能です(2016年 11月時点で、他のブラウザでは同等の機能は提供されておりませんが、Web Audio APIが W3C の“勧告”となる頃にはきっと、他のブラウザにも高度な補助機能が備わっていることと思います)。

この機能は、AudioNode の接続状態を可視化し、AudioNode が持つ、各 AudioParamオブジェクトの valueプロパティを一覧表示します。

「Web Audio Editor」を使ってみよう

「Web Audio Editor」の起動

まず、Firefoxを起動しましょう。

Web Audio Editorは、Firefox の「開発ツール」の一部です。
そのため、Firefoxを起動したら、開発ツールを開きましょう。

tool

Windowsでは、 ctrl + shift + I 、MacOSXでは command + option + I を押下することで開くことができます。

 

Web Audio Editorは、デフォルトでは無効化されています。開発ツールからオプションを選択し、「Web Audio」にチェックを入れましょう。

c2m

これでタブに「Web Audio」が追加され、Web Audio Editorが使用可能となります。

タブの「Web Audio」を選択した状態でページ遷移すると、遷移先のページで生成される AudioContext に対して検証が行われます。すでに表示しているページの AudioContext に対して検証を行う場合は、再読み込みを行ってください。

AudioNodeの接続状態の確認

Web Audio API による開発では、AudioNode の持つ connectメソッドによって、複数の AudioNode が接続されていきます。大量の AudioNode を扱う場合や、条件によって AudioNode の接続が切り替わる場合は、AudioNode間の接続状態をコードから把握することが困難な場合もあるでしょう。

Web Audio Editorは、AudioNode の接続状態を可視化することによって、この問題を解決してくれます。

実際に、Web Audio Editorで接続状態を確認してみましょう。
まずは、音源を表すAudioNodeが、最終出力を表すAudioNodeへそのまま接続されたサンプル(リンク先は音が出るので音量に注意してください)について見ていきます。

sample1

各AudioNodeはボックスとして表されています。
また、connectメソッドを実行するAudioNodeから、その引数に設定されたAudioNodeに向かう矢印によって、AudioNode間の接続が表されています。

 

次に、複数の音源を一度に出力するサンプル(リンク先は音が出ます)について、見てみましょう。

sample2a

ボックスと矢印は、音源となるすべての AudoNode が、最終出力を表すひとつの AudioNode へ接続されていることを表しています。

 

では、出力へ接続される音源を切り替えてみるとどうなるでしょうか。音源となる AudioNode と、最終出力を表す AudioNode とを、ボタンにより接続、切断できるサンプル(リンク先は音が出ます)で確認してみましょう。

sample3a

AudioNodeを表すボックス間には、接続されるまで矢印はなく、

 
sample3b

接続されたタイミングで矢印が現れます。

このように、Web Audio Editor は、AudioNode の接続状態をリアルタイムに可視化してくれます。

AudioParamオブジェクトの確認

Web Audio API による開発では、AudioNode だけではなく、それぞれの AudioNode が持つ AudioParam オブジェクトも複数扱います。これもまた、複雑な内容になると、その時々の状態を把握することは困難でしょう。

Web Audio Editorは、各 AudioParam オブジェクトの value プロパティを一覧表示することで、この問題も解決してくれます。

実際に、Web Audio Editor によって各 AudioParam オブジェクトの value プロパティを確認してみましょう。先ほどの複数の音源を一度に出力するサンプル(リンク先は音が出ます)を再度ひらき、今度は音源となる AudioNode のボックスをクリックしてみてください。

sample2b

クリックされた AudioNode のボックスが青くなり、「プロパティ」という欄が表示されましたでしょうか。

これが、クリックされた AudioNode の持つ AudioParam オブジェクトの value プロパティ一覧です。この場合では、OscillatorNodeの持つtype.value, frequency.value, detune.value が表示されています。

またここでは、別の AudioNode のボックスをクリックし、それぞれの frequency.value に別の値が設定されていることも確認してみてください。

 

では、AudioParam オブジェクトの value プロパティを変動させてみるとどうなるでしょうか。これまでの内容に、レンジバーによる音量調節機能を加えたサンプル(リンク先は音が出ます)で確認します。

sample4

中間処理を表す AudioNode が追加されていることを確認できたら、そのボックスをクリックしてみてください。この場合では、GainNode の持つ gain.value が表示されたかと思います。

次に、いま value プロパティを確認した AudioNode に対応するレンジバーを左右させ、gain.value を調節してみてください。そして、再度同じボックスをクリックすると、gain.value の表示が調節後の値に更新されることを確認できるはずです。

このように、Web Audio Editor は AudioParam オブジェクトの value プロパティに関しても、その時々の状態を表示してくれます。ただし、AudioNode の接続状態と違って、リアルタイムに反映されないことに注意してください。

AudioParam オブジェクトの value プロパティの表示は、ボックスがクリックされたタイミングで、現在の値に更新されます。

まとめ

自分で作成したページだけでなく、既存のページをWeb Audio Editorで検証することももちろん可能です。

Web Audio APIを用いたページの開発、そして分析にも、Web Audio Editorは大きな助けとなります。どんどん活用していきたいですね。

ではまた! つっちーでした。