单击时停止音频，然后重新播放

Question

我使用2个自定义按钮，并使用JavaScript单击音频播放和暂停。

我使用以下代码：

<img class="head-iconn" src="img/audio.png" onClick="document.getElementById('audio1_play32').play(); return false;" />
<img class="head-icon2" src="img/audio2.png" onClick="document.getElementById('audio1_play32').pause(); return false;" />

但我想停止音频，而不是暂停，这样当我再次播放时，它就会从头开始。

我使用这个代码：

<img class="head-iconn" src="img/audio.png" onClick="document.getElementById('audio1_play32').play(); return false;" />
<img class="head-icon2" src="img/audio2.png" onClick="document.getElementById('audio1_play32').pause(); document.getElementById('audio1_play32').currentTime = 0;return false;" />

现在，当我点击第一个按钮时，音频停止，但无法再次播放。

这是我正在使用的音频代码：

<audio id="audio1_play32" controls>
<source src="voice/vo1.mp3" type="audio/mp3"/>
</audio>

有人能告诉我我犯了什么错误吗？

谢谢。

Answer 1

更新

虽然不是OP提出的问题的一部分，

"什么是我在一个页面上有多个音频">

只需将事件处理程序放置在包含所有<button>s的元素上。然后通过接近clicked<button>(event.target(来获得对特定<audio>的引用：

<audio><!--mp3 = btnGroup.previousElementSibling--></audio>
<fieldset>
<!--btnGroup = clicked.parentElement-->
<button><!--clicked = event.target--></button>
</fieldset>

---

避免使用属性事件处理程序：

<!-- This is bad -->
<button class='play' onclick='playAudio()'>PLAY</button>

使用.addEventListener()

<button class='play'>PLAY</button>
<script>
const play = document.querySelector('.play');
play.addEventListener('click', playAudio);
</script>

或属性事件处理程序：

<button class='play'>PLAY</button>
<script>
const play = document.querySelector('.play');
play.onclick = playAudio;
</script>

请参阅事件处理程序

将JavaScript与HTML分开，否则会阻碍代码的增长。下面的示例使用事件委派来确定单击了哪个按钮，以及根据单击的内容会发生什么。

const main = document.querySelector('main');
const audioControl = event => {
const clicked = event.target;
const btnGroup = clicked.parentElement;
const mp3 = btnGroup.previousElementSibling;
if (clicked.matches('.play') && !mp3.paused) {
mp3.pause();
} else if (clicked.matches('.play') && !mp3.playing) {
mp3.play();
} else if (clicked.matches('.stop')) {
mp3.pause();
mp3.currentTime = 0;
} else {
return false;
}
};
main.onclick = audioControl;

button {
border: 0;
cursor: pointer;
font-size: 4ch
}
fieldset {
display: inline-block;
}

<main>
<audio src='https://soundbible.com/mp3/thunder_strike_1-Mike_Koenig-739781745.mp3'></audio>
<fieldset>
<button class='play'>⏯️</button>
<button class='stop'>⏹️</button>
</fieldset>
<audio src='https://soundbible.com/mp3/airplane-landing_daniel_simion.mp3'></audio>
<fieldset>
<button class='play'>⏯️</button>
<button class='stop'>⏹️</button>
</fieldset>
<audio src='https://soundbible.com/mp3/old-car-engine_daniel_simion.mp3'></audio>
<fieldset>
<button class='play'>⏯️</button>
<button class='stop'>⏹️</button>
</fieldset>
</main>