1. HTML5 Audio
Mobile
WebAudio / HTMLAudio / HTMLVideo
- boombox.js -
Kei Funagayama
Frontrend Vol.7 powered by CyberAgent, Inc.

2. 自己紹介
船ヶ山 慶
エンジニア
twitter: @fkei

3. agenda
● サポート状況
● WebAudio
● HTMLAudio
● HTMLVideo
● Events
● Cache
● User Events
● App Backgroud
● multi sound
● CORS
● Audio Sprite

4. サポート状況
環境別

5. Mobile

6. PC

7. WebAudio

8. ゲームやサウンドに特化したWeb Application な
どのサウンド処理を想定した高レベルでパワフル
なAPI
概要

9. 従来のHTMLAudioでは出来ない高度な
サウンド操作が可能です。
“modular routing”で設計
されています。
特徴
フィルタ ミキシング
エフェクト
合成
編集
https://developer.mozilla.org/ja/docs/Web_Audio_API

10. 基本フロー
mp3 XMLHttpRequest
distination
AudioBufferSourceNode
decodeAudioData(arraybuffer)
AudioBuffer << arraybuffer
load (arraybuffer)
decode
set
connect
(webkit)AudioContext
※ 1
※ 2
※ 3
※ 4
変換

11. XHR 読み込み
var xhr = new XMLHttpRequest();
xhr.onload = function (e) {
// data: xhr.response
}
xhr.open('GET', ‘http://example.com/sound.m4a’, true);
xhr.responseType = 'arraybuffer';
xhr.send();

12. AudioContext
AudioBuffer
登場人物(1)
サウンド全体を管理 通常1インスタンスだけ作成
audio asset
AudioBufferをコピーした音源ソース
インスタンス数に制限あり
var AudioContext = window.webkitAudioContext || window.AudioContext;
var ctx = new AudioContext();
ctx.decodeAudioData(xhr.response, function success(audiobuffer) { … }, function error() { … });
再利用可能

13. AudioBufferSourceNode
GainNode
登場人物(2)
AudioBufferを管理、操作 再利用不可 使用後は再作成が必要 (一時停止から再生の場合も )
その他 : MediaElementAudioSourceNode, MediaStreamAudioSourceNode
var source = ctx.createBufferSource()
音量管理 再利用可
var gainNode = ctx.createGain();
source.connect(gainNode);
gainNode.gain.value = 0.5;
gainNode.connect(ctx.destination);

15. 操作(1)
AudioBufferSourceNode.start(0, offset, duration);
AudioBufferSourceNode.noteGrainOn(0, offset, duration);
0 = 再生待ち(sec), offset = 音源の開始位置(sec), duration = 再生時間(sec)
AudioBufferSourceNode.stop(0);
AudioBufferSourceNode.noteOff(0);
0 = 停止待ち(sec)
再生
停止

16. 操作(2)
AudioBufferSourceNode.loop = true;
setTimeout + ended event でも可能
AudioBufferSourceNode.disconnect();
ループ再生
切断
再生関数の引数(offset, duration)で制御
一時停止 / 途中再生

17. 操作(3)
AudioGainNode.gain.value = 1; // range 0-1
音量
distination
AudioBufferSourceNode1GainNode1
(webkit)AudioContext
GainNode2
GainNode3
AudioBufferSourceNode2
AudioBufferSourceNode3
volume:1
volume:0.3
volume:0.7
connect

18. HTMLAudio

19. 読み込み
<audio src=”xxx.mp3”></audio>
var $el = new window.Audio();
JavaScript
DOM

20. 操作(1)
HTMLAudioElement.play();
HTMLAudioElement.pause(); // 一時停止
HTMLAudioElement.currentTime = 0; // 再生位置
再生
停止
HTMLAudioElement.loop = true;
ループ

21. 操作(2)
HTMLAudioElement.volume = 1; // range 0-1
HTMLAudioElement.pause(); // 一時停止
var pauseTime = HTMLAudioElement.currentTime; // 再生位置
音量
一時停止
HTMLAudioElement.currentTime = pauseTime; // 再生位置
HTMLAudioElement.play(); // 再生
途中再生

22. HTMLVideo

23. HTMLAudio と基本操作は同じ
サウンドだけ利用する場合は
Elementだけディスプレイ外に飛ばす

24. Audio
Media type

25. WAV, MP3, AAC, OGG, M4A …...
iOS, Android
MP3, M4A
ブラウザ別に対応状況は異なります。
new Audio().canPlayType(“audio/mp3”);
> “maybe” // OK
new Audio().canPlayType(“audio/aac”);
> “” // NG

26. HTMLAudio / HTMLVideo
Events

27. ended : 再生終了
loadstart : 読み込み開始
progress : ダウンロード
abort : 読み込み中止
error : 読み込み中エラー
canplay : 再生開始可能だが、すべてをロードしていない
volumechange : 音量変更
suspend : ロード一時停止
loadeddata : 再生可能
stalled : ロードしているが、予期しない理由で止まっている
他にもあります

28. Audio
Cache

29. JSメモリキャッシュ
ブラウザキャッシュ
HTMLAudioやAudioBufferなど
サウンドファイルデータ

30. スマートフォン
User Events

31. スマホの場合、サウンド操作は
User Events からしか操作出来ません。
document.body.addEventListener(‘touchstart’, function (e) {
// sound operation …...
})
setTimeoutやブラウザが自動で発火させるイベントは不可

32. スマートフォン
Background events

33. Homeボタン/タブ遷移 イベント
document.(vendor prefix)visibilitychange
window.focus / window.blur
window.onpageshow / window.onpagehide

34. Android 2.x 固有の現象
バックグラウンドのイベント取得が
できず、再生を止める事ができない。

35. 複数音 同時再生

37. Android 4.x 2音
HTMLAudio / HTMLVideo のサウンド
出力は別になっているようです。
別々に1音づつ再生しましょう。

38. CORS

39. DOMElement準拠です。
HTMLAudio / HTMLVideo
crossorigin属性
anonymous use-credentials

40. WebAudio
XHR 準拠です。
サウンド配信サーバでHeaderを設定する必要があります。
HTTP Response header
Access-Control-Allow-Origin : “http://example.com”

41. Android 2.3
XHR / GET は利用できません。
WebAudioをサポートしていないため考えない。

42. Audio Sprite
Audio

43. 概要
CSS Sprite と考え方は同じで、複数のサウンドを
つなげて一つのAudio ファイルにします。
メリット
CSS Sprite と同じです。
1 requestで複数のサウンドを取得することが出来ます。

44. 同一音源 を使用した複数同時再生は出来ません。
一部 Android 2.3 で動作しません。
HTMLAudio / HTMLVideo

45. WebAudio
同一音源 を使用した複数再生が可能です。
WebAudioをサポートしていれば利用可能です。

46. 利用シーン
16/32kbps で短いサウンドをつなげて、
1 requestで利用する。
逆に、128/256kbps で長いサウンドをつなげると、
1 requestが専有されるので注意が必要です。
サウンドファイルサイズと用途で使い分ける

47. まとめ
Audio

48. WebAudioが一番汎用的に利用することが出来ます。
Androidは、WebAudioがサポートされていない物が多い
最新の端末であればWebAudio対応も増えてきている
PC : ie,firefox,safari,opera,chrome
Mobile: iOS, Android
イベントやAPI、サポート状況がかなり違う

50. https://github.com/CyberAgent/boombox.js

51. HTMLVideo, HTMLAudio, WebAudioを包括したブラウザ向
けサウンドライブラリ
HTML5 Audio系APIを統一したAPIで提供し、ラジカセ
(boombox)のようなシンプルな操作で利用する事が可能
スマートフォン向け必須機能を標準搭載
コンセプト

52. Play
Pause
Stop
Replay
Resume
スマホ専用機能
Volume
ループ再生
機能
複数サウンド再生
CORS
Filterings
audiosprite
生成コマンドサポート
boombox-audiosprite
gzipped 6kb filesize

53. QuickStart
$ npm install boombox.js
$ bower install boombox.js
$ component install CyberAgent/boombox.js
Download
https://github.com/CyberAgent/boombox.js/releases/download/1.0.0/boombox.min.js
Load
<script type="text/javascript" src="YOUR/PATH/TO/boombox.min.js"></script>
support require.js

54. // boombox running
boombox.setup();
var options = {
src: [
{
media: 'audio/mp4', // *1
path: 'http://example.com/sound.m4a' // *2
}
]
};
boombox.load('single', options, function (err, htmlaudio) { // *3
$(‘body’).append(htmlaudio.$el); // *4
boombox.get(‘single’).play(); // *5
});

55. 便利な機能
１つのサウンドファイルに複数のAudioファイルを定義すること
で自動で利用可能なものをロード
タイムアウト機能
setTimeoutを使ったオリジナルループ再生
WebAudio/HTMLAudio を自動で選択
JSメモリキャッシュ搭載
スマホのバッググランドイベントをキャッチ
AudioSprite ファイル生成コマンド対応
specフォルダ / jsfiddleに多数のサンプルコード
フィルタ機能による端末別の挙動を変更

56. DEMO

57. HTML5 toolkit
宣伝

58. https://github.com/CyberAgent/beez

60. http://www.html5rocks.com/ja/
https://developer.mozilla.org/ja/docs/Web_Audio_API
参考サイト

61. @fkei
ご静聴ありがとうございました