How to play a mp3 using Javascript?

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)

In modern browsers, you could use [HTML5's ` – millimoose Jul 04 '12 at 14:25 — millimoose, Jul 04 '12 at 14:25

score 128 · Answer 1 · answered Jul 04 '12 at 14:37

128

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

answered Jul 04 '12 at 14:37

Ties

5,726
3
28
37

7

Full documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement – aymericbeaumet Jan 14 '16 at 01:39
1

Worked as Charm... without any complexity – Avinash Mar 24 '19 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 Apr 24 '19 at 15:34
@Rodrigo probably, but it's another question. The ` – Ties Apr 29 '19 at 07: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. – Roman Voronov Aug 18 '22 at 23:15

score 30 · Accepted Answer · edited Dec 14 '19 at 08:27

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

browsers support for simple audio: http://caniuse.com/#search=audio — Lukas Liesis, Jan 30 '16 at 11:02
Does it need a specific audio format? Doesn't work with MP3s here.. — David Lopez, Oct 05 '18 at 19:01

score 10 · Answer 3 · answered Jul 04 '12 at 14:28

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.

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, Dec 06 '16 at 18:17

antyrat · Answer 4 · 2012-07-04T14:31:33.380

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.

edited Jul 04 '12 at 14:31

answered Jul 04 '12 at 14:23

antyrat

27,479
9
75
76

Can you provide a flash example? – aF. Jul 04 '12 at 14:28
@aF. you can see a lot of demos here: http://jplayer.org/latest/demos/ . jPlayer is opensource and released under GPL and MIT licenses. – antyrat Jul 04 '12 at 14:29

score 1 · Answer 5 · answered Jul 04 '12 at 14:28

1

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

answered Jul 04 '12 at 14:28

Haroldo_OK

6,612
3
43
80

score 0 · Answer 6 · answered Jul 04 '12 at 14:28

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.

answered Jul 04 '12 at 14:28

paulius_l

4,983
8
36
42

score 0 · Answer 7 · answered Jul 05 '12 at 10:59

0

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

answered Jul 05 '12 at 10:59

Parag

4,754
9
33
50

score -1 · Answer 8 · answered Jul 04 '12 at 15:50

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>

How to play a mp3 using Javascript?

8 Answers8

Linked