HTML5/JavaScript audio playlist

Question

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>

Juan Mellado · Accepted Answer · 2013-01-01 15:16:01Z

4

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]);
    }
});

answered Jan 1, 2013 at 15:16

Juan Mellado

15.2k5 gold badges50 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

codenamejupiterx Over a year ago

Thanks Juan!!!! But one thing I removed the -1 from the len=track.length line but it still only plays two tracks....any sugesgtions?

codenamejupiterx Over a year ago

it was my browser safari 5 when i upgraded to safari 6 it worked like a charm. Thanks Juan!!!!

Peter Mortensen · Accepted Answer · 2016-07-20 16:04:32Z

-3

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);
        });
    }
});

edited Jul 20, 2016 at 16:04

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Oct 23, 2013 at 9:02

Preejith augustine

654 bronze badges

2 Comments

nanofarad Over a year ago

This is an exact duplicate of this other answer of yours.

Michael Martin-Smucker Over a year ago

Your script is full of references to variables that aren't defined in this scope (Books, authors, subject) as well as assumptions about the DOM (#npAction, #npTitle). This needs a lot more explanation if it's going to be helpful to others.

Collectives™ on Stack Overflow

HTML5/JavaScript audio playlist

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related