如何在不重叠的情况下停止并播放HTML5中的多种声音？

Question

I'm using javascript Audio class to play different audio files in background in an HTML5 application.
Every audio file is bound to the click event of a button.

Now what I want to achieve is that when a button is clicked, the current audio in progress should stop immediately and the one bound to that specific button should start.

I've tried to use pause() and mute() methods but in both cases the audios overlap for a very small instance of time (<=1 second).

Is there any solution for this problem? Below is the code I'm using currently:

  if (sound === null) { sound = new Audio("sounds/" + audioId + ".mp3"); sound.play(); } else { sound.pause(); sound.src = "sounds/" + audioId + ".mp3"; sound.play(); } 

Answer 1

You may use played() this function Sets or returns if the audio/video is paused or not.

Firstly , you pause the audio and then check if audio is paused or not using paused() after that play sound,instead of play audio just after pause.