html5 audio API介绍

html5

audio简介

audio是HTML5的标签，它有很多强大的API可以用脚本控制，使用该API可以实现在web应用中添加简单的声音效果或者创建自定义音频控制面板。对于常用的mp3格式也并不是所有支持audio的浏览器都兼容,为此我们常常要写一些格式判断。尽管对于多种不同格式的文件要分别定义媒体比较麻烦，但是能够不借助插件在浏览器中原生播放音频是HTML5中强大的新特性。

API

可以直接在html中写aduio标签，也可以用js创建audio对象。

<!--直接在html中使用-->
<audio src='1.mp3' controls=true />

var audio=new Audio('1.mp3').play();//在js中使用

类型选择和加载

调用canPlayType()方法并将媒体的MIME类型传递过去可以测试浏览器是否支持这个格式。如果不能播放该类型的媒体文件，该方法会返回一个空字符，否则它会返回一个字符串：maybe 或者 probably。

var audio=new Audio();
if(audio.canPlayType('audio/wav')){
  audio.src='1.mp3';
  audio.play();
}

控制媒体播放的属性

currentTime 用来获取或控制当前播放的时间，单位为s
volume 表示播放音量，介于0（静音）~1（最大）之间。
muted 设置为true则会进入静音模式,false则会恢复到之前的音量
playbackRate表示媒体播放的速度，1.0是正常速度，>1快进,0~1是慢放。
controls 是否显示默认的播放控件
loop 是否循环播放
preload 预加载 设置为auto则表示浏览器应当预加载它认为适量的媒体内容
autoplay 表示当一家缓存足够多的媒体内容时是否需要自动开始播放

查询媒体状态的属性

paused 如果播放器暂停，该值为true,否则为false
ended 如果播放器播放完毕并且停下来，那么ended属性就为true,如果loop属性值为true，那么ended属性值永远不为true
duration 媒体时长，单位是秒
initialTime属性指定了媒体的开始时间，单位是秒

常用媒体相关事件

loadstart当媒体元素开始请求媒体数据内容时触发，相应的networdkState属性值为NETWORK_LOADING
progress正在通过网络加载媒体内容
canPlay 已经加载一些内容，可以开始播放
canPlaythrough 所有媒体内容加载完毕，可以流畅播放
suspend 已经缓冲大量数据，暂时停止下载
stalled 尝试加载数据失败
play 调用play()方法或者设置相应的autoplay属性
wating 缓冲的数据不够播放，等待下载缓冲
playing 已经开始播放媒体文件
timeupdate currentTime属性发生改变了。在一般播放过程中，此事件每秒会触发4~60次，具体次数可能取决于系统加载速度以及事件处理程序处理完成的时间
pause 调用了pause()方法，暂停播放
seeking 通过脚本或者用户通过播放控件将当前时间调至一个还未缓冲的时间点，导致在内容还没有加载完时，停止播放。此时seeking属性值为true
seeked seeking属性值又变回false
ended 媒体播放完毕，播放停止
durationchange duration属性发生变化
volumechange volume或者muted属性值发生变化
rateChange playbackRate或者defaultPlaybackRate发生改变

常用的API就这么多，足够用了。具体的例子看我后面的一篇文章。