mp3 や wav などのサウンドファイルを再生する方法の忘備録。
sound フォルダに applause.mp3 や chime.wav などのサウンドファイルを収納しておく。 JAVASCRIPT（playsounds.js） // list of sound files var fileList=[ {name:'Applause', url:'sounds/applause'}, {name:'Are you sure', url:'sounds/areyousure'}, {name:'Chime', url:'sounds/chime'}, {name:'Cicada', url:'sounds/cicada'}, {name:'Cuckoo', url:'sounds/cuckoo'}, ]; // define audio object var audioObj=new Audio(); // display playlist var playList='<table><tr>'; for(var i=0; i<fileList.length; i++){ if(audioObj.canPlayType('audio/mp3')=='maybe'){var ext='.mp3';} if(audioObj.canPlayType('audio/wav')=='maybe'){var ext='.wav';} playList+='<th onclick=start_sound("'+fileList[i].url+ext+'")>'; playList+=fileList[i].name+'</th><td><a href="'+fileList[i].url+ext+'">∨</a></td></tr>'; } playList+='</table>'; document.getElementById("playListArea").innerHTML=playList; // start playing and display time function start_sound(url){ audioObj.pause(); // stop previous sound audioObj=new Audio(url); audioObj.play(); audioObj.addEventListener('timeupdate', function(){ var sec=Math.floor(audioObj.currentTime*1000); var totalSec=Math.floor(audioObj.duration*1000); var fileName=url.substr(7); crtTime.innerHTML=fileName+' : '+sec+' / ' +totalSec+' ms'; }, true); } var crtTime=document.getElementById('ctime'); // pause function pause_sound(){ audioObj.pause(); } サウンド名やボタンの配置は table タグを使用して定義している。16, 17行目で ' と" を使い分けること。17行目の v はファイルのダウンロード用ボタンのマーク。経過時間／再生時間の表示は下から８行目。 HTML <script type="text/javascript" src="js/playsounds.js"></script> <div id="btn-pause" onclick="pause_sound(); ">II</div> ２行目の II は停止ボタンのマーク。