ng-kyoto meetup #2 Web Audio APIの発表資料です。

1. AngularJSとWeb Audio API
はじめてみました

2. 自己紹介

3. pastelInc
京都在住
仕事ではPHP
よろしくお願いします

4. 今日の目標

5. • Web Audio APIのワクワクを感じてもらう
• Angularでも使えることを知ってもらう
• Web Audio APIを一回触りたいと思ってもら
う

6. Web Audio APIの
心が躍るサービス達

7. X-Sound
https://github.com/Korilakkuma/X-Sound

8. Audio Trackr
https://github.com/chrisbateman/Audio-Trackr

9. 先日のYAPCにて

10. WebAudio 300bps FSK
modem
https://github.com/cho45/WebAudio-Modem
http://cho45.stfuawsc.com/WebAudio-Modem/FSK/modem.html

11. Angular以外にももちろんあります
http://chromium.googlecode.com/svn/
trunk/samples/audio/index.html

12. Web Audio API
のことを知る

13. Web Audio APIの目標
• Webベースのゲーム、インタラクティブな体
験を提供する
• ミキシング、プロセシング、フィルタリング処
理機能をもたせる

14. Web Audio APIの機能
• 低レイテンシーな音の再生
• JavaScriptでのオーディオストリームの合成と加工
• 異なるAudioNodeを任意に繋げる機能
（モジュラールーティング）
• 3Dゲームをサポートする空間音響＝ドップラーとか
• オシレータ＝発振器
（周期性をもつ持続的な振動を発生させる装置）

15. モジュラールーティング？

16. 例

17. モジュラールーティング
• すべての接続はAudioContext内部で行われる
• ソースノードには入力がない
• ディスティネーションノードには出力がない
• ディスティネーションノードが最終的なオーディオハー
ドウェアにつながる
• フィルタなどのノードはこの２つの間に配置する

18. AudioNode
• 入力や出力を持つ
• 入力を処理し、出力にオーディオ信号を送り
出す
• 出力は1つ以上のチャンネルを持つ
• 複数の入力に対して足しあわせを行う

19. ソースとなるAudioNode
• OscillatorNode
＝発振器。周期的な波形を出力。周波数と波形設定ができる
• AudioBufferSourceNode
＝バッファデータを出力。再生速度、ループ設定ができる
• MediaElementAudioSourceNode
＝audioタグをソースにして出力。
• MediaStreamAudioSourceNode
=WebRTCのMediaStreamをソースに出力。マイク信号など

20. AudioContext
• Web Audio APIの起点
• AudioNodeの作成を制御する
• 入出力用のAudioNodeの生成もここから
• 一つのインスタンスで複数の入力に対応でき
る

21. イメージしずらい
と思ったら

22. Web Audio PlayGround
https://github.com/cwilso/WebAudio

23. Web Audio APIの
はじめかた
in Angular

24. 題材
• 正弦波プレイヤー
• 簡単な例でモジュラールーティングを理解す
る
• start/stopボタンで発生をコントロール
• 振幅調節機能もつける

25. 繋げるノードたち
• ソースノード
＝OscillatorNode
• ボリューム操作
＝GainNode
• デスティネーションノード
＝AudioDestinationNode

26. 図にすると

27. context
• factoryメソッドでAudioContextをサービスに
登録
• 一度インスタンスを作成したらそれっきりで
いい
• AudioContextをラップしてあげるだけ

28. oscillator
• 正弦波をコントロールするサービス
• start/stop/volumeをコントロールできる

29. player
• カスタムdirectiveに実装
• ユーザーのボタンクリックに合わせてオシレー
タを使う

30. 正弦波聞こえた！

31. stopして再度start

32. できない！

33. なぜなら
• 一度start→stopさせたソースノードは再度
作って接続してあげないといけない
• 一度startしたソースノードに再度startをする
とエラーなので再度startする前にはstopを行
う

34. どうするか
• stopしたタイミングで再度オシレータの作
成、接続を行う
• $watchでプレイヤーの再生状況をチェックし
てstopしたタイミングに↑を行う
• playerに実装した

35. 結果

36. 困った問題
• GainNode以外のAudioNodeが増えたときど
うするのか
• start/stopのチェックはdirective?service?どち
らに書くのか迷った
• 音楽や信号処理の専門用語が多くてオーディ
オ、音波に関する知識が求められる

37. まとめ
• Web Audio APIはすでに数多く実装例がある
ライブラリも幾らかある
• AudioContextが利用の起点になる
• OscillatorNodeはstopを実行すると再生成し
てあげる必要がある

38. 勉強した情報元
• https://webmusicdevelopers.appspot.com/
codelabs/webaudio/index.html?ja-jp
• http://g200kg.github.io/web-audio-api-ja/
• http://mmckegg.github.io/web-audio-school/
• http://qiita.com/mohayonao/items/
d79e9fc56b4e9c157be1

39. ご静聴
ありがとうございました！