Search code examples
javascripthtmlhtml5-audio

Playlist with <audio> JavaScript


I'm creating a personal small website and I want to play some songs on it. What I've tried to do is the following:

<script type="text/javascript">

var i=1;
var nextSong= "";
var audioPlayer = document.getElementById('audio');
audioPlayer.onended = function(){
    i++
    nextSong = "Music/"+i+".mp3";
    audioPlayer.src = nextSong;
    audioPLayer.load();
    audioPlayer.play();
    if(i == 37) // this is the end of the songs.
    {
        i = 1;
    }
    
}
</script>
<audio id="audio"  src="Music/1.mp3"controls="controls" autoplay="autoplay"   align=""> </audio>

However, I can't get this to work. It just plays the first song and doesn't execute the JS. I've tried alerting the state of i for example but it doesn't do anything.


Solution

  • Try this:

    <script type="text/javascript">
    
    var i=1;
    var nextSong= "";
    function setup() {
        document.getElementById('audio').addEventListener('ended', function(){
            i++;
            nextSong = "Music/"+i+".mp3";
            audioPlayer = document.getElementById('audio');
            audioPlayer.src = nextSong;
            audioPLayer.load();
            audioPlayer.play();
            if(i == 37) // this is the end of the songs.
            {
                i = 1;
            }
            }, false);
    }
    </script>
    <body onLoad="setup();">
    <audio id="audio"  src="Music/1.mp3"controls="controls" autoplay="autoplay"   align=""> </audio>
    </body>