将OnClick Stop添加到音频

Question

我制作了这个图像，所以当你点击它时，音频就会开始播放。但是，因为我使用的是一首完整的歌曲，而不仅仅是一个小声音，我也需要能够阻止它。

我如何才能打开和关闭声音？

<audio id="1st_sound">
    <source src="http://k007.kiwi6.com/hotlink/nbgq3cyywi/Damn_Good_Wife.mp3"     type="audio/mpeg" />
</audio>

<img src="http://static.tumblr.com/6s0fefr/t3wne2irz/damngoodwifeplaybutton.jpg"     onClick="document.getElementById('1st_sound').play(); return false;" />

Answer 1

您可以使用此功能检查音频是否正在播放：

function isPlaying(playerId) {
    var player = document.getElementById(playerId);
    return !player.paused && !player.ended && 0 < player.currentTime;
}

你可以在if语句中使用它。

if (isPlaying(...)) {..Pause..} else {..Play..}

为了静音，你可以使用这个：使用自定义按钮静音HTML5音频元素

if(document.getElementById('background_audio').muted) {
    document.getElementById('background_audio').muted = true;
} else {
    document.getElementById('background_audio').muted = false;
}