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 を押すととまる。