![// 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
});](https://image.slidesharecdn.com/frontrendvol-140419012229-phpapp01/85/Frontrend-vol-7-html5-audio-54-320.jpg)
Frontrend vol.7 html5 audio
- 1. HTML5 Audio Mobile WebAudio / HTMLAudio / HTMLVideo - boombox.js - Kei Funagayama Frontrend Vol.7 powered by CyberAgent, Inc.
- 3. agenda ● サポート状況 ● WebAudio ● HTMLAudio ● HTMLVideo ● Events ● Cache ● User Events ● App Backgroud ● multi sound ● CORS ● Audio Sprite
- 4. サポート状況 環境別
- 5. Mobile
- 6. PC
- 7. WebAudio
- 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=/slideshow/frontrend-vol7-html5-audio/33703433/”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
- 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
- 27. ended : 再生終了 loadstart : 読み込み開始 progress : ダウンロード abort : 読み込み中止 error : 読み込み中エラー canplay : 再生開始可能だが、すべてをロードしていない volumechange : 音量変更 suspend : ロード一時停止 loadeddata : 再生可能 stalled : ロードしているが、予期しない理由で止まっている 他にもあります
- 28. Audio Cache
- 31. スマホの場合、サウンド操作は User Events からしか操作出来ません。 document.body.addEventListener(‘touchstart’, function (e) { // sound operation …... }) setTimeoutやブラウザが自動で発火させるイベントは不可
- 33. Homeボタン/タブ遷移 イベント document.(vendor prefix)visibilitychange window.focus / window.blur window.onpageshow / window.onpagehide
- 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をサポートしていないため考えない。
- 43. 概要 CSS Sprite と考え方は同じで、複数のサウンドを つなげて一つのAudio ファイルにします。 メリット CSS Sprite と同じです。 1 requestで複数のサウンドを取得することが出来ます。
- 44. 同一音源 を使用した複数同時再生は出来ません。 一部 Android 2.3 で動作しません。 HTMLAudio / HTMLVideo
- 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、サポート状況がかなり違う
- 51. HTMLVideo, HTMLAudio, WebAudioを包括したブラウザ向 けサウンドライブラリ HTML5 Audio系APIを統一したAPIで提供し、ラジカセ (boombox)のようなシンプルな操作で利用する事が可能 スマートフォン向け必須機能を標準搭載 コンセプト
- 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=/slideshow/frontrend-vol7-html5-audio/33703433/"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 宣伝