HTML5 : Set multiple audio/video files dynamically and run one by one

One of my blog Reader was working on HTML5 audio controls. He asked me a question How can he play multiple audio files one by one. And his requirement was to set the audio files dynamically. So I thought of sharing the solution here. You can customize based on your requirement.

So what I have done. I created an audio control as

 <audio id="ctrlaudio" controls="controls" runat="server">
                Your browser does not support the audio tag.
 </audio>

As you can see an Audio control and made it as runat server, So that I can set some values from code behind. I have also created a hidden variable to set the comma separated name of songs that I want to run one by one. In my code behind I am setting a source for this audio control. My code behind as

string innerHTML =
            "<source src='song1.mp3'></source>";
        ctrlaudio.InnerHtml = innerHTML;
        hdnSongNames.Value = "song1.mp3" + "," + "song2.mp3";

So the whole logic is written in JavaScript and I have used jQuery as well. The logic is something like, First get the list of song names using hidden variable that I require to run one by one . Then I attached an event ended to the audio control. This event is fired when the current playing song is ended. And when one song ended and other next song starts playing. Let’s see the code

 $(function () {
            //Find the audio control on the page
            var audio = document.getElementById('ctrlaudio');
            //songNames holds the comma separated name of songs
            var songNames = document.getElementById('hdnSongNames').value;
            var lstsongNames = songNames.split(',');
            var curPlaying = 0;
            // Attaches an event ended and it gets fired when current playing song get ended
            audio.addEventListener('ended', function() {
                var urls = audio.getElementsByTagName('source');
                // Checks whether last song is already run
                if (urls[0].src.indexOf(lstsongNames[lstsongNames.length - 1]) == -1) {
                    //replaces the src of audio song to the next song from the list
                    urls[0].src = urls[0].src.replace(lstsongNames[curPlaying], lstsongNames[++curPlaying]);
                    //Loads the audio song
                    audio.load();
                    //Plays the audio song
                    audio.play();
                    }
            });
        });

As I have made a comment on most lines of the code, I don’t need to explain it again here. One point, I want to make it here that I have done some coding at Code behind you can totally do at Client side only. If you need any details from server, can initiate a Ajax call get the details (here list of songs) .

Also, the video tag also works similar to audio tag. So you can work similarly with video tag also.

So you can use your business logic.

Hope you all have enjoyed this.

Cheers,
Brij