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.
Web Audio API の初歩
Shota Kubota @kubosho_
自己紹介
• kubosho_ もしくは kubosho で

各SNSに存在
• 社所属
• http://blog.o2p.jp/
• 最近は Windows で開発を行ってます

(Visual Studio 2013 + TypeScr...
目次
• 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 Rocks

http://www.htm...
ここまでのまとめ
audio 要素は

音のストリーミング再生に

向いている
Web Audio API は

高度な音の再生が求められる場面

例えばゲームやミュージックアプリなどに

向いている
Web Audio API の

ブラウザ対応状況
Web Audio API のブラウザ対応状況
• IEェ…
• iOS 7.1 の Safari では http://curtaincall.weblike.jp/
portfolio-web-sounder/ 内にあるサンプルが動かなかった...
ここまでのまとめ
IEの対応状況…

iOSのSafariでも微妙?(要検証)
polyfill library はある
Web Audio API で

出来る事出来ない事
Web Audio API で出来る事
• 低遅延な音の再生
• シンセサイザーやドラムセットなどの

アプリケーション作成
• iTunes に搭載されているようなミュージック
ヴィジュアライザー

(WebGL との併用)
Web Audio API で出来ない事
• Cubase や SONAR、Logic のような

極めて高度な DAW (デスクトップオーディオ
ワークステーション) の再現
Web Audio API

http://www.w3.org/TR/webaudio/
#introduction
That said, modern desktop audio
software can have very advance...
まとめ
まとめ
• Web Audio API は音の編集や加工、

高度な音の再生に向いている
• Web Audio API のブラウザ対応状況は、

IE が対応してない、iOS の Safari も微妙?
• audio 要素に比べればより高機...
終わり
参考文献
参考文献
• Web Audio API: http://www.w3.org/TR/
webaudio/
• Web Audio API (日本語訳): http://
g200kg.github.io/web-audio-api-ja/
•...
参考文献
• WEB SOUNDER - Web Audio API 解説: http://
curtaincall.weblike.jp/portfolio-web-sounder/
• g200kg/WAAPISim: https://gi...
Web Audio APIの初歩
Upcoming SlideShare
Loading in …5
×

Web Audio APIの初歩

2,838 views

Published on

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

Published in: Engineering
  • Be the first to comment

Web Audio APIの初歩

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

×