Frontrend vol.7 html5 audio

HTML5 Audio

MobileWebAudio / 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

PC

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

setconnect

(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.7connect

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音づつ再生しましょう。

CORS

DOMElement準拠です。


crossorigin属性anonymous use-credentials

WebAudioXHR 準拠です。

サウンド配信サーバでHeaderを設定する必要があります。

HTTP Response header Access-Control-Allow-Origin : “http://example.com”

Android 2.3

XHR / GET は利用できません。

WebAudioをサポートしていないため考えない。

Audio SpriteAudio

概要

CSS Sprite と考え方は同じで、複数のサウンドをつなげて一つのAudio ファイルにします。

メリット

CSS Sprite と同じです。

1 requestで複数のサウンドを取得することが出来ます。

同一音源を使用した複数同時再生は出来ません。

一部 Android 2.3 で動作しません。


WebAudio同一音源を使用した複数再生が可能です。

WebAudioをサポートしていれば利用可能です。

利用シーン

16/32kbps で短いサウンドをつなげて、

1 requestで利用する。

逆に、128/256kbps で長いサウンドをつなげると、

1 requestが専有されるので注意が必要です。

サウンドファイルサイズと用途で使い分ける

まとめ

Audio

WebAudioが一番汎用的に利用することが出来ます。

Androidは、WebAudioがサポートされていない物が多い

最新の端末であればWebAudio対応も増えてきている

PC : ie,firefox,safari,opera,chromeMobile: iOS, Android

イベントやAPI、サポート状況がかなり違う

https://github.com/CyberAgent/boombox.js

HTMLVideo, HTMLAudio, WebAudioを包括したブラウザ向

けサウンドライブラリ

HTML5 Audio系APIを統一したAPIで提供し、ラジカセ

(boombox)のようなシンプルな操作で利用する事が可能

スマートフォン向け必須機能を標準搭載

コンセプト

PlayPauseStopReplayResumeスマホ専用機能

Volumeループ再生

機能

複数サウンド再生

CORSFilteringsaudiosprite

生成コマンドサポート

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 runningboombox.setup();

var options = {src: [

{media: 'audio/mp4', // *1path: 'http://example.com/sound.m4a' // *2

}]

};

boombox.load('single', options, function (err, htmlaudio) { // *3$(‘body’).append(htmlaudio.$el); // *4

boombox.get(‘single’).play(); // *5});

http://example.com/sound.m4a

便利な機能１つのサウンドファイルに複数のAudioファイルを定義すること

で自動で利用可能なものをロード

タイムアウト機能

setTimeoutを使ったオリジナルループ再生

WebAudio/HTMLAudio を自動で選択

JSメモリキャッシュ搭載

スマホのバッググランドイベントをキャッチ

AudioSprite ファイル生成コマンド対応

specフォルダ / jsfiddleに多数のサンプルコード

フィルタ機能による端末別の挙動を変更

DEMO

HTML5 toolkit宣伝

https://github.com/CyberAgent/beez

http://www.html5rocks.com/ja/https://developer.mozilla.org/ja/docs/Web_Audio_API

参考サイト

http://www.html5rocks.com/ja/




@fkei

ご静聴ありがとうございました

Technology

Frontrend vol.7 html5 audio