HTML5 オーディオ タグを使用していない特定の理由はありますか? コントロールを表示しないように設定し、JavaScript を使用して再生/停止に同じものを使用し、必要に応じて画像を再生から停止に切り替えることができるためです。jQuery を使用:
あなたはこの画像を持っています:
<a href="#" id="audioPlayStop" title="stop">
<img src="images/stop.png" />
</a>
そして、この目に見えないオーディオ タグ:
<audio id="audio">
<source src="somethingtoplay.mp3" type="audio/mpeg" />
</audio>
var audio = document.getElementById('audio'); // $('#audio') won't work for audio API!
$('#audioPlayStop').toggle(
function () {
$(this).attr('title', 'play');
$(this).add('img').attr('src', 'images/play.png');
audio.pause();
console.log('Paused');
},
function () {
$(this).attr('title', 'stop');
$(this).add('img').attr('src', 'images/stop.png');
audio.play();
console.log('Play started');
} //function
);
このスクリプトは、停止するのではなく、実際に一時停止します。しかし、audio.src = ''; で停止できることを知っていれば、停止する方法を理解できます。audio.load(); // 何もロードしないので停止します (オーディオ API には stop() はありません)