Play mp3 file with javascript onClick

Question

I am playing mp3 file just javascript onClick.

Bellow is my code:

//Music File 1
<audio id="id1" src="01.mp3"></audio>
<button onClick="document.getElementById("id1").play()">Play</button>
<button onClick="document.getElementById("id1").pause()">Stop</button>

//Music File 2
<audio id="id2" src="02.mp3"></audio>
<button onClick="document.getElementById("id2").play()">Play</button>
<button onClick="document.getElementById("id2").pause()">Stop</button>

My question is, I am playing music 01.mp3 and I want it stop play if I press play button at music 02.mp3.

Can any one give me a better solution than this? Totally, I want to way to play music like www.mp3skull.com, other stop play if pressed other file to play.

Regards, Virak

Answer 1

Aside from the tag errors (presuming it's just a typo in this writeup), if you want a nicer Javascript audio player, check out http://jplayer.org/ - it's an open source, free player API.

One of the methods available for the player, .pauseOthers() halts all players on the page other than the one you ran the method on - useful in your situation.

Answer 2

You've got html/javascript syntax errors:

<button onClick="document.getElementById("id2").play()">Play</button>
                ^                        ^   ^        ^
                1                        2   3        4

quote #2 closes quote #1, so your id2 is OUTSIDE of the onclick, and is part of the button tag. Ditto for 3 & 4. Change the inner quotes to 'id2' instead.