在浏览器的支持上，<audio> 标签目前只支持 Internet Explorer 9+, Firefox, Opera, Chrome 和 Safari。也就是说，IE 9 以下是不支持的。
标签属性
src: 要播放的音频的 URL。preload: 是否预加载，如果使用 "autoplay"，则忽略该属性。autoplay: 是否自动播放。loop: 是否循环播放。controls: 是否显示浏览器自带的控制条，例如播放按钮。
HTML 写法
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
音频格式的浏览器支持
目前为止，有 3 个音频格式是audio元素支持的，分别是：MP3、Wav 和 Ogg。
| 浏览器 | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer 9+ | YES | NO | NO |
| Chrome 6+ | YES | YES | YES |
| Firefox 3.6+ | NO | YES | YES |
| Safari 5+ | YES | YES | NO |
| Opera 10+ | NO | YES | YES |
这 3 种音频的 MIME-type 分别是：
| 音频格式 | MINE-type |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
audio对象的方法和属性
我们可以动态把一个audio元素插入到页面中，从而通过 JS 来获取这个对象，简单的方法如下：
//audio可以直接通过new创建对象
var Media = new Audio("horse.mp3");
//audio和video都可以也可以通过标签获取对象
var Media = document.getElementById("media");
假如我们在页面上通过console.log(Media)打印出来，那么可以看到该对象:
//错误状态 Media.error; //null:正常 Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效 //网络状态 Media.currentSrc; //返回当前资源的URL Media.src = value; //返回或设置当前资源的URL Media.canPlayType(type); //是否能播放某种格式的资源 Media.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源 Media.load(); //重新加载src指定的资源 Media.buffered; //返回已缓冲区域，TimeRanges Media.preload; //none:不预载 metadata:预载资源信息 auto: //准备状态 Media.readyState; //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA Media.seeking; //是否正在seeking //回放状态 Media.currentTime = value; //当前播放的位置，赋值可改变位置 Media.startTime; //一般为0，如果为流媒体或者不从0开始的资源，则不为0 Media.duration; //当前资源长度 流返回无限 Media.paused; //是否暂停 Media.defaultPlaybackRate = value;//默认的回放速度，可以设置 Media.playbackRate = value;//当前播放速度，设置后马上改变 Media.played; //返回已经播放的区域，TimeRanges，关于此对象见下文 Media.seekable; //返回可以seek的区域 TimeRanges Media.ended; //是否结束 Media.autoPlay; //是否自动播放 Media.loop; //是否循环播放 Media.play(); //播放 Media.pause(); //暂停 //控制 Media.controls;//是否有默认控制条 Media.volume = value; //音量 Media.muted = value; //静音
事件：
//类似 a 标签的 click、hover事件一样，audio 元素也有属于它的属性
//定义一个事件测试函数，将打印出内容
var eventTester = function(e){
Media.addEventListener(e,function(){
console.log((new Date()).getTime(),e);
});
}
//下面列觉这些属性的含义
eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载（不是因为错误引起），
eventTester("error"); //请求数据时遇到错误
eventTester("stalled"); //网速失速
eventTester("play"); //play()和autoplay开始播放时触发
eventTester("pause"); //pause()触发
eventTester("loadedmetadata"); //成功获取资源长度
eventTester("loadeddata"); //
eventTester("waiting"); //等待数据，并非错误
eventTester("playing"); //开始回放
eventTester("canplay"); //可以播放，但中途可能因为加载而暂停
eventTester("canplaythrough"); //可以播放，歌曲全部加载完毕
eventTester("seeking"); //寻找中
eventTester("seeked"); //寻找完毕
eventTester("timeupdate"); //播放时间改变
eventTester("ended"); //播放结束
eventTester("ratechange"); //播放速率改变
eventTester("durationchange"); //资源长度改变
eventTester("volumechange"); //音量改变
后话
HTML5 的 audio 标签给了我们很多方便的功能，然而像 IE8 这样的浏览器还在，我们不得不做兼容性支持。像embed标签，并没有提供这么多的属性和事件。而 IE 专属的bgsound，应该是那些广告弹窗页面的专爱吧。
参考文章:
