Need someone to help me understand, why index 2 of the playlist array that is passed to the audio element is skipped – no matter what. This is the console output:

0: /track01.mp3
1: /track02.mp3
2: /track03.mp3 // -> is logged but not played
3: /track01.mp3
4: undefined

(Note: It happens with whatever file is on index 2, so if I change the sequence of the files in the playlist array, still index 2 will be skipped.)

This is the code:

    let playlist = ["track01.mp3", "track02.mp3", "track03.mp3", "track01.mp3"]
    let song_index = 0
    playSong(playlist)
    
    console.log(playlist) // contains 4 files

    function playSong(playlist){
    console.log(`${song_index}: ${playlist[song_index]}`)
 
    audio_source.src = playlist[song_index]
    audio_source.load()
    audio_source.addEventListener("canplay", () => {
        audio_source.play()        
    })
    
    audio_source.addEventListener("ended", () => {
        if ((song_index) < playlist.length) {
            song_index++
            playSong(playlist)
        } else {
            song_index = 0
            playSong(playlist)
        }
    })
}

So whatever audio file is on index 2 of the array – it will not be played. The console.log logs index 2, but the audio player skips to index 3, without having played index 2.