More than 5 years have passed since last update.

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

Last updated at 2017-09-13Posted at 2017-03-15

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に関して表記が正確ではなかったので修正しました（コメント欄参照）
他にもイベントがありますが他のモノに関してはこちらを参考にして下さい。

またイベントの発火順番はブラウザや環境によって大きく異なりますので気をつけてください。
利用する主要な環境で検証して最適なタイミングで噛みあうように調整するようにしてください。

参考ページ

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up