How to play a mp3 using Javascript? [duplicate]

Question

I have a directory on my website with several mp3's. I dynamically create a list of them in the website using php.

I also have a drag and drop function associated to them and I can select a list of those mp3 to play.

Now, giving that list, how can I click on a button (Play) and make the website play the first mp3 of the list? (I also know where the music is on the website)

Answer 1

new Audio('<url>').play()

Answer 2

If you want a version that works for old browsers, I have made this library:

// source: https://stackoverflow.com/a/11331200/4298200 function Sound(source, volume, loop) {     this.source = source;     this.volume = volume;     this.loop = loop;     var son;     this.son = son;     this.finish = false;     this.stop = function()     {         document.body.removeChild(this.son);     }     this.start = function()     {         if (this.finish) return false;         this.son = document.createElement("embed");         this.son.setAttribute("src", this.source);         this.son.setAttribute("hidden", "true");         this.son.setAttribute("volume", this.volume);         this.son.setAttribute("autostart", "true");         this.son.setAttribute("loop", this.loop);         document.body.appendChild(this.son);     }     this.remove = function()     {         document.body.removeChild(this.son);         this.finish = true;     }     this.init = function(volume, loop)     {         this.finish = false;         this.volume = volume;         this.loop = loop;     } } 

Documentation:

Sound takes three arguments. The source url of the sound, the volume (from 0 to 100), and the loop (true to loop, false not to loop).
stop allow to start after (contrary to remove).
init re-set the argument volume and loop.

Example:

var foo = new Sound("url", 100, true); foo.start(); foo.stop(); foo.start(); foo.init(100, false); foo.remove(); //Here you you cannot start foo any more