CODEWITHSUNDEEP
javascripthtmljquery
Jituu
Jituu

Reputation: 151

Stop audio on click and play it again

I am using 2 custom buttons and using JavaScript to click the audio play and pause.

I am using the below code for that:

<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;" />

But I want to stop the audio instead of pause so that when I play it again, it'll start from the beginning.

I am using this code for that:

<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;" />

and now the audio stops but can not play again when I click on the first button.

This is the audio code I am using:

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

Can someone please let me know what I am making mistake?

Thank you.

Upvotes: 0

Views: 1363

Answers (1)

zer00ne
zer00ne

Reputation: 44086

Update

Although not part of the question OP asked,

"What is I have multiple audios on a single page?"

Simply place the event handler on an element that contains all of the <button>s. Then get the reference to a specific <audio> by proximity of clicked <button>(event.target):

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

Stay away from using attribute event handlers:

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

Use .addEventListener()

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

or property event handlers:

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

See Event Handlers

Keep your JavaScript separate from HTML or you'll cripple the growth of your code. The example below uses event delegation to determine which button was clicked and what happens according to what was clicked.

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>

Upvotes: 3

Related Questions