How play group of audio files in HTML and JavaScript?

Question

<html>
<body>
<audio autoplay id ="audio_1" src = "./Dusty.wav"></audio>
<audio loop id = "audio_2" src = "./Dusty3.wav"></audio>
<audio loop id = "audio_3" src = "./Dusty2.wav"></audio>
<!-- <input type = "button" value = "play" onClick="audiofun();" -->
</body>
<script>
// audiofun()
// {
    var audio = document.getElementById("audio_1");
    var audio2 = document.getElementById("audio_2");
    var audio3 = document.getElementById("audio_3");
    // audio2.pause();
    // audio3.pause();
    audio.addEventListener("ended", function () {audio2.play();})
    audio2.addEventListener("ended", function () {audio3.play();})


// }    
</script>
</html>

When I run this code audio2.play() is continuously playing and audio3.play is not at all playing. can anyone put light on my error... thanks in advance

score 0 · Answer 1 · answered Jun 15 '17 at 19:10

i feel like your problem comes from the property "loop" in your audio tag. Maybe you should try:

<audio id = "audio_2" src = "./Dusty3.wav"></audio>
<audio id = "audio_3" src = "./Dusty2.wav"></audio>

And add a event listener on your first, then second audio.

var audio = document.getElementById("audio_1");
var audio2 = document.getElementById("audio_2");
var audio3 = document.getElementById("audio_3");  
document.getElementById('audio_1').addEventListener('ended',audio_1Handler,false);
function audio_1Handler(e) {
    audio2.play();

}
document.getElementById('audio_2').addEventListener('ended',audio_2Handler,false);
function audio_2Handler(e) {
    audio3.play();

}

the snippet above is highly inspired of : this post

Hopefully this helps you. Feel free to ask any further questions !

How play group of audio files in HTML and JavaScript?

1 Answers1