Search code examples
javascripthtmlmp3

How to play a mp3 using Javascript?


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)


Solution

  • 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