学习笔记：html5 Audio对象API今天在做一个简单的音乐播放器的时候，找一个全面的API就花费了我不少时间：MD

前言

今天在做一个简单的音乐播放器的时候，找一个全面的API就花费了我不少时间：MDN有全面的API但是公司网路打不开，所以在这里记录下，方便下次使用。

属性

属性	描述
audioTracks	返回表示可用音频轨道的 AudioTrackList 对象。
autoplay	设置或返回是否在就绪（加载完成）后随即播放音频。
buffered	返回表示音频已缓冲部分的 TimeRanges 对象。
controller	返回表示音频当前媒体控制器的 MediaController 对象。
controls	设置或返回音频是否应该显示控件（比如播放/暂停等）。
crossOrigin	设置或返回音频的 CORS 设置。
currentSrc	返回当前音频的 URL。
currentTime	设置或返回音频中的当前播放位置（以秒计）。
defaultMuted	设置或返回音频默认是否静音。
defaultPlaybackRate	设置或返回音频的默认播放速度。
duration	返回音频的长度（以秒计）。
ended	返回音频的播放是否已结束。
error	返回表示音频错误状态的 MediaError 对象。
loop	设置或返回音频是否应在结束时再次播放。
mediaGroup	设置或返回音频所属媒介组合的名称。
muted	设置或返回是否关闭声音。
networkState	返回音频的当前网络状态。
paused	设置或返回音频是否暂停。
playbackRate	设置或返回音频播放的速度。
played	返回表示音频已播放部分的 TimeRanges 对象。
preload	设置或返回音频的 preload 属性的值。
readyState	返回音频当前的就绪状态。
seekable	返回表示音频可寻址部分的 TimeRanges 对象。
seeking	返回用户当前是否正在音频中进行查找。
src	设置或返回音频的 src 属性的值。
textTracks	返回表示可用文本轨道的 TextTrackList 对象。
volume	设置或返回音频的音量。

方法

方法	描述
addTextTrack()	向音频添加新的文本轨道。
canPlayType()	检查浏览器是否能够播放指定的音频类型。
fastSeek()	在音频播放器中指定播放时间。
getStartDate()	返回新的 Date 对象，表示当前时间线偏移量。
load()	重新加载音频元素。
play()	开始播放音频。
pause()	暂停当前播放的音频。

事件

事件	描述
onabort	在退出时运行的脚本。
oncanplay	当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）。
oncanplaythrough	当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本。
ondurationchange	当媒介长度改变时运行的脚本。
onemptied	当发生故障并且文件突然不可用时运行的脚本（比如连接意外断开时）。
onended	当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。
onerror	当在文件加载期间发生错误时运行的脚本。
onloadeddata	当媒介数据已加载时运行的脚本。
onloadedmetadata	当元数据（比如分辨率和时长）被加载时运行的脚本。
onloadstart	在文件开始加载且未实际加载任何数据前运行的脚本。
onpause	当媒介被用户或程序暂停时运行的脚本。
onplay	当媒介已就绪可以开始播放时运行的脚本。
onplaying	当媒介已开始播放时运行的脚本。
onprogress	当浏览器正在获取媒介数据时运行的脚本。
onratechange	每当回放速率改变时运行的脚本（比如当用户切换到慢动作或快进模式）。
onreadystatechange	每当就绪状态改变时运行的脚本（就绪状态监测媒介数据的状态）。
onseeked	当 seeking 属性设置为 false（指示定位已结束）时运行的脚本。
onseeking	当 seeking 属性设置为 true（指示定位是活动的）时运行的脚本。
onstalled	在浏览器不论何种原因未能取回媒介数据时运行的脚本。
onsuspend	在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本。
ontimeupdate	当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。
onvolumechange	每当音量改变时（包括将音量设置为静音）时运行的脚本。
onwaiting	当媒介已停止播放但打算继续播放时（比如当媒介暂停已缓冲更多数据）运行脚本。

标签属性：

src：音乐的URL
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条

Html代码

<audio id=”media” src=”http://www.abc.com/test.mp3″ controls></audio>

标签属性：

src：视频的URL
poster：视频封面，没有播放时显示的图片
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条
width：视频宽度
height：视频高度

Html代码

<video id=”media” src=”http://www.abc.com/test.mp4″ controls width=”400px” heigt=”400px”></video>

获取HTMLVideoElement和HTMLAudioElement对象

Js代码

//audio可以直接通过new创建对象
Media = new Audio(“http://www.abc.com/test.mp3″);
//audio和video都可以通过标签获取对象
Media = document.getElementByIdx_x(“media”);

Media方法和属性：

HTMLVideoElement 和 HTMLAudioElement 均继承自 HTMLMediaElement

Js代码

//错误状态
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; //静音
//TimeRanges(区域)对象
TimeRanges.length; //区域段数
TimeRanges.start(index) //第index段区域的开始位置
TimeRanges.end(index) //第index段区域的结束位置

事件：

Js代码

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 video标签的出现改变了这一局面，可以让用户在不用安装任何插件的情况下轻松的观看视频。

　　vedio和audio的使用技巧基本相同，本文仅以vedio作示例。先引用一段别人介绍的vedio标签

　　大多数用户已经安装了Flash插件（事实上，大概95%的上网用户都装有Flash的某个版本），但HTML 5的支持者正在推动一个开放的，不需要任何插件的视频标准。这就是HTML 5的新标签<video>带来的构想，他提供了一个嵌入视频（以及与其交互）而不需要类似Flash的私有插件的方法。
　　不幸的是，视频并非那么简单。不仅仅是浏览器需要理解<video>标签，而且需要一个必要的编码译码器来播放视频。明显的解决方法只能是HTML 5规范的缔造者们选择一个视频编码译码器，并且让每一个浏览器制造商执行。
　　总之，这就是所推荐的打算。同时，这也是引起混乱的导火索。对于各种各样编码译码器的争论就已经很烦杂了，但更悲剧的事情是，浏览器制造商们还不能就此达成统一。苹果不愿意使用提议的Ogg Theora编码译码器，但Opera和Mozilla也不愿意支付由于他们的浏览器装载H.264编码译码器而造成的许可费用。Google同时支持两者，微软面对争论，远远的置身事外，因为他现在根本没有计划去支持HTML 5的视频元素。面对浏览器制造商的僵持局面，HTML 5善意的独裁者Ian Hickson甩了甩他的手并说到去他妈的。所以HTML
5规范中没有特别指名或规定的视频编码解码器。”好吧，引用到这儿。如今的情况是，微软终于陷进去了，但很悲剧的是，在IE 9中只支持H.264。同时，Googe终于在I/O大会上发布了开源的视频封装格式webM和视频编码格式VP8。Opera、Mozilla、Chrome宣布将完全支持VP8，IE宣布部分支持（需要装一个插件，但如果我没记错的话，HTML 5的一个愿景就是脱离浏览器插件，微软真是让人觉得悲剧）。苹果决定不支持VP8，乔布斯认为VP8在质量或效率方面不如H.264，不能满足其产品的要求。另外最新消息表明VP8还有可能牵扯到专利的问题（如果真的侵犯专利的话，Opera和Firefox估计马上会无视VP8的）。说了这么多，其实说到底就是，现在如果要在页面中使用video标签，需要考虑三种情况，支持Ogg
Theora或者VP8（如果这玩意儿没出事的话）的（Opera、Mozilla、Chrome），支持H.264的（Safari、IE 9、Chrome），都不支持的（IE6、7、8）。好吧，现在让我们从技术层面来认识HTML 5的视频，包括video标签的使用，视频对象可以用到的媒介属性和方法，以及媒介事件。

我们来看看video标签具体是怎么使用的以及它有哪些属性和方法。

使用方法：

 <video width="320" height="240" controls="controls">

　　<source src="movie.ogg" type="video/ogg">

　　<source src="movie.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>

各浏览器目前对html5视频格式的支持：

浏览器 \| 影音格式	Ogg Theora	MP4(H.264)	WebM
Microsoft Internet Explorer9	×	√	×
Mozilla Firefox5+	√	×	√
Google Chrome13+	√	√	√
Apple Safari5+	×	√	×
Opera11+	√	×	√

属性列表：

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。默认为false
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。这些控件是由浏览器来提供的，样式也可能因为不同浏览器而不一样
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	none、metadata、auto	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。 auto - 当页面加载后载入整个视频 meta - 部分预加载。使用此属性值，代表页面制作者认为用户不期望此视频，但为用户提供一些元数据（包括尺寸，第一帧，曲目列表，持续时间等等） none - 不进行预加载。使用此属性值，可能是页面制作者认为用户不期望此视频，或者减少HTTP请求
src	url	要播放的视频的URL。
poster	url	预览图

媒介属性

　　一般用于js操作

属性	可读状态	描述
error	只读	使用media.error返回一个MediaError对象表明当前的错误状态，如果没有出错，返回null，共有4个可能值。 MEDIA_ERR_ABORTED（数字值为1）：媒体资源获取异常； MEDIA_ERR_NETWORK（数字值为2）：网络错误； MEDIA_ERR_DECODE（数字值为3）：媒体解码错误； MEDIA_ERR_SRC_NOT_SUPPORTED（数字值为4）：视频格式被不支持。
currentSrc	只读	返回该媒介标签的src属性值
networkState	只读	返回媒介的网络状态，共有4个可能值。 NETWORK_EMPTY（数字值为0）：尚未初始化； NETWORK_IDLE（数字值为1）：加载完成，网络空闲； NETWORK_LOADING（数字值为2）：视频加载中； NETWORK_NO_SOURCE（数字值为3）：加载失败。
preload	可读写	可获取或改变媒介标签的preload属性值
buffered	只读	返回一个TimeRanges对象，确认浏览器已缓存媒介文件
readyState	只读	返回媒介当前播放位置的就绪状态，共有5个可能值。 HAVE_NOTHING（数字值为0）：当前播放位置无有效媒介资源； HAVE_METADATA（数字值为1）：加载中，媒介资源确认存在，但当前位置没有能够加载到有效媒介数据进行播放； HAVE_CURRENT_DATA（数字值为2）：已获取到当前播放数据，但没有足够的数据进行播放； HAVE_FUTURE_DATA（数字值为3）：已获取到后续播放数据，可以进行播放； HAVE_ENOUGH_DATA（数字值为4）：可以进行播放，且浏览器确认媒体数据以某一种速度进行加载，可以保证有足够的后续数据进行播放，而不会使浏览器的播放进度赶上加载数据的末端。
seeking	只读	返回一个布尔值，表明浏览器是否正在请求数据，ture表示浏览器正在请求数据，false表示浏览器已停止请求。
seekable	只读	发挥一个TimeRanges对象，表明可以对当前媒介资源进行请求。
currentTime	可读写	获取或改变视频的播放位置。单位为秒
startTime	只读	返回媒介文件播放的开始时间，通常为0
duration	只读	返回媒介文件总的播放时长
played	只读	返回一个TimeRanges对象，标明浏览器已播放的媒介资源范围
paused	只读	返回一个布尔值，表明媒介是否暂停播放，ture表示媒介暂停播放，false表示媒介正在播放。
ended	只读	返回一个布尔值，表明媒介是否已结束，ture表示媒介已经播放完毕，false表示还未播放完毕。
defaultPlaybackRate	可读写	返回媒介默认的播放速率，或对其赋值，改变媒介的默认播放速率。
playbackRate	可读写	返回当前的媒介播放速率，或对其赋值，改变当前的媒介播放速率
autoplay	可读写	返回一个布尔值，表明当前媒介是否设置了自动播放，ture表示当前媒介为自动播放，false表示非自动播放，或对其赋值，设置是否自动播放。
loop	可读写	返回一个布尔值，表明当前媒介是否设置了循环播放，ture表示当前媒介设置了循环播放，false表示没有设置循环播放，或对其赋值，设置是否循环播放。
controls	可读写	返回一个布尔值，表明当前媒介是否使用了浏览器默认的播放控制栏，ture表示加载了，false表示没有加载，或对其赋值，设置是否使用浏览器默认的播放控制栏
volume	可读写	返回当前媒介的音量值，或对其赋值，改变媒介的播放音量，范围为0到1，0相当于静音，1为最大音量。
muted	可读写	返回一个布尔值，表明当前媒介播放是否开启静音，ture表示没有开启静音，false表示静音，或对其赋值，设置播放是否静音。

很简单，那我们来做一个demo。(很奇怪，chrome拖动进度条到最后视频有几率就死掉，自动播放到最后没有问题，这是bug？还是我自己的问题？)

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>html5 视频标签学习</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8;">
    </head>
    <body>
        
        <header>
            <h1>自定义视频播放器</h1>
            <div >
                当前播放 ：《<span id="currentMovie">movie1</span>》<br>
                当前播放速度 ： <span id="currentSpeed">1X</span><br>
                当前声音大小为 ：<span id="currentVolume">100</span><br>
            </div>
        </header>
        <section>
        <article>
            <video style="float:left;" id="testVideo" preload="metadata" src="movie.ogg" height="300"  controls>
                你的浏览器不支持html5视频
            </video>
            <div style="float:left;margin-left:10px;">
                <h3>播放列表</h3>
                <ul>
                    <li><a>movie1</a></li>
                    <li><a>movie2</a></li>
                    <li><a>movie3</a></li>
                    <li><a>movie4</a></li>
                </ul>
            </div>
        </article>
        <article style="clear:both;">
            <br/>
            <button id="play">播放</button>
            <button id="pause">暂停</button>
            <button id="stop">停止</button>
            <button id="prev">前一个</button>
            <button id="next">后一个</button>
            <button id="upVolume">音量+</button>
            <button id="downVolume">音量-</button>
            <button id="fastFoward">快进</button>
            <button id="fastBackward">快退</button>
            <br/>
            从<input type="text" id="min" style="width:20px;" value="0"/>分跳转到<input type="text" id="sec"  style="width:20px;" value="0"/>播放 
            <button id="locate">确认</button>
        </article>
        <section>
        <script type="text/javascript">
            var $  = function(id){return document.getElementById(id);};
            var _video = $("testVideo");
            
            //视频列表
　　　　　　　var playList = {
                current : 0,
                list : ["movie.ogg","war3.ogg","movie.ogv","trailer.webm","trailer.ogv"]
            }
            
            var videoUtil = {
                //播放
                play : function(){
                    _video.play();
                },
                //暂停
                pause : function(){
                    _video.pause();
                },
                //停止
                stop : function(){
                    _video.currentTime = 0;
                    _video.pause();
                },
                //下一个视频
                next : function(){
                    if(playList.current == playList.list.length-1){
                        playList.current = 0;
                    }else{
                        playList.current++;
                    }
                    _video.src=playList.list[playList.current];
                    _video.play();
                },
                //前一个视频
                prev : function(){
                    if(playList.current == 0){
                        playList.current = palyList.list.length-1;
                    }else{
                        playList.current--;
                    }
                    _video.src=playList.list[playList.current];
                    _video.play();
                },
                //加大声音,每次加大1/10
                upVolume : function(){
                    _video.volume += 0.1;
                },
                //减小声音，每次减小1/10
                downVolume : function(){
                    _video.volume -= 0.1;
                },
                //翻倍加快播放速度
                fastFoward : function(){
                    //FF不支持playbackRate
　　　　　　　　　　　　if(_video.playbackRate){
                        _video.playbackRate = _video.playbackRate*2;
                    }else{
                        alert("对不起，你的浏览器不支持改变播放速度！");
                    }
                    
                },
                //降低播放速度
                fastBackward : function(){
                    if(_video.playbackRate){
                        _video.playbackRate = _video.playbackRate/2;
                    }else{
                        alert("对不起，你的浏览器不支持改变播放速度！");
                    }
                },
                //跳转到指定时间点播放
                locate : function(){
                    var min = $("min").value;
                    var sec = $("sec").value;
                    var time = parseInt(min)*60+parseInt(sec);
                    _video.currentTime = time;
                    _video.play();
                },
                bindEvent : function(){
                    var self = this;
                    
                    //绑定页面上各个按钮的事件
　　　　　　　　　　　　var btns = document.getElementsByTagName("button");
                    for(var i = 0 ;i < btns.length ; i++){
                        var el = btns[i];
                        el.onclick = self[el.id];
                    }
                    
                    //播放完毕自动播放下一个
                    _video.onended = function(){
                         var event = document.createEvent("HTMLEvents");
                        event.initEvent('click', true, true);
                        $("next").dispatchEvent(event);
                    }
                    
                    //循环检查视频的当前状态
                    setInterval(function(){
                        var speed = _video.playbackRate||1;
                        var movie = "movie"+playList.current;
                        var volume = parseInt(_video.volume*100);
                        $("currentMovie").innerHTML = movie;
                        $("currentSpeed").innerHTML = speed+"X";
                        $("currentVolume").innerHTML = volume;
                    },200);
                    
                }
            };
            
            window.onload = function(){
                videoUtil.bindEvent();
            }
            
        </script>
    </body>
</html>