Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,294 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 ご静聴ありがとうございました

×