How to make a simple HTML playlist using Jquery

Question

I need some help making a very simple Jquery playlist using audio html tag. So far I got his:

<audio id="myAudio" preload="auto">
  Your user agent does not support the HTML5 Audio element.
</audio>

and the jquery part:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>

$(document).ready(function() {
  bgAudio = document.getElementById("myAudio");
  bgAudio.volume = 0.3;

  bgAudio.controls = true;
  bgAudio.loop = true;
  bgAudio.autoplay = true;

  bgAudio.src = "bg1.mp3";
  bgAudio.src = "bg2.mp3";
  bgAudio.play();

});
</script>

How can I make those 2 mp3's play one after another? Thanks for the help.

zer00ne · Accepted Answer · 2017-11-01 12:07:04Z

1

There was no element to use the animate to so I made a div#bg and wrapped it around the audio element. Remember, if you want to make an element fade in with opacity, make sure the element starts off with opacity:0
The expression should be: $('div#bg').animate({opacity: 1}, 1000);
I took a look at your question... it doesn't have that animate() anymore?
The playlist is in an array.
The function player() is called upon document ready (So you don't need autoplay that mobile devices ignore anyways)
The player will play each audio clip in succession and upon completing the playlist it starts over again (loop only works on one file, not on a playlist. So you'd never progress to the next file if loop=true)

Snippet

MNG- https://vocaroo.com/media_command.php?media=s0Ai9tr7779v&command=download_mp3
Righteous- https://vocaroo.com/media_command.php?media=s1dKHkbev0dJ&command=download_mp3

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>35478017</title>
</head>

<body>
  <div id='bg' style="opacity:0">
    <audio id="xAudio" preload="auto"></audio>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script>
    
    // This is a simple array of strings
    var playlist = [
      "https://vocaroo.com/media_command.php?media=s1H9fX5GI9Fa&command=download_mp3",
      "https://vocaroo.com/media_command.php?media=s0Ai9tr7779v&command=download_mp3",
      "https://vocaroo.com/media_command.php?media=s1dKHkbev0dJ&command=download_mp3"
    ];
    
    // Remember that element must start out at opacity:0
    // The duration should be only a number outside of the curly brackets
    $('div#bg').animate({
      opacity: 1
    }, 1000);


    $(document).ready(function() {
      var xA = document.getElementById("xAudio");
      xA.volume = 0.3;
      xA.controls = true;


      function player(x) {
        var i = 0;
        xA.src = playlist[x]; // x is the index number of the playlist array 
        xA.load();            // use the load method when changing src
        xA.play();
        xA.onended = function() { // Once the initial file is played it plays the rest of the files
          /* This would be better as a 'for' loop */
          i++;                   
          if (i > 2) {            //         ... Repeat
            i = 0;                //         ^
          }                       //         ^
          xA.src = playlist[i];   // Rinse,  ^
          xA.load();              // Lather, ^
          xA.play();              // and.....^
        }
      }
      player(0); // Call the player() function at 0 index of playlist array
    });
  </script>
</body>

</html>

edited Nov 1, 2017 at 12:07

answered Feb 18, 2016 at 10:47

zer00ne

45.2k6 gold badges50 silver badges82 bronze badges

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

5 Comments

user1286956 Over a year ago

The animation was for another component, not the player. I removed it when I saw I added it by mistake.

zer00ne Over a year ago

Well it actually adds a nice touch IMO.

user1286956 Over a year ago

Your code works superb man. Thanks a ton! This is the final result: tzr.ro

zer00ne Over a year ago

Great, anytime, sir. :-)

zer00ne Over a year ago

That's very elegant.

OllieH · Accepted Answer · 2016-02-18 10:41:52Z

1

One way would be to use the audio API to bind an onended event on to bgAudio and switch the source there.

JS:

$(document).ready(function() {

  var bgAudio = document.getElementById("myAudio");
  var src1 = "bg1.mp3";
  var src2 = "bg2.mp3";

  bgAudio.volume = 0.3;

  bgAudio.controls = true;
  bgAudio.loop = false;
  bgAudio.autoplay = true;
  bgAudio.src = src1;

  bgAudio.onended = function(){
    bgAudio.stop();
    bgAudio.src = src2;
    bgAudio.play();
  }

  bgAudio.play();

});

Fiddle: https://jsfiddle.net/wpwddq30/

NOTE: This is untested, just to give an idea of the events

edited Feb 18, 2016 at 10:41

answered Feb 18, 2016 at 10:32

OllieH

2621 silver badge4 bronze badges

Comments

user1286956 · Accepted Answer · 2016-02-18 13:54:55Z

I did improve the answer a bit, so the initial song will start random and just be followed chronologically by the rest.

<script>

    var playlist = [
        "music/bg1.mp3",
        "music/bg2.mp3",
        "music/bg3.mp3",
        "music/bg4.mp3"
    ];

    var n = playlist.length-1;
    var r = 1 + Math.floor(Math.random() * n);

    $(document).ready(function() {
        var xA = document.getElementById("myAudio");
        xA.volume = 0.3;
        xA.controls = true;

        function player(x) {
            var i = 0;

            xA.src = playlist[r];
            xA.load();
            xA.play();
            xA.onended = function() {
                i++;
                if (i > n) {
                    i = 0;
                }

                xA.src = playlist[i];
                xA.load();
                xA.play();
            }
        }
        player(0);
    });
    </script>

I was thinking of making all songs repeat in a shuffle way, but I believe I would need to do an array of numbers to count them down or something. Still. it's just optional!

Collectives™ on Stack Overflow

How to make a simple HTML playlist using Jquery

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related