Firefox3.5のaudioタグの使い方


注意点

まだFirefox側で未実装な機能がいくつかあるようなので、HTML5の勧告だけ信じるとハマります。
詳しくは下記URLあたりを参照。
https://developer.mozilla.org/en/nsIDOMHTMLMediaElement
https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox

対応形式

2009/07/03現在、oggとwavのみ対応している模様。
MP3は権利やら何やらが面倒なので、後回しになるのではないかと。ogg便利(権利的に)。

audioタグの例



<audio src="sound/p004.ogg" id="audio_id" controls>Firefox3.5でご覧ください</audio>

指定できる代表的な属性

control
上に出てるような操作用コントロールを表示する。

autoplay
ロード後に自動実行する。

autobuffer
ロード後に自動でバッファリングする。
autobufferしない場合は、再生後に音楽ファイルを読みに行くことになる。

volume
音楽のボリューム。
「volume=0.5」のように、0.0~1.0の間で指定する。

loop
ループする設定。
まだ未実装のようで、我が家の環境では動作しなかった。

JavaScriptで操作してみる

play : 再生開始
document.getElementById('audio_id').play();


pause : 停止
document.getElementById('audio_id').pause();


load : 読み込み開始
document.getElementById('audio_id').load();

ユーザのアクションに応じて、必要な音声ファイルを先読みさせたい時などに使用。

volume : ボリューム設定
document.getElementById('audio_id').volume(0.0);

ボリュームを0.1ずつ足し、1.0を超えたら0.0にしています。 丸めずに浮動小数足してるんで、若干変な数値になってますが気にしないでください。

src : 音楽ファイル変更
srcを入換え、loadすることでロードする音声ファイルを変更できる。
var audio = document.getElementById('audio_id');
audio.src='sound/p008.ogg';
audio.load();
audio.autoplay = true;


muted : ミュート
document.getElementById('audio_id').muted = true;


ended : 終了してればtrue
alert( document.getElementById('audio_id').ended );

音楽が終了してればtrue、それ以外はfalseがAlertで表示されます。
readonlyです。

currentTime : 現在演奏している秒
alert( document.getElementById('audio_id').currentTime );
document.getElementById('audio_id').currentTime = 10;

「disp currentTime」は現在実行中の秒を表示し、「set currentTime 10」は再生時を10秒に設定する。

duration : 再生時間
alert( document.getElementById('audio_id').duration );

現在ロードされている音楽の再生時間を取得します。

networkState : ネットワーク状態
alert( document.getElementById('audio_id').networkState );

ダウンロード状態に応じて下記のステータスが返ってきます。
EMPTY0まだ何もロードしてない
LOADING1ロードの開始はした
LOADED_METADATA2METAデータを読み込んだ
LOADED_FIRST_FRAME3最初のフレームは落とした
LOADED3全部落とした
押してみると、最後まで演奏した後も「3 = LOADED_FIRST_FRAME」が返って来る。なぜだろう?

readyState : ステータス
alert( document.getElementById('audio_id').readyState );

メディアファイルの読込み状態と「current playback position」(再生ポジション)に応じて、0~5の数字が返って来ます。
このページを読み込んだ直後であれば、「HAVE_CURRENT_DATA = 3」が返って来ると思います。
詳細はここに詳しく載ってるようです。
https://developer.mozilla.org/en/nsIDOMHTMLMediaElement#Attributes


音源はこちらからお借りました

http://nochiko.websozai.jp/