Audio要素の仕様には22個のイベントがありますが、ブラウザによってイベントの起こるタイミングや発生するイベントのタイプがバラバラです。
iPhoneのSafariで発生してもAndroidのブラウザでは全く発生しないイベントもあります。
ライブラリを使用しないでオーディオのイベントコントロールをする場合注意が必要です。
以下のコードはロード開始から何ms後にどのイベントが発生したかを出力します。
<!DOCTYPE html>
<html>
<head>
<title>Audio/Video Event Checker</title>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,maximum-scale=1"/>
<style>
body{
background:black;
color:lime;
line-height:1.5;
width:320px;
box-sizing:border-box;
-webkit-box-sizing:border-box;
font-size: 13px;
margin:0;
padding:0;
padding-left:5px;
}
</style>
</head>
<body>
<button id="load">play</button><button id="clear">clear log</button>
<section id="log"></section>
<script>
document.addEventListener('DOMContentLoaded',function(){
// 起こりうる22のイベント
var event_list = [
"abort","canplay","canplaythrough","durationchange","emptied",
"ended","error","loadeddata","loadedmetadata","loadstart",
"pause","play","playing","progress","ratechange","seeking",
"seeked","stalled","suspend","timeupdate","volumechange","waiting"
];
// イベント全部にリスナーを登録
function addEvents(etarget){
var _leng = event_list.length;
for(var _i = 0; _i < _leng; _i++){
etarget.addEventListener(event_list[_i],function(event){
log(event.type+"\t:\t",Date.now() - window.start_time + "ms");
});
}
}
var lasttype = "";
// ログの出力
function log(type,time){
var pnode = document.getElementById('log');
var fchild = pnode.firstChild;
time ? time : time = "";
// 同じイベントが連続する場合つなげて表示
if(type===lasttype){
var _elem = document.createElement('span');
_elem.innerText = ", "+time;
fchild.appendChild(_elem);
}else{
lasttype = type;
var _elem = document.createElement('div');
_elem.innerText = type + time;
pnode.insertBefore(_elem,fchild);
}
}
var audio = new Audio();
addEvents(audio);
document.getElementById('load').addEventListener('click',function(){
log("-------------------------------------");
window.start_time = Date.now();
audio.src = "audio.mp3";
audio.play();
});
document.getElementById('clear').addEventListener('click',function(){
document.getElementById('log').innerHTML = "";
});
});
</script>
</body>
</html>
コードをhtmlファイルにコピペしてaudio.mp3を用意してスマートフォンでアクセスするとイベントの発生状況が調べられます。
※ mp3が再生できない端末の場合、再生できるメディアを指定してください
動作画面
ブラウザによって挙動が相当ちがうので見てるとへーってなります('∀`)
参考URL