单击停止音频并再次播放

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

远离使用属性事件处理程序：

<!-- 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 ctl = document.querySelector('fieldset'); const audioControl = event => { const mp3 = document.querySelector('audio'); const clicked = event.target; 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. } }; ctl.onclick = audioControl;

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

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