HTML5 的 Audio 标签

【原文地址：http://www.zhanxin.info/development/2013-05-17-html5-audio.html】

到今天为止，大多数的音频文件播放，是通过 Flash 来实现的。而 HTML5 定义了一个新元素「audio」，在播放音频上为我们提供了很多方便的功能。

在浏览器的支持上，<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，应该是那些广告弹窗页面的专爱吧。

参考文章:

• HTML5 Audio
• AUDIO AND VIDEO
• HTML5 Audio/Video 标签,属性,方法,事件汇总

【原文地址： http://www.zhanxin.info/development/2013-05-17-html5-audio.html 】