HTML5のAudioタグをJavascriptから扱う

audioタグについての説明は省略。
今までの感覚だと、Javascriptで何かしらの動作をさせるには、基本的にはhtml要素がある必要があったけど、どうやらaudioタグについては無くても良いっぽい。
というのは、DOMツリーに

<audio src="audiofile.mp3"></audio>

とかが無くても良いって意味。
じゃあどうやって操作するのか

var obj = new Audio('audiofile.mp3');

obj.addEventListener("canplay", function(){
  obj.play();
});

で、再生可能になった段階で自動的に再生される。htmlにaudioタグを追加してCSSでdisplay: noneとかしなくても良い。
objをconsole.logすると、中身はaudioタグそのもの。だけどDOMツリーには追加して無い。
ただ、videoタグでは表示部分がvideoタグそのものだからか、動かないっぽい。
上のコードの続きで、再生終了したら違うファイルを再生とかなら

obj.addEventListener("ended", function(){
  obj.src = "nextfile.mp3";
});

コメントを残す