Frontrend vol.7 html5 audio

HTML5 Audio Mobile WebAudio / HTMLAudio / HTMLVideo - boombox.js - Kei Funagayama Frontrend Vol.7 powered by CyberAgent, Inc.

自己紹介船ヶ山　慶エンジニア twitter: @fkei

agenda ● サポート状況 ● WebAudio ● HTMLAudio ● HTMLVideo ● Events ● Cache ● User Events ● App Backgroud ● multi sound ● CORS ● Audio Sprite

サポート状況環境別

Mobile

WebAudio

ゲームやサウンドに特化したWeb Application などのサウンド処理を想定した高レベルでパワフルなAPI 概要

従来のHTMLAudioでは出来ない高度なサウンド操作が可能です。 “modular routing”で設計されています。特徴フィルタミキシングエフェクト合成編集 https://developer.mozilla.org/ja/docs/Web_Audio_API

基本フロー mp3 XMLHttpRequest distination AudioBufferSourceNode decodeAudioData(arraybuffer) AudioBuffer << arraybuffer load (arraybuffer) decode set connect (webkit)AudioContext ※ 1 ※ 2 ※ 3 ※ 4 変換

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();

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() { … }); 再利用可能

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);

操作(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) 再生停止

操作(2) AudioBufferSourceNode.loop = true; setTimeout + ended event でも可能 AudioBufferSourceNode.disconnect(); ループ再生切断再生関数の引数(offset, duration)で制御一時停止 / 途中再生

操作(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

HTMLAudio

読み込み <audio src=”xxx.mp3”></audio> var $el = new window.Audio(); JavaScript DOM

操作(1) HTMLAudioElement.play(); HTMLAudioElement.pause(); // 一時停止 HTMLAudioElement.currentTime = 0; // 再生位置再生停止 HTMLAudioElement.loop = true; ループ

操作(2) HTMLAudioElement.volume = 1; // range 0-1 HTMLAudioElement.pause(); // 一時停止 var pauseTime = HTMLAudioElement.currentTime; // 再生位置音量一時停止 HTMLAudioElement.currentTime = pauseTime; // 再生位置 HTMLAudioElement.play(); // 再生途中再生

HTMLVideo

HTMLAudio と基本操作は同じサウンドだけ利用する場合は Elementだけディスプレイ外に飛ばす

Audio Media type

WAV, MP3, AAC, OGG, M4A …... iOS, Android MP3, M4A ブラウザ別に対応状況は異なります。 new Audio().canPlayType(“audio/mp3”); > “maybe” // OK new Audio().canPlayType(“audio/aac”); > “” // NG

HTMLAudio / HTMLVideo Events

ended : 再生終了 loadstart : 読み込み開始 progress : ダウンロード abort : 読み込み中止 error : 読み込み中エラー canplay : 再生開始可能だが、すべてをロードしていない volumechange : 音量変更 suspend : ロード一時停止 loadeddata : 再生可能 stalled : ロードしているが、予期しない理由で止まっている他にもあります

Audio Cache

JSメモリキャッシュブラウザキャッシュ HTMLAudioやAudioBufferなどサウンドファイルデータ

スマートフォン User Events

スマホの場合、サウンド操作は User Events からしか操作出来ません。 document.body.addEventListener(‘touchstart’, function (e) { // sound operation …... }) setTimeoutやブラウザが自動で発火させるイベントは不可

スマートフォン 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音づつ再生しましょう。

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,chrome Mobile: iOS, Android イベントやAPI、サポート状況がかなり違う

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 gzipped 6kb filesize

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

// 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 });

便利な機能１つのサウンドファイルに複数のAudioファイルを定義することで自動で利用可能なものをロードタイムアウト機能 setTimeoutを使ったオリジナルループ再生 WebAudio/HTMLAudio を自動で選択 JSメモリキャッシュ搭載スマホのバッググランドイベントをキャッチ AudioSprite ファイル生成コマンド対応 specフォルダ / jsfiddleに多数のサンプルコードフィルタ機能による端末別の挙動を変更

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

by Kei Funagayama, Software Developer at Company on Apr 19, 2014

Statistics

Views

Actions

1 Embed 0

Accessibility

Upload Details

Usage Rights

Report content

Frontrend vol.7 html5 audio Presentation Transcript