HTML5
audio

HTML5のAudio要素簡易利用ガイド

More than 1 year has passed since last update.

WebAudio全盛のこの時代に役に立つかはわかりませんが

素直に実装すると結構ハマるポイントが多いので

メモがてら残しておきます。


概要

Audio要素とはHTML5から追加された要素で

この要素を使うことで音の再生や一時停止などをハンドリングできるので

音楽再生プレイヤーのような機能をJSだけで実現することができる。


主に持っている機能


  • 再生/一時停止

  • 再生位置変更(シーク)

  • 音量変更


特徴


良い部分


  • HTML5の初期段階からあり
    スマホでは古い端末(iOS5、Android2.3以上ぐらい)でも再生することができる
    ※利用できるブラウザの範囲は狭いが後発のWeb Audioのほうができることは多い

  • ストリーミングサーバーを設けず
    Rangeリクエストで擬似的にストリーミングを実現させることができる


悪い部分



  • autoplay という属性があり
    これをtrueにするとユーザーのアクションを待たずに再生できるのだが
    こちらはスマホでは無効化される
    (自動再生開始によるユーザーの意図しないトラフィック発生を防ぐためらしい)

  • スマホではユーザーアクションを伴わないと
    読み込みや再生動作を開始できない場合が多いので、その想定で作ると良い

  • ブラウザによって挙動や各種イベントの発生のタイミングが異なる。


  • controlers と指定するとブラウザ側で再生や停止のコントロールUIを出してくれるが
    ブラウザによって表示やサイズの統一感がない。

  • 音量調整の属性があるが、すべてのOSで使えるわけではなく、iOSでは非対応。


Audioタグの再生フロー例

コードをベースに再生の一例を記載します。

// オブジェクトを生成します

var url = "http://example.com/hogehoge.mp3";
var audio = new Audio(url);

// 実体ファイルをロードします。
audio.load();

// readyStateからロード状態を判断します。
if (audio.readyState === 4) {
audio.play();
} else {
// 再生可能状態でなければ再生可能状態になった時のイベント通知をセットします
audio.addEventListener('canplaythrough', function (e) {
audio.removeEventListener('canplaythrough', arguments.callee);
audio.play();
});
}


1.オブジェクトの生成

再生ファイルを生成します。情報取得元のソースは生成時でなくてもセットすることが出来ます。


2.実体ファイルをロード

実体ファイルをロードします。

ただし、スマートフォンの場合は play() までロードしない端末もあり

確実にここで始まるというわけではないので気をつけてください。


3.readyStateからロード状態を判断

audioタグはreadyStateで再生可能な状態かを判断できます。

readyStateの値
状態名
説明

0
HAVE_NOTHING
ダウンロードしていない

1
HAVE_METADATA
メディアメタデータのダウンロード済み

2
HAVE_CURRENT_DATA
現在再生位置の直近までのデータダウンロード済み

3
HAVE_FUTURE_DATA
再生位置に加え次フレームデータまでをダウンロード済み

4
HAVE_ENOUGH_DATA
再生位置に加え次フレームデータまでをダウンロード済みであり、且つダウンロード速度から計算し、最後まで再生できるだけのデータをダウンロード済である状態

だいたいは 4 でなければ再生出来ないことが多いので

4であるかしかチェックしないことが多いです。


4.再生可能状態でなければ再生可能状態になった時のイベント通知をセット

上記のロード状況において再生出来ない場合は

まだダウンロードが十分に終わっていない可能性があるので

addEventListener イベントをセットしてロード状況を確認します。

この場合は canplaythrough のイベントを見ます。なお、主なイベントの名称と内容に関しては以下のとおりです。

イベント名称
説明

canplaythrough
バッファリングのために止まること無く再生できる時に発火します。

canplay
再生可能なところまでデータをDLして再生可能になった時に発火します。

timeupdate
秒数が変化している際に、変わる度に発火されます。発火したタイミングで currenttime を取得すると現在の再生秒数が取れますが、これを利用してでUIを変更するのはオススメしません。

ended
再生が最後まで完了した時に発火します。

error
何かエラーが起きた時に発火します。ただし発火タイミングはブラウザによって様々なので一律同じところでエラーが呼ばれるとは限りません。

play
再生が開始するタイミングで発火します。一時停止からの復帰でも発火します。

※canplaythroughに関して表記が正確ではなかったので修正しました(コメント欄参照)

他にもイベントがありますが他のモノに関してはこちらを参考にして下さい。

またイベントの発火順番はブラウザや環境によって大きく異なりますので気をつけてください。

利用する主要な環境で検証して最適なタイミングで噛みあうように調整するようにしてください。


参考ページ