frontrend vol.7 html5 audio
TRANSCRIPT
![Page 1: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/1.jpg)
HTML5 Audio
MobileWebAudio / HTMLAudio / HTMLVideo
- boombox.js -
Kei Funagayama
Frontrend Vol.7 powered by CyberAgent, Inc.
![Page 2: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/2.jpg)
自己紹介
船ヶ山 慶
エンジニア
twitter: @fkei
![Page 3: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/3.jpg)
agenda
● サポート状況● WebAudio● HTMLAudio● HTMLVideo
● Events● Cache● User Events● App Backgroud● multi sound● CORS● Audio Sprite
![Page 4: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/4.jpg)
サポート状況
環境別
![Page 5: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/5.jpg)
Mobile
![Page 6: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/6.jpg)
PC
![Page 7: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/7.jpg)
WebAudio
![Page 8: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/8.jpg)
ゲームやサウンドに特化したWeb Application などのサウンド処理を想定した高レベルでパワフルなAPI
概要
![Page 9: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/9.jpg)
従来のHTMLAudioでは出来ない高度な
サウンド操作が可能です。
“modular routing”で設計
されています。
特徴
フィルタ ミキシング
エフェクト
合成
編集
https://developer.mozilla.org/ja/docs/Web_Audio_API
![Page 10: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/10.jpg)
基本フロー
mp3 XMLHttpRequest
distination
AudioBufferSourceNode
decodeAudioData(arraybuffer)
AudioBuffer << arraybuffer
load (arraybuffer)
decode
setconnect
(webkit)AudioContext
※ 1
※ 2
※ 3
※ 4変換
![Page 11: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/11.jpg)
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();
![Page 12: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/12.jpg)
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() { … });
再利用可能
![Page 13: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/13.jpg)
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);
![Page 14: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/14.jpg)
![Page 15: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/15.jpg)
操作(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)
再生
停止
![Page 16: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/16.jpg)
操作(2)
AudioBufferSourceNode.loop = true;
setTimeout + ended event でも可能
AudioBufferSourceNode.disconnect();
ループ再生
切断
再生関数の引数 (offset, duration)で制御
一時停止 / 途中再生
![Page 17: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/17.jpg)
操作(3)
AudioGainNode.gain.value = 1; // range 0-1
音量
distination
AudioBufferSourceNode1GainNode1
(webkit)AudioContext
GainNode2
GainNode3
AudioBufferSourceNode2
AudioBufferSourceNode3
volume:1
volume:0.3
volume:0.7connect
![Page 18: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/18.jpg)
HTMLAudio
![Page 19: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/19.jpg)
読み込み
<audio src=”xxx.mp3”></audio>
var $el = new window.Audio();
JavaScript
DOM
![Page 20: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/20.jpg)
操作(1)
HTMLAudioElement.play();
HTMLAudioElement.pause(); // 一時停止HTMLAudioElement.currentTime = 0; // 再生位置
再生
停止
HTMLAudioElement.loop = true;
ループ
![Page 21: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/21.jpg)
操作(2)
HTMLAudioElement.volume = 1; // range 0-1
HTMLAudioElement.pause(); // 一時停止var pauseTime = HTMLAudioElement.currentTime; // 再生位置
音量
一時停止
HTMLAudioElement.currentTime = pauseTime; // 再生位置HTMLAudioElement.play(); // 再生
途中再生
![Page 22: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/22.jpg)
HTMLVideo
![Page 23: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/23.jpg)
HTMLAudio と基本操作は同じ
サウンドだけ利用する場合は
Elementだけディスプレイ外に飛ばす
![Page 24: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/24.jpg)
Audio
Media type
![Page 25: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/25.jpg)
WAV, MP3, AAC, OGG, M4A …...iOS, Android
MP3, M4A
ブラウザ別に対応状況は異なります。
new Audio().canPlayType(“audio/mp3”);> “maybe” // OK
new Audio().canPlayType(“audio/aac”);> “” // NG
![Page 26: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/26.jpg)
HTMLAudio / HTMLVideo
Events
![Page 27: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/27.jpg)
ended : 再生終了
loadstart : 読み込み開始
progress : ダウンロード
abort : 読み込み中止
error : 読み込み中エラー
canplay : 再生開始可能だが、すべてをロードしていない
volumechange : 音量変更
suspend : ロード一時停止
loadeddata : 再生可能
stalled : ロードしているが、予期しない理由で止まっている
他にもあります
![Page 28: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/28.jpg)
Audio
Cache
![Page 29: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/29.jpg)
JSメモリキャッシュ
ブラウザキャッシュ
HTMLAudioやAudioBufferなど
サウンドファイルデータ
![Page 30: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/30.jpg)
スマートフォン
User Events
![Page 31: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/31.jpg)
スマホの場合、サウンド操作はUser Events からしか操作出来ません。
document.body.addEventListener(‘touchstart’, function (e) {
// sound operation …...
})
setTimeoutやブラウザが自動で発火させるイベントは不可
![Page 32: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/32.jpg)
スマートフォン
Background events
![Page 33: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/33.jpg)
Homeボタン/タブ遷移 イベント
document.(vendor prefix)visibilitychange
window.focus / window.blur
window.onpageshow / window.onpagehide
![Page 34: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/34.jpg)
Android 2.x 固有の現象
バックグラウンドのイベント取得ができず、再生を止める事ができない。
![Page 35: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/35.jpg)
複数音 同時再生
![Page 36: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/36.jpg)
![Page 37: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/37.jpg)
Android 4.x 2音
HTMLAudio / HTMLVideo のサウンド出力は別になっているようです。
別々に1音づつ再生しましょう。
![Page 38: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/38.jpg)
CORS
![Page 39: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/39.jpg)
DOMElement準拠です。
HTMLAudio / HTMLVideo
crossorigin属性anonymous use-credentials
![Page 40: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/40.jpg)
WebAudioXHR 準拠です。
サウンド配信サーバでHeaderを設定する必要があります。
HTTP Response header Access-Control-Allow-Origin : “http://example.com”
![Page 41: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/41.jpg)
Android 2.3
XHR / GET は利用できません。
WebAudioをサポートしていないため考えない。
![Page 42: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/42.jpg)
Audio SpriteAudio
![Page 43: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/43.jpg)
概要
CSS Sprite と考え方は同じで、複数のサウンドをつなげて一つのAudio ファイルにします。
メリット
CSS Sprite と同じです。
1 requestで複数のサウンドを取得することが出来ます。
![Page 44: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/44.jpg)
同一音源 を使用した複数同時再生は出来ません。
一部 Android 2.3 で動作しません。
HTMLAudio / HTMLVideo
![Page 45: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/45.jpg)
WebAudio同一音源 を使用した複数再生が可能です。
WebAudioをサポートしていれば利用可能です。
![Page 46: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/46.jpg)
利用シーン
16/32kbps で短いサウンドをつなげて、
1 requestで利用する。
逆に、128/256kbps で長いサウンドをつなげると、
1 requestが専有されるので注意が必要です。
サウンドファイルサイズと用途で使い分ける
![Page 47: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/47.jpg)
まとめ
Audio
![Page 48: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/48.jpg)
WebAudioが一番汎用的に利用することが出来ます。
Androidは、WebAudioがサポートされていない物が多い
最新の端末であればWebAudio対応も増えてきている
PC : ie,firefox,safari,opera,chromeMobile: iOS, Android
イベントやAPI、サポート状況がかなり違う
![Page 49: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/49.jpg)
![Page 50: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/50.jpg)
https://github.com/CyberAgent/boombox.js
![Page 51: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/51.jpg)
HTMLVideo, HTMLAudio, WebAudioを包括したブラウザ向
けサウンドライブラリ
HTML5 Audio系APIを統一したAPIで提供し、ラジカセ
(boombox)のようなシンプルな操作で利用する事が可能
スマートフォン向け必須機能を標準搭載
コンセプト
![Page 52: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/52.jpg)
PlayPauseStopReplayResumeスマホ専用機能
Volumeループ再生
機能
複数サウンド再生
CORSFilteringsaudiosprite
生成コマンドサポート
boombox-audiosprite
gzipped 6kb filesize
![Page 53: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/53.jpg)
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
![Page 54: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/54.jpg)
// boombox runningboombox.setup();
var options = {src: [
{media: 'audio/mp4', // *1path: 'http://example.com/sound.m4a' // *2
}]
};
boombox.load('single', options, function (err, htmlaudio) { // *3$(‘body’).append(htmlaudio.$el); // *4
boombox.get(‘single’).play(); // *5});
![Page 55: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/55.jpg)
便利な機能1つのサウンドファイルに複数のAudioファイルを定義すること
で自動で利用可能なものをロード
タイムアウト機能
setTimeoutを使ったオリジナルループ再生
WebAudio/HTMLAudio を自動で選択
JSメモリキャッシュ搭載
スマホのバッググランドイベントをキャッチ
AudioSprite ファイル生成コマンド対応
specフォルダ / jsfiddleに多数のサンプルコード
フィルタ機能による端末別の挙動を変更
![Page 56: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/56.jpg)
DEMO
![Page 57: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/57.jpg)
HTML5 toolkit宣伝
![Page 58: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/58.jpg)
https://github.com/CyberAgent/beez
![Page 59: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/59.jpg)
![Page 60: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/60.jpg)
http://www.html5rocks.com/ja/https://developer.mozilla.org/ja/docs/Web_Audio_API
参考サイト
![Page 61: Frontrend vol.7 html5 audio](https://reader033.vdocuments.pub/reader033/viewer/2022052822/554b9d6bb4c905b3618b46ed/html5/thumbnails/61.jpg)
@fkei
ご静聴ありがとうございました