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 ?
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.
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.
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.
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>
来源：https://stackoverflow.com/questions/8641355/playing-audio-in-html