Web Audio API についてLTをしました。 LTをした勉強会 -> 帰ってきたYokohama.js (#yjs20140419) http://atnd.org/events/48953

1. Web Audio API の初歩
Shota Kubota @kubosho_

2. 自己紹介
• kubosho_ もしくは kubosho で
各SNSに存在
• 社所属
• http://blog.o2p.jp/
• 最近は Windows で開発を行ってます
(Visual Studio 2013 + TypeScript + KnockoutJS)

3. 目次
• Web Audio API とは？
• Web Audio API のブラウザ対応状況
• Web Audio API で出来る事出来ない事

4. Web Audio API とは？

5. audio 要素を
凄くしたようなもの

6. しかし audio 要素とは
使用用途が違う

7. Web Audio API とは？
• 音の編集や加工が出来る
• 編集例:
音量の変化、音声の分割と結合
(ChannelSplitterNode, ChannelMergerNode)
• 加工例:
立体音響(PannerNode)など

8. Web Audio API とは？
• 音の再生も行える
• XHR経由でダウンロードしてきた音の同時再生も
出来るらしい
• Web Audio API を使用したゲーム用音声の開発 -
HTML5 Rocks
http://www.html5rocks.com/ja/tutorials/
webaudio/games/

9. ここまでのまとめ

10. audio 要素は
音のストリーミング再生に
向いている

11. Web Audio API は
高度な音の再生が求められる場面
例えばゲームやミュージックアプリなどに
向いている

12. Web Audio API の
ブラウザ対応状況

14. Web Audio API のブラウザ対応状況
• IEェ…
• iOS 7.1 の Safari では http://curtaincall.weblike.jp/
portfolio-web-sounder/ 内にあるサンプルが動かなかった
(音が再生されない)
• polyfillもある(詳しく調べてはいない)
g200kg/WAAPISim
https://github.com/g200kg/WAAPISim

15. ここまでのまとめ

16. IEの対応状況…
iOSのSafariでも微妙？(要検証)
polyfill library はある

17. Web Audio API で
出来る事出来ない事

18. Web Audio API で出来る事
• 低遅延な音の再生
• シンセサイザーやドラムセットなどの
アプリケーション作成
• iTunes に搭載されているようなミュージック
ヴィジュアライザー
(WebGL との併用)

19. Web Audio API で出来ない事
• Cubase や SONAR、Logic のような
極めて高度な DAW (デスクトップオーディオ
ワークステーション) の再現

20. Web Audio API
http://www.w3.org/TR/webaudio/
#introduction
That said, modern desktop audio
software can have very advanced
capabilities, some of which would be
difficult or impossible to build with this
system.

21. まとめ

22. まとめ
• Web Audio API は音の編集や加工、
高度な音の再生に向いている
• Web Audio API のブラウザ対応状況は、
IE が対応してない、iOS の Safari も微妙？
• audio 要素に比べればより高機能な事は
出来るけど、Cubase や SONAR、Logic と
いったような極めて高度な DAW の再現はきつい

23. 終わり

24. 参考文献

25. 参考文献
• Web Audio API: http://www.w3.org/TR/
webaudio/
• Web Audio API (日本語訳): http://
g200kg.github.io/web-audio-api-ja/
• Can I use: Web Audio API http://
caniuse.com/audio-api

26. 参考文献
• WEB SOUNDER - Web Audio API 解説: http://
curtaincall.weblike.jp/portfolio-web-sounder/
• g200kg/WAAPISim: https://github.com/
g200kg/WAAPISim
• Web Audio API を使用したゲーム用音声の開発
- HTML5 Rocks: http://www.html5rocks.com/ja/
tutorials/webaudio/games/