单击停止音频并再次播放

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>

见Event Handlers

将您的 JavaScript 与 HTML 分开，否则您将削弱代码的增长。下面的示例使用event delegation 来确定单击了哪个按钮以及根据单击的内容会发生什么。

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>