犬ターネット

audio タグを使っていろいろしたかったので、少し調査した。使ったブラウザは Firefox, Safari, Chrome, Opera の安定してるやつ。

audioタグに割り当てられてる属性云々

src

再生する音源ソースURL

controls

オーディオインターフェースを表示するかどうか
true : する
false : しない

autoplay

自動再生するかどうか(iPhone Safari だと有効にならないっぽい)
true : する
false : しない

volume

再生ボリューム
0～1 (ディフォルト:1)

muted

ミュートされてるか
true : されてる
false : されてない

paused

ポーズしてるか
true : してる
false : してない

preload (Safari, Chrome)

音源を先読みするか
auto : 自動読み込み (ディフォルト)
metadata : ヘッダ情報のみ読み込み
none : 読みこまない

autobuffler (Firefox, Opera)

音源を先読みするか
true : する (Firefoxディフォルト)
false : しない (Operaディフォルト)

ended

曲再生終わったか
true : 終わった
false : まだ

seeking

再生箇所をシーク中か
true : 中
false : 中じゃない

currentTime

現在の再生秒数

使えるメソッド

load() : 音源読み込む
play() : 再生する
pause() : とめる
canPlayType(mime) : 再生できるmimeタイプを調べる。再生できそうな場合は "maybe" 文字列が返ってくる

読み込めるファイルタイプ

audio.canPlayType(mime) 使ってしらべた。mime は apache についてる mime.types の audio/* (+ogg) を利用した。

Firefox

audio/ogg
audio/x-wav

Opera

audio/ogg
audio/x-wav

Chrome

audio/ogg
audio/mpeg
audio/x-wav

Safari

audio/basic
audio/midi
audio/mpeg
audio/x-aiff
audio/x-mpegurl
audio/x-wav

Safari(iPhone)

audio/amr
audio/basic
audio/mpeg
audio/x-aiff
audio/x-mpegurl
audio/x-wav

共通で使えるのは wav だけ。mp3やm4aが再生できるのは Safari と Chrome のみ。

audioタグの書き方

以下みたいにかく。preload と autobuffler の両方を書いてるのは、クロスブラウザ対応のため。

<audio src="url" controls preload="auto" autobuffler autolpay></audio>

jsで生成するなら以下みたいにかく。

var audio = new Audio("url");
audio.controls = true;
audio.autoplay = true;
audio.preload = "auto";
audio.autobuffler = true;

var audio = document.createElement('audio');
audio.src = "url";
audio.controls = true;
audio.autoplay = true;
audio.preload = "auto";
audio.autobuffler = true;

js経由で再生するとき

上記のaudioオブジェクトに対して、再生するときは

audio.load();
audio.play();

とめるときは

audio.pause();

すればOK。

ただし、Chromeの場合、load() 実行するとまた最初から再生されちゃうので、以下のように currentTime が 0 の場合だけ load() 実行するようにすれば大丈夫っぽい。

if (audio.currentTime == 0) { audio.load(); }
audio.play();

サンプル

※ SafariとChromeだけ。
※ play を押すと再生、pause を押すととまる。