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。

浏览器MP3WavOggInternet Explorer 9+YESNONOChrome 6+YESYESYESFirefox 3.6+NOYESYESSafari 5+YESYESNOOpera 10+NOYESYES

这 3 种音频的 MIME-type 分别是：

音频格式MINE-typeMP3audio/mpegOggaudio/oggWavaudio/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; //返回当前资源的URLMedia.src = value; //返回或设置当前资源的URLMedia.canPlayType(type); //是否能播放某种格式的资源Media.networkState; //0.此元素未初始化  1.正常但没有使用网络  2.正在下载数据  3.没有找到资源Media.load(); //重新加载src指定的资源Media.buffered; //返回已缓冲区域，TimeRangesMedia.preload; //none:不预载 metadata:预载资源信息 auto://准备状态Media.readyState;    //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATAMedia.seeking; //是否正在seeking//回放状态Media.currentTime = value; //当前播放的位置，赋值可改变位置Media.startTime; //一般为0，如果为流媒体或者不从0开始的资源，则不为0Media.duration; //当前资源长度 流返回无限Media.paused; //是否暂停Media.defaultPlaybackRate = value;//默认的回放速度，可以设置Media.playbackRate = value;//当前播放速度，设置后马上改变Media.played; //返回已经播放的区域，TimeRanges，关于此对象见下文Media.seekable; //返回可以seek的区域 TimeRangesMedia.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】