CODEWITHSUNDEEP
javascripthtmlaudioplaylist
codenamejupiterx
codenamejupiterx

Reputation: 1619

HTML5/JavaScript audio playlist

I have found a nice tutorial on how to build a playlist using HTML5 and JavaScript in blog post HTML5 Audio and Video and how to make a playlist. I followed the instructions, but I did not get the correct outcome.

This code SHOULD play all three audio files in order and stop when the last song has ended, but it what it actually does is autoplay the first file then stops when the first file is completed. What did I do wrong?

<html>
    <body>
        <ul id="playlist">
            <li class="active">
                <a href="http://www.codenamejupiterx.com/song/soundtest.mp3">
                   soundtest
                </a>
            </li>
            <li>
                <a href="http://www.codenamejupiterx.com/song/soundtest2.mp3">
                    soundtest2
                </a>
            </li>
            <li>
                <a href="http://www.codenamejupiterx.com/song/soundtest3.mp3">
                    soundtest3
                </a>
            </li>
        </ul>

        <script>
            var audio;
            var playlist;
            var tracks;
            var current;

            init();
            function init(){
                current = 0;
                audio = $('#audio');
                playlist = $('#playlist');
                tracks = playlist.find('li a');
                len = tracks.length - 1;
                audio[0].volume = .10;
                audio[0].play();
                playlist.find('a').click(function(e){
                    e.preventDefault();
                    link = $(this);
                    current = link.parent().index();
                    run(link, audio[0]);
                });
                audio[0].addEventListener('ended',function(e){
                    current++;
                    if(current == len){
                        current = 0;
                        link = playlist.find('a')[0];
                    }
                    else{
                        link = playlist.find('a')[current];
                    }
                    run($(link),audio[0]);
                });
            }

            function run(link, player){
                player.src = link.attr('href');
                par = link.parent();
                par.addClass('active').siblings().removeClass('active');
                audio[0].load();
                audio[0].play();
            }
        </script>
    </body>
</html>

Upvotes: 0

Views: 21917

Answers (2)

Preejith augustine
Preejith augustine

Reputation: 65

Using jQuery I do have achieved this by using the following control.

Add the audio Control tag with following parameters:

<audio id="audio1" controls="controls" autoplay="autoplay">    </audio>

And in JavaScript:

jQuery(function($) {
    var supportsAudio = !!document.createElement('audio').canPlayType;
    if (supportsAudio) {

        url = URL.baseUrl + Books + authors + "/" + subject + "/data.json";
        $.getJSON(url, function(data){
            console.log("ddd"+JSON.stringify(data));

            var index = 0,
            trackCount = data.URL.length,
                npAction = $('#npAction'),
                npTitle = $('#npTitle'),
                audioid = $('#audio1').bind('play', function() {
                }).bind('ended', function() {

                if((index + 1) < trackCount) {
                    index++;
                    loadTrack(index);
                    audioid.play();
                }
                else {
                    audioid.pause();
                    index = 0;
                    loadTrack(index);
                }
            }).get(0),
                loadTrack = function(id) {
                    index = id;
                    audioid.src = data.URL[index].ayah;
                };
            loadTrack(index);
        });
    }
});

Upvotes: -3

Juan Mellado
Juan Mellado

Reputation: 15113

1) JavaScript code is using jQuery (those $(...) statements), so it must be imported:

<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  </head>
<body>
...

2) The audio HTML element (the real "player") is missed:

<body>
  <audio id="audio" preload="auto" tabindex="0" controls="" >
    <source src="http://www.codenamejupiterx.com/song/soundtest.mp3">
  </audio>
...

3) The code play only TWO songs. To play THREE:

...
len = tracks.length; //"-1" removed
...

4) The code play again and again the three songs. To stop it:

audio[0].addEventListener('ended',function(e){
    current++;
    if(current < len){
      link = playlist.find('a')[current];   
      run($(link),audio[0]);
    }
});

Upvotes: 4

Related Questions