Playing Audio in HTML

Question

I want to play a mp3 audio file in HTML. I don't want to display the whole player with controls like Volume etc. I just need a play/pause button, Designed by me, not the core design of some player, like yahoo player, or google one.

For example the audio will be autoplay. When a button (probably an image) is clicked it will pause, and when that image is clicked again, the audio will play again.

There are quite few examples here : http://www.w3schools.com/html/html_sounds.asp

Can I control any of them to play/stop from JS code ?

Answer 1

You can use the html5 audio tag. You can specify your own controls for playback.

<audio preload="auto" autobuffer> 
  <source src="elvis.mp3" />
  <source src="elvis.wav" /> <!-- fallback if no mp3 support in browser -->
</audio>

This is a jQuery solution.

http://jsfiddle.net/QPW27/109/

This is what your non-jQuery solution would look like.

var foo = document.getElementById('player');
foo.pause();  //just bind play/pause to some onclick events on your page
foo.play();

Different browsers support different audio formats. You can specify fallback audio versions though. This website has a nice chart of browser support as of July 2011.

Answer 2

Hopefully, in a few years, the HTML5 audio API will be supported accross more browsers, but currently, playing sounds requires either a lot of browser-specific hacks to get things working, or reliance on a browser plugin like flash.

In the meantime, I reccomend using SoundManager2. It's fairly easy to work with and will involve much less headache than doing it yourself.