Download as PDF, PPTX
![// 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/75/Frontrend-vol-7-html5-audio-54-2048.jpg)
![[Htmlday]present](https://cdn.slidesharecdn.com/ss_thumbnails/htmldaypresent-130607095228-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Frontrend vol.7 html5 audio
- 1. HTML5 Audio Mobile WebAudio /HTMLAudio / HTMLVideo - boombox.js - Kei Funagayama Frontrend Vol.7 powered by CyberAgent, Inc.
- 2.
- 3. agenda ● サポート状況 ● WebAudio ●HTMLAudio ● HTMLVideo ● Events ● Cache ● User Events ● App Backgroud ● multi sound ● CORS ● Audio Sprite
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 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をコピーした音源ソース インスタンス数に制限あり varAudioContext = 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.
- 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.
- 23.
- 24.
- 25. WAV, MP3, AAC,OGG, M4A …... iOS, Android MP3, M4A ブラウザ別に対応状況は異なります。 new Audio().canPlayType(“audio/mp3”); > “maybe” // OK new Audio().canPlayType(“audio/aac”); > “” // NG
- 26.
- 27. ended : 再生終了 loadstart: 読み込み開始 progress : ダウンロード abort : 読み込み中止 error : 読み込み中エラー canplay : 再生開始可能だが、すべてをロードしていない volumechange : 音量変更 suspend : ロード一時停止 loadeddata : 再生可能 stalled : ロードしているが、予期しない理由で止まっている 他にもあります
- 28.
- 29.
- 30.
- 31. スマホの場合、サウンド操作は User Events からしか操作出来ません。 document.body.addEventListener(‘touchstart’,function (e) { // sound operation …... }) setTimeoutやブラウザが自動で発火させるイベントは不可
- 32.
- 33. Homeボタン/タブ遷移 イベント document.(vendor prefix)visibilitychange window.focus/ window.blur window.onpageshow / window.onpagehide
- 34.
- 35.
- 37. Android 4.x 2音 HTMLAudio/ HTMLVideo のサウンド 出力は別になっているようです。 別々に1音づつ再生しましょう。
- 38.
- 39.
- 40. WebAudio XHR 準拠です。 サウンド配信サーバでHeaderを設定する必要があります。 HTTP Responseheader Access-Control-Allow-Origin : “http://example.com”
- 41. Android 2.3 XHR /GET は利用できません。 WebAudioをサポートしていないため考えない。
- 42.
- 43. 概要 CSS Sprite と考え方は同じで、複数のサウンドを つなげて一つのAudioファイルにします。 メリット CSS Sprite と同じです。 1 requestで複数のサウンドを取得することが出来ます。
- 44. 同一音源 を使用した複数同時再生は出来ません。 一部 Android2.3 で動作しません。 HTMLAudio / HTMLVideo
- 45.
- 46. 利用シーン 16/32kbps で短いサウンドをつなげて、 1 requestで利用する。 逆に、128/256kbpsで長いサウンドをつなげると、 1 requestが専有されるので注意が必要です。 サウンドファイルサイズと用途で使い分ける
- 47.
- 48. WebAudioが一番汎用的に利用することが出来ます。 Androidは、WebAudioがサポートされていない物が多い 最新の端末であればWebAudio対応も増えてきている PC : ie,firefox,safari,opera,chrome Mobile:iOS, Android イベントやAPI、サポート状況がかなり違う
- 50.
- 51. HTMLVideo, HTMLAudio, WebAudioを包括したブラウザ向 けサウンドライブラリ HTML5Audio系APIを統一したAPIで提供し、ラジカセ (boombox)のようなシンプルな操作で利用する事が可能 スマートフォン向け必須機能を標準搭載 コンセプト
- 52.
- 53. QuickStart $ npm installboombox.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(); varoptions = { 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.
- 56.
- 57.
- 58.
- 60.
- 61.