Play multiple tracks <audio>

Question

I'm trying to use the <audio> tag, and I want to have as many tracks playing as I add. But in the end, the very first track plays in a circle. How can this be fixed?

<audio id="audio" preload="" autoplay="" loop="">
  <source type="audio/mp3" src="music/mus1.mp3">
  <source type="audio/mp3" src="music/mus.mp3">
</audio>

<script type="text/javascript">
var audio = document.getElementById("audio");

function pVid() {
    audio.paused ? audio.play() : audio.pause();
}
</script>

Answer 1

I hope adding below sample code will do the work :

function skipAndplayNext() {
            sounds[current].pause();
            document.getElementById(current + '').classList.remove('paused');
            document.getElementById(current + '').classList.remove('playing');
            current++;
            if (current > (sounds.length - 1)) {
                current = 0
            }
            sounds[current].play();
            document.getElementById(current + '').classList.add('playing');
        }

Answer 2

Try this: (jQuery)

function skipAndplayNext() {
    sounds[currentAudio].pause();
    $("#currentAudio").classList.remove('paused');
    $("#currentAudio").classList.remove('playing');
    currentAudio++;
    if (currentAudio > (sounds.length - 1)) {
      currentAudio = 0
    }
    sounds[currentAudio].play();
    $("#currentAudio").classList.add('playing');
}