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を継承しただけのものなので、具体的な中身(メソッドやプロパティ)についてはそちらを参照します。

• 4.8.10 Media elements — HTML5 W3C CR

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

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

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

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

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