46

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)

1

8 Answers 8

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

MDN

5
  • 7
    Full documentation: developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement Commented Jan 14, 2016 at 1:39
  • 1
    Worked as Charm... without any complexity
    – Avinash
    Commented Mar 24, 2019 at 12:21
  • What if I want to play several songs? Won't issuing a new Audio for each one cause a memory leak?
    – Rodrigo
    Commented Apr 24, 2019 at 15:34
  • @Rodrigo probably, but it's another question. The <audio> tag works (in this case) the same as an <img> tag; you can update the src property to change the file for the element.
    – Ties
    Commented Apr 29, 2019 at 7:48
  • In one of my applications I use only 3 different sounds. So at the page load I declare a disctionary of three "new Audio" and run each of them based on specific cases. Commented Aug 18, 2022 at 23:15
30

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
4
  • is it possible to know when a music ends?
    – aF.
    Commented Jul 4, 2012 at 16:09
  • 2
    Do you have the length of the music? Commented Jul 4, 2012 at 18:35
  • browsers support for simple audio: caniuse.com/#search=audio Commented Jan 30, 2016 at 11:02
  • 1
    Does it need a specific audio format? Doesn't work with MP3s here.. Commented Oct 5, 2018 at 19:01
10

You will probably want to use the new HTML5 audio element to create an Audio object, load the mp3, and play it.

Due to browser inconsistencies, this sample code is a bit lengthly, but it should suit your needs with a bit of tweaking.

//Create the audio tag
var soundFile = document.createElement("audio");
soundFile.preload = "auto";

//Load the sound file (using a source element for expandability)
var src = document.createElement("source");
src.src = fileName + ".mp3";
soundFile.appendChild(src);

//Load the audio tag
//It auto plays as a fallback
soundFile.load();
soundFile.volume = 0.000000;
soundFile.play();

//Plays the sound
function play() {
   //Set the current time for the audio file to the beginning
   soundFile.currentTime = 0.01;
   soundFile.volume = volume;

   //Due to a bug in Firefox, the audio needs to be played after a delay
   setTimeout(function(){soundFile.play();},1);
}

Edit:

To add Flash support, you would append an object element inside the audio tag.

1
  • 1
    I know this answer is 4 years old. But of the list of them here, this is the best one. I tweaked it a bit to serve my purposes. But it works on everything. Even IE. And that's really saying something.
    – durbnpoisn
    Commented Dec 6, 2016 at 18:17
2

You can use <audio> HTML5 tag to play audio using JavaScript.

But this is not cross-browser solution. It supported only in modern browsers. For cross-browser compatibility you probably need to use Flash for that (for example jPlayer).

Browsers compatibility table is provided at link I mentioned above.

2
  • Can you provide a flash example?
    – aF.
    Commented Jul 4, 2012 at 14:28
  • @aF. you can see a lot of demos here: jplayer.org/latest/demos . jPlayer is opensource and released under GPL and MIT licenses.
    – antyrat
    Commented Jul 4, 2012 at 14:29
1

You could try SoundManager 2: it will transparently handle the <audio> tag wherever it's supported, and use Flash wherever it isn't.

0

Assuming that the browser supports MP3 playback and is fairly new to support newer JavaScript features, I would suggest taking a look at jPlayer. You can see a short demo tutorial on how to implement it.

0

Jquery plugin for audio mp3 player http://www.jplayer.org/0.2.1/demos/

-1

Enjoy it ;)

<html>
<head>
    <title>Play my music....</title>
</head>
<body>
    <ul>
        <li>
        <a id="PlayLink" href="http://www.moderntalking.ru/real/music/Modern_Talking-You_Can_Win(DEMO).mp3" onclick="pplayMusic(this, 'music_select');">U Can Win</a>
        </li>
        <li>
        <a id="A1" href="http://www.moderntalking.ru/real/music/Modern_Talking-Brother_Louie(DEMO).mp3" onclick="pplayMusic(this, 'music_select');">Brother Louie</a>
        </li>
    </ul>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
</body>
</html>

Not the answer you're looking for? Browse other questions tagged or ask your own question.