CODEWITHSUNDEEP
htmlaudioplayback
Sohail
Sohail

Reputation: 2332

Playing Audio in HTML

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 ?

Upvotes: 14

Views: 38332

Answers (4)

mrtsherman
mrtsherman

Reputation: 39872

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.

Upvotes: 15

chandru
chandru

Reputation: 169

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>

Upvotes: 0

Aaron
Aaron

Reputation: 5227

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.

Upvotes: 1

Peter Olson
Peter Olson

Reputation: 142911

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.

Upvotes: 2

Related Questions