HTML5 Audio
Mobile
WebAudio / HTMLAudio / HTMLVideo
- boombox.js -
Kei Funagayama
Frontrend Vol.7 powered by CyberAgent, I...
自己紹介
船ヶ山 慶
エンジニア
twitter: @fkei
agenda
● サポート状況
● WebAudio
● HTMLAudio
● HTMLVideo
● Events
● Cache
● User Events
● App Backgroud
● multi sound
● CORS
● A...
サポート状況
環境別
Mobile
PC
WebAudio
ゲームやサウンドに特化したWeb Application な
どのサウンド処理を想定した高レベルでパワフル
なAPI
概要
従来のHTMLAudioでは出来ない高度な
サウンド操作が可能です。
“modular routing”で設計
されています。
特徴
フィルタ ミキシング
エフェクト
合成
編集
https://developer.mozilla.org/ja...
基本フロー
mp3 XMLHttpRequest
distination
AudioBufferSourceNode
decodeAudioData(arraybuffer)
AudioBuffer << arraybuffer
load (a...
XHR 読み込み
var xhr = new XMLHttpRequest();
xhr.onload = function (e) {
// data: xhr.response
}
xhr.open('GET', ‘http://examp...
AudioContext
AudioBuffer
登場人物(1)
サウンド全体を管理 通常1インスタンスだけ作成
audio asset
AudioBufferをコピーした音源ソース
インスタンス数に制限あり
var AudioContext ...
AudioBufferSourceNode
GainNode
登場人物(2)
AudioBufferを管理、操作 再利用不可 使用後は再作成が必要 (一時停止から再生の場合も )
その他 : MediaElementAudioSourceNod...
操作(1)
AudioBufferSourceNode.start(0, offset, duration);
AudioBufferSourceNode.noteGrainOn(0, offset, duration);
0 = 再生待ち(s...
操作(2)
AudioBufferSourceNode.loop = true;
setTimeout + ended event でも可能
AudioBufferSourceNode.disconnect();
ループ再生
切断
再生関数の引...
操作(3)
AudioGainNode.gain.value = 1; // range 0-1
音量
distination
AudioBufferSourceNode1GainNode1
(webkit)AudioContext
GainN...
HTMLAudio
読み込み
<audio src=”xxx.mp3”></audio>
var $el = new window.Audio();
JavaScript
DOM
操作(1)
HTMLAudioElement.play();
HTMLAudioElement.pause(); // 一時停止
HTMLAudioElement.currentTime = 0; // 再生位置
再生
停止
HTMLAudio...
操作(2)
HTMLAudioElement.volume = 1; // range 0-1
HTMLAudioElement.pause(); // 一時停止
var pauseTime = HTMLAudioElement.current...
HTMLVideo
HTMLAudio と基本操作は同じ
サウンドだけ利用する場合は
Elementだけディスプレイ外に飛ばす
Audio
Media type
WAV, MP3, AAC, OGG, M4A …...
iOS, Android
MP3, M4A
ブラウザ別に対応状況は異なります。
new Audio().canPlayType(“audio/mp3”);
> “maybe” // OK...
HTMLAudio / HTMLVideo
Events
ended : 再生終了
loadstart : 読み込み開始
progress : ダウンロード
abort : 読み込み中止
error : 読み込み中エラー
canplay : 再生開始可能だが、すべてをロードしていない
volumech...
Audio
Cache
JSメモリキャッシュ
ブラウザキャッシュ
HTMLAudioやAudioBufferなど
サウンドファイルデータ
スマートフォン
User Events
スマホの場合、サウンド操作は
User Events からしか操作出来ません。
document.body.addEventListener(‘touchstart’, function (e) {
// sound operation ….....
スマートフォン
Background events
Homeボタン/タブ遷移 イベント
document.(vendor prefix)visibilitychange
window.focus / window.blur
window.onpageshow / window.onpagehide
Android 2.x 固有の現象
バックグラウンドのイベント取得が
できず、再生を止める事ができない。
複数音 同時再生
Android 4.x 2音
HTMLAudio / HTMLVideo のサウンド
出力は別になっているようです。
別々に1音づつ再生しましょう。
CORS
DOMElement準拠です。
HTMLAudio / HTMLVideo
crossorigin属性
anonymous use-credentials
WebAudio
XHR 準拠です。
サウンド配信サーバでHeaderを設定する必要があります。
HTTP Response header
Access-Control-Allow-Origin : “http://example.com”
Android 2.3
XHR / GET は利用できません。
WebAudioをサポートしていないため考えない。
Audio Sprite
Audio
概要
CSS Sprite と考え方は同じで、複数のサウンドを
つなげて一つのAudio ファイルにします。
メリット
CSS Sprite と同じです。
1 requestで複数のサウンドを取得することが出来ます。
同一音源 を使用した複数同時再生は出来ません。
一部 Android 2.3 で動作しません。
HTMLAudio / HTMLVideo
WebAudio
同一音源 を使用した複数再生が可能です。
WebAudioをサポートしていれば利用可能です。
利用シーン
16/32kbps で短いサウンドをつなげて、
1 requestで利用する。
逆に、128/256kbps で長いサウンドをつなげると、
1 requestが専有されるので注意が必要です。
サウンドファイルサイズと用途で使い分ける
まとめ
Audio
WebAudioが一番汎用的に利用することが出来ます。
Androidは、WebAudioがサポートされていない物が多い
最新の端末であればWebAudio対応も増えてきている
PC : ie,firefox,safari,opera,chro...
https://github.com/CyberAgent/boombox.js
HTMLVideo, HTMLAudio, WebAudioを包括したブラウザ向
けサウンドライブラリ
HTML5 Audio系APIを統一したAPIで提供し、ラジカセ
(boombox)のようなシンプルな操作で利用する事が可能
スマートフォン...
Play
Pause
Stop
Replay
Resume
スマホ専用機能
Volume
ループ再生
機能
複数サウンド再生
CORS
Filterings
audiosprite
生成コマンドサポート
boombox-audiosprite
...
QuickStart
$ npm install boombox.js
$ bower install boombox.js
$ component install CyberAgent/boombox.js
Download
https://...
// boombox running
boombox.setup();
var options = {
src: [
{
media: 'audio/mp4', // *1
path: 'http://example.com/sound.m4a...
便利な機能
1つのサウンドファイルに複数のAudioファイルを定義すること
で自動で利用可能なものをロード
タイムアウト機能
setTimeoutを使ったオリジナルループ再生
WebAudio/HTMLAudio を自動で選択
JSメモリキャッ...
DEMO
HTML5 toolkit
宣伝
https://github.com/CyberAgent/beez
http://www.html5rocks.com/ja/
https://developer.mozilla.org/ja/docs/Web_Audio_API
参考サイト
@fkei
ご静聴ありがとうございました
Frontrend vol.7   html5 audio
Frontrend vol.7   html5 audio
Frontrend vol.7   html5 audio
Frontrend vol.7   html5 audio
Upcoming SlideShare
Loading in …5
×

Frontrend vol.7 html5 audio

3,019 views
2,747 views

Published on

Frontrend vol.7 html5 audio

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

×