In a project I'm working on, I have a JS file that should play a piece of music, and when that piece is done playing, the next one takes its place.
var soundtrack = {
0: new Audio("./music/piece1.ogg"),
2: new Audio("./music/piece2.ogg"),
1: new Audio("./music/piece3.ogg"),
3: new Audio("./music/piece4.ogg")
}
var currentTrack = 0;
function startMusic(){
soundtrack[currentTrack].play();
soundtrack[currentTrack].addEventListener("ended", function(){ nextSong()});
}
function nextSong(){
currentTrack += 1;
if(currentTrack == 4){
currentTrack = 0;
}
soundtrack[currentTrack].play();
}
$( document ).ready(function() {
setTimeout(function() { startMusic(); }, 15500);
});
Note: My use of the object "soundtrack" may be unconventional, but there was a bug using an array so I tried this and it worked.
The first piece plays through fine, and the next one starts up fine. About maybe 10 seconds in, the playing just stops.
Any help to solve this issue would be greatly appreciated, thanks!
Note: I am aware not all pieces will play after one other, I'm waiting until this issue is fixed before continuing.
What I have tried:
Reordering the pieces
Google
stackoverflow
Removing the event listener as someone suggested it may be the problem