1

I'm working on a very simple audio playlist that automatically plays each song after the previous one has finished. I am using pure javascript and the html5 audio tag. How can I fix this code up so it works properly?

var i = ['first.mp3', 'second.mp3', 'third.mp3'];
function playlist() {
   for (var i=0; i<2; i++)
}
<audio controls="controls" preload="none" onended="playlist()">
<source src="first.mp3" type="audio/mp3">
</audio>
<audio controls="controls" preload="none" onended="playlist()">
<source src="second.mp3" type="audio/mp3">
</audio>
<audio controls="controls" preload="none" onended="playlist()">
<source src="third.mp3" type="audio/mp3">
</audio>
LightHouse
  • 73
  • 6
  • What you writing inside for loop? I guess it should be `for(var i=0; i<3; i++)` firstly. – void Feb 15 '15 at 07:44
  • If `i<2` then play next audio – LightHouse Feb 15 '15 at 07:48
  • it does not make any sense. Can you please elaborate what you have done to achieve what you need? – void Feb 15 '15 at 07:49
  • If you want to go for a playlist..why not to use a single audio tag..and set `src` to another once a mp3 finishes/ends. – Rakesh_Kumar Feb 15 '15 at 07:51
  • I have say 10 mp3s I want to make a playlist out of. I included `onended="playlist()"` event handler to fire off my function that has the argument `for` which is suppose to increment the array of mp3s by one song after the next. – LightHouse Feb 15 '15 at 07:53

1 Answers1

0

Better way to loop

HTML

<audio id="audio" controls preload>
    <source src="/files/5913/7240/6617/html5-audio-loop.ogg">
    <source src="/files/5513/7240/6617/html5-audio-loop.wav">
    <source src="/files/8013/7240/6617/html5-audio-loop.mp3">
</audio>

JavaScript

document.getElementById('audio').addEventListener('ended', function(){
this.currentTime = 0;
this.play();
}, false);
void
  • 33,471
  • 8
  • 45
  • 91