CODEWITHSUNDEEP
javascripthtml
colombo2003
colombo2003

Reputation: 111

Infinite loop with random playlist

I have numerous MP3 files in a folder.

When I enter a page, I want a song from that playlist to play. After this song is over, I want a new one to play (not the same one) and so on.

<script type="text/javascript">
var song = ["../audio/1.mp3" , "../audio/2.mp3", "../audio/3.mp3", "../audio/4.mp3", "../audio/5.mp3" ];
var soundFile = song[Math.floor(Math.random()*song.length)];
document.write("<embed id='sound' src='" + soundFile + "' loop='true' type='audio/mpeg' controller='false' height='0' width='0'>");
</script>

What's wrong, because it always plays the same song.

Upvotes: 1

Views: 725

Answers (3)

Linus Oleander
Linus Oleander

Reputation: 18127

Use an already defined embedded element and set the src attribute.

<embed id='sound' loop='true' type='audio/mpeg' controller='false' height='0' width='0'>

<script type="text/javascript">
  var songs = ["../audio/1.mp3" , "../audio/2.mp3", "../audio/3.mp3", "../audio/4.mp3", "../audio/5.mp3" ];
  var remainingSongs = songs;
  var el = document.getElementById("sound");

  var pickSong = function(){
    // No songs left?
    if(!remainingSongs.length) {
      remainingSongs = songs;
    }

    // Pick song
    var index = Math.floor(Math.random() * (remainingSongs.length - 1));

    var soundFile = remainingSongs[index];

    // Remove song from array
    remainingSongs.splice(index, 1);

    el.setAttribute("src", soundFile);
  }

  pickSong();
  el.addEventListener("ended", pickSong, false);
</script>

Upvotes: 3

undefined
undefined

Reputation: 2214

The problem is the loop attribute for the embed element doesn't know about your array of audio sources. It's just going to loop over the same source file.

Luckily, there is a pretty easy solution. The following will create an Audio element, with the Audio constructor, and continue to set a "random" audio source from the song array when the previous is done playing. We can do this by listening for the ended event.

<script type="text/javascript">
  var song = ["../audio/1.mp3" , "../audio/2.mp3", "../audio/3.mp3", "../audio/4.mp3", "../audio/5.mp3" ];
  var audio = new Audio();
  var setSound = function() {
    var soundFile = escape(song[Math.floor(Math.random()*song.length)]);
    audio.setAttribute('src', soundFile);
    audio.play();
  };

  // set initial source
  setSound();
  // set a new source, when current sound is done playing
  audio.addEventListener('ended', setSound, false);
</script>

Upvotes: 0

Ben Aston
Ben Aston

Reputation: 55739

You have an off-by-one error. I think it should be:

var soundFile = song[(Math.floor((Math.random())*(song.length-1)))];

But otherwise this should work. Could be a combination of the erroneous code and weird browser caching?

Also, check the web server you are using to serve the files and clear its cache.

Plus make sure your audio files are actually different.

Also, random chance may be tricking you. Give it a few goes.

This works for me in Chrome Canary on OSX:

<!DOCTYPE html>
<html>
<head>
    <script>
    var song = ['./foo.m4a', 'bar.m4a', 'bam.m4a'];
    var soundFile = song[(Math.floor((Math.random())*(song.length-1)))];
    document.write('<embed id="sound" src="' + soundFile + '" loop="true" type="audio/mpeg" controller="false" height="0" width="0">');
    </script>
</head>
<body></body>
</html>

Upvotes: 1

Related Questions