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 に書いてあります。
仕様書を読んでみるともっと詳しく面白いこと書いてあります。