web audio apiの初歩
DESCRIPTION
Web Audio API についてLTをしました。 LTをした勉強会 -> 帰ってきたYokohama.js (#yjs20140419) http://atnd.org/events/48953TRANSCRIPT
Web Audio API の初歩Shota Kubota @kubosho_
自己紹介• kubosho_ もしくは kubosho で
各SNSに存在
• 謎社所属
• http://blog.o2p.jp/
• 最近は Windows で開発を行ってます
(Visual Studio 2013 + TypeScript + KnockoutJS)
目次• Web Audio API とは?
• Web Audio API のブラウザ対応状況
• Web Audio API で出来る事出来ない事
Web Audio API とは?
audio 要素を凄くしたようなもの
しかし audio 要素とは 使用用途が違う
Web Audio API とは?• 音の編集や加工が出来る
• 編集例:音量の変化、音声の分割と結合(ChannelSplitterNode, ChannelMergerNode)
• 加工例:
立体音響(PannerNode)など
Web Audio API とは?• 音の再生も行える
• XHR経由でダウンロードしてきた音の同時再生も出来るらしい
• Web Audio API を使用したゲーム用音声の開発 -
HTML5 Rockshttp://www.html5rocks.com/ja/tutorials/webaudio/games/
ここまでのまとめ
audio 要素は
音のストリーミング再生に向いている
Web Audio API は
高度な音の再生が求められる場面
例えばゲームやミュージックアプリなどに向いている
Web Audio API のブラウザ対応状況
Web Audio API のブラウザ対応状況• IEェ…
• iOS 7.1 の Safari では http://curtaincall.weblike.jp/
portfolio-web-sounder/ 内にあるサンプルが動かなかった
(音が再生されない)
• polyfillもある(詳しく調べてはいない)
g200kg/WAAPISim https://github.com/g200kg/WAAPISim
ここまでのまとめ
IEの対応状況…
iOSのSafariでも微妙?(要検証)
polyfill library はある
Web Audio API で出来る事出来ない事
Web Audio API で出来る事• 低遅延な音の再生
• シンセサイザーやドラムセットなどのアプリケーション作成
• iTunes に搭載されているようなミュージックヴィジュアライザー
(WebGL との併用)
Web Audio API で出来ない事• Cubase や SONAR、Logic のような
極めて高度な DAW (デスクトップオーディオワークステーション) の再現
Web Audio APIhttp://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.
まとめ
まとめ• Web Audio API は音の編集や加工、高度な音の再生に向いている
• Web Audio API のブラウザ対応状況は、
IE が対応してない、iOS の Safari も微妙?
• audio 要素に比べればより高機能な事は
出来るけど、Cubase や SONAR、Logic と
いったような極めて高度な DAW の再現はきつい
終わり
参考文献
参考文献• 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
参考文献• 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/