1、首先我们先来看一下音频元素最基本的应用以及样式，如下图所示，运用audio元素即可,controls是用来控制是否显示控制条。
2、另外音频文件的格式也可以多样，如下图所示，也可以是ogg文件。
3、接下来我们来看一下音频元素的属性，上面创建的音频元素你发现它需要手动点击才能播放。如果你加了autoplay就会自动播放，如下图所示。
4、还有一个loop属性，是用来控制音频文件是否循环播放的，如下图所示。
5、接下来，preload属性是用来告诉音频文件是否预加载的，加上这个属性后。
6、最后要提醒的是src里面不仅可以写本地的文件，也可以写远程的文件地址，如下图所示。
1、JS播放音乐需要区分浏览器，来使用不用的对象来播放音乐
2、在播放控制上要有【播放】和【停止】来控制音乐的播放
基于以上思路，代码如下：
<SCRIPT type="text/javascript">if(-1 != navigator.userAgent.indexOf("MSIE"))
{
//不是微软IE浏览器，则调用Flash来播放音乐
document.write(' <OBJECT id="Player"')
document.write(' classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6"')
document.write(' width=0 height=0 > <param name="URL" value="a.mp3" /> <param name="AutoStart" value="false" /> </OBJECT>')
}
else
{
//是微软IE浏览器，则调用微软的Player对象来直接播放音乐
document.write(' <OBJECT id="Player"')
document.write(' type="application/x-ms-wmp"')
document.write(' autostart="false" src= "a.mp3" width=0 height=0> </OBJECT>')
}
</SCRIPT>
<input type=button value="播放" onclick="Player.controls.play()" />
<input type=button value="停止" onclick="Player.controls.stop()" />
function canPlayAudioMP3(callback){try {
var audio = new Audio()
//Shortcut which doesn't work in Chrome (always returns "") pass through
// if "maybe" to do asynchronous check by loading MP3 data: URI
if(audio.canPlayType('audio/mpeg') == "probably")
callback(true)
//If this event fires, then MP3s can be played
audio.addEventListener('canplaythrough', function(e){
callback(true)
}, false)
//If this is fired, then client can't play MP3s
audio.addEventListener('error', function(e){
callback(false, this.error)
}, false)
//Smallest base64-encoded MP3 I could come up with (<0.000001 seconds long)
audio.src = "data:audio/mpegbase64,/+MYxAAAAANIAAAAAExBTUUzLjk4LjIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"
audio.load()
}
catch(e){
callback(false, e)
}
}
