單擊停止音頻並再次播放

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>