Misohena Blog

JavaScriptでHTML5のAudio要素を使う方法について、軽くおさらいします。

仕様書:

WHATWGの最新: 4.7.6 The audio element — WHATWG HTML Living Standard — Last Updated 9 June 2014
W3Cの最新: 4.7.7 The audio element — HTML 5.1 Nightly A vocabulary and associated APIs for HTML and XHTML Editor's Draft 10 June 2014
W3CのCR: 4.8.7 The audio element — HTML5 A vocabulary and associated APIs for HTML and XHTML W3C Candidate Recommendation 17 December 2012

WHATWGとW3Cの関係とかバージョン違いとかありますが、リンク先が変わってしまうと嫌なので以下ではW3CのCRへリンクします。

[NamedConstructor=Audio(),
 NamedConstructor=Audio(DOMString src)]
interface HTMLAudioElement : HTMLMediaElement {};

DOM的には new Audio(url) (urlは省略可能)という形で HTMLAudioElement というインタフェースを持つオブジェクトを生成できます(他にもdocument.createElement("audio")という形で生成できたりもします)。

HTMLAudioElementインタフェースはHTMLMediaElementを継承しただけのものなので、具体的な中身(メソッドやプロパティ)についてはそちらを参照します。

Audioの場合、基本的な使い方は次のようになるでしょうか。

audio = new Audio() または new Audio(url) または document.createElement("audio")
audio.preload = "none" または "metadata" または "auto" (デフォルトはauto) 4.8.10.5 Loading the media resource
audio.src = url または source1 = document.createElement("source"); source1.src = url; source1.type = 'audio/ogg; codecs="vorbis"'; audio.appendChild(source1) (どのリソースが使われるかはresource selection algorithmを参照)
audio.load() //ロード(不要なことも多い) (media element load algorithm)
audio.addEventListener("loadedmetadata", function(e){ alert("長さは" + audio.duration + "秒です。");}, false); 4.8.10.6 Offsets into the media resource
audio.play(); //currentTimeの位置から再生(audio.autoplay次第では不要)(audio.endedのときだけは最初から再生になるので注意)
audio.pause(); //currentTimeの位置で停止
audio.currentTime = audio.duration / 2; //半分の所へシーク
audio.volume = 0.5; //音量
audio.playbackRate = 2.0; //倍速再生
audio.loop = true; //ループ再生(終端に到達したら最初から)
audio.muted = true; //ミュート
alert(audio.paused ? "停止中" : "再生中");
if(audio.error != null){alert("エラーコード:" + audio.error.code);} 4.8.10.1 Error codes
audio.src = "";

部分的なループは難しそうです。厳密でなくても良いのならtimeupdateイベントを使ってできると思います。

イベントの一覧については 4.8.10.16 Event summary に書いてあります。

仕様書を読んでみるともっと詳しく面白いこと書いてあります。

Recent Posts