Home/ Questions/Q 9062293
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T15:42:03+00:00

I have found a nice tutorial on how to build a playlist using HTML5

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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