Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

AngularとWeb Audio APIはじめてみました

608 views

Published on

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

Published in: Technology
  • Be the first to comment

AngularとWeb Audio APIはじめてみました

  1. 1. AngularJSとWeb Audio API はじめてみました
  2. 2. 自己紹介
  3. 3. pastelInc 京都在住 仕事ではPHP よろしくお願いします
  4. 4. 今日の目標
  5. 5. • Web Audio APIのワクワクを感じてもらう • Angularでも使えることを知ってもらう • Web Audio APIを一回触りたいと思ってもら う
  6. 6. Web Audio APIの 心が躍るサービス達
  7. 7. X-Sound https://github.com/Korilakkuma/X-Sound
  8. 8. Audio Trackr https://github.com/chrisbateman/Audio-Trackr
  9. 9. 先日のYAPCにて
  10. 10. WebAudio 300bps FSK modem https://github.com/cho45/WebAudio-Modem http://cho45.stfuawsc.com/WebAudio-Modem/FSK/modem.html
  11. 11. Angular以外にももちろんあります http://chromium.googlecode.com/svn/ trunk/samples/audio/index.html
  12. 12. Web Audio API のことを知る
  13. 13. Web Audio APIの目標 • Webベースのゲーム、インタラクティブな体 験を提供する • ミキシング、プロセシング、フィルタリング処 理機能をもたせる
  14. 14. Web Audio APIの機能 • 低レイテンシーな音の再生 • JavaScriptでのオーディオストリームの合成と加工 • 異なるAudioNodeを任意に繋げる機能
 (モジュラールーティング) • 3Dゲームをサポートする空間音響=ドップラーとか • オシレータ=発振器
 (周期性をもつ持続的な振動を発生させる装置)
  15. 15. モジュラールーティング?
  16. 16.
  17. 17. モジュラールーティング • すべての接続はAudioContext内部で行われる • ソースノードには入力がない • ディスティネーションノードには出力がない • ディスティネーションノードが最終的なオーディオハー ドウェアにつながる • フィルタなどのノードはこの2つの間に配置する
  18. 18. AudioNode • 入力や出力を持つ • 入力を処理し、出力にオーディオ信号を送り 出す • 出力は1つ以上のチャンネルを持つ • 複数の入力に対して足しあわせを行う
  19. 19. ソースとなるAudioNode • OscillatorNode
 =発振器。周期的な波形を出力。周波数と波形設定ができる • AudioBufferSourceNode
 =バッファデータを出力。再生速度、ループ設定ができる • MediaElementAudioSourceNode
 =audioタグをソースにして出力。 • MediaStreamAudioSourceNode
 =WebRTCのMediaStreamをソースに出力。マイク信号など
  20. 20. AudioContext • Web Audio APIの起点 • AudioNodeの作成を制御する • 入出力用のAudioNodeの生成もここから • 一つのインスタンスで複数の入力に対応でき る
  21. 21. イメージしずらい と思ったら
  22. 22. Web Audio PlayGround https://github.com/cwilso/WebAudio
  23. 23. Web Audio APIの はじめかた in Angular
  24. 24. 題材 • 正弦波プレイヤー • 簡単な例でモジュラールーティングを理解す る • start/stopボタンで発生をコントロール • 振幅調節機能もつける
  25. 25. 繋げるノードたち • ソースノード
 =OscillatorNode • ボリューム操作
 =GainNode • デスティネーションノード
 =AudioDestinationNode
  26. 26. 図にすると
  27. 27. context • factoryメソッドでAudioContextをサービスに 登録 • 一度インスタンスを作成したらそれっきりで いい • AudioContextをラップしてあげるだけ
  28. 28. oscillator • 正弦波をコントロールするサービス • start/stop/volumeをコントロールできる
  29. 29. player • カスタムdirectiveに実装 • ユーザーのボタンクリックに合わせてオシレー タを使う
  30. 30. 正弦波聞こえた!
  31. 31. stopして再度start
  32. 32. できない!
  33. 33. なぜなら • 一度start→stopさせたソースノードは再度 作って接続してあげないといけない • 一度startしたソースノードに再度startをする とエラーなので再度startする前にはstopを行 う
  34. 34. どうするか • stopしたタイミングで再度オシレータの作 成、接続を行う • $watchでプレイヤーの再生状況をチェックし てstopしたタイミングに↑を行う • playerに実装した
  35. 35. 結果
  36. 36. 困った問題 • GainNode以外のAudioNodeが増えたときど うするのか • start/stopのチェックはdirective?service?どち らに書くのか迷った • 音楽や信号処理の専門用語が多くてオーディ オ、音波に関する知識が求められる
  37. 37. まとめ • Web Audio APIはすでに数多く実装例がある
 ライブラリも幾らかある • AudioContextが利用の起点になる • OscillatorNodeはstopを実行すると再生成し てあげる必要がある
  38. 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. 39. ご静聴 ありがとうございました!

×