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/