Playing Audio in HTML

14
votes

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 ?

4
htmlaudioplayback
Unfortunately, implementing this yourself is a bit of a nightmare. I recommend using a plug-in for this--there simply is no official Javascript API for audio. – Peter Olson
flash would be the only alternative for this – Joseph

4 Answers

15
votes

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.

2
votes

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.

1
votes

Audio.js looks like it has the player styling features you're looking for, with a graceful degradation to Flash if the browser doesn't support the new audio API.

0
votes

You can play audio by using embed tag

<!DOCTYPE html>
<html>
<body>

<p><a href="horse.mp3">Play mp3</a></p>
<p><a href="liar.wav">Play wav</a></p>

<script src="http://mediaplayer.yahoo.com/js"></script>

</body>
</html>