问说网 > 文章教程 > 网页制作 > HTML5 Audio标签方法和函数API介绍
HTML5 Audio标签方法和函数API介绍
问说网 • 2014-06-19 09:53:52 • 3561 浏览
文章目录
最近想弄一个类似在线播放MP3的应用，刚开始想用flash播放器，但是已经很就没有弄flash了，用起来很老火，于是想到了HTML5的audio标签也可以播放音乐，在这里就介绍一下HTML5 Audio标签方法和函数API。
audio常用属性
那么首先来看一下audio标签中的一些常用属性：
| 属性 | 属性值 | 注释 |
| src | url | 播放的音乐的url地址（火狐只支持ogg的音乐，而IE9只支持MP3格式的音乐。chrome貌似全支持） |
| preload | preload | 预加载（在页面被加载时进行加载或者说缓冲音频），如果使用了autoplay的话那么该属性失效。 |
| loop | loop | 循环播放 |
| controls | controls | 是否显示默认控制条（控制按钮） |
| autoplay | autoplay | 自动播放 |
audio音乐格式的支持
来看下对于音乐格式的支持：
| 音频格式 | Chrome | Firefox | IE9 | Opera | Safari |
| OGG | 支持 | 支持 | 支持 | 不支持 | 不支持 |
| MP3 | 支持 | 不支持 | 支持 | 不支持 | 支持 |
| WAV | 不支持 | 支持 | 不支持 | 支持 | 不支 |
audio可通过new来创建。也可以通过用document来获取。
//通过new关键字来创建Audio对象
var Music = new Audio("test.mp3");
//通过document来获取已经存在的Audio对象
var Music = document.getElementById("audio");
//当然这里也可以使用document.getElementsByClassName('className')等其他的方法来获取。
然后我们来看下api所提供的对audio标签操作的一些属性和方法
audio属性
| 属性 | 注释 |
| duration | 获取媒体文件的总时长，以s为单位，如果无法获取，返回NaN |
| paused | 如果媒体文件被暂停，那么paused属性返回true，反之则返回false |
| ended | 如果媒体文件播放完毕返回true |
| muted | 用来获取或设置静音状态。值为boolean |
| volume | 控制音量的属性值为0-1;0为音量最小，1为音量最大 |
| startTime | 返回起始播放时间 |
| error | 返回错误代码，为uull的时候为正常。否则可以通过Music.error.code来获取具体的错误代码： 1.用户终止 2.网络错误 3.解码错误 4.URL无效 |
| currentTime | 用来获取或控制当前播放的时间，单位为s。 |
| currentSrc | 以字符串形式返回正在播放或已加载的文件 |
那么来看下这边常用的控制用的函数：
| 函数 | 作用 |
| load() | 加载音频、视频软件 |
| play() | 加载并播放音频、视频文件或重新播放暂停的的音频、视频 |
| pause() | 暂停出于播放状态的音频、视频文件 |
| canPlayType(obj) | 测试是否支持给定的Mini类型的文件 |
关于audio标签API中的常用事件。
首先绑定事件的话可以通过js中的addEventListener方法来绑定事件。
Music.addEventListener(string:事件类型/名称,function:具体事件促发时的执行,boolean:是否使用捕捉,默认为false);
参数说明
1、type:String 事件的类型。
2、listener:Function 侦听到事件后处理事件的函数。 此函数必须接受 Event 对象作为其唯一的参数，并且不能返回任何结果，如以下示例所示： 访问修饰符 function 函数名(evt:Event):void
3、useCapture:Boolean (default = false)
这里牵扯到“事件流”的概念。侦听器在侦听时有三个阶段：捕获阶段、目标阶段和冒泡阶段。顺序为：捕获阶段(根节点到子节点检查是否调用了监听 函数)→目标阶段(目标本身)→冒泡阶段(目标本身到根节点)。此处的参数确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。 如果将 useCapture 设置为 true，则侦听器只在捕获阶段处理事件，而不在目标或冒泡阶段处理事件。 如果useCapture 为 false，则侦听器只在目标或冒泡阶段处理事件。
要在所有三个阶段都侦听事件，请调用两次 addEventListener，一次将 useCapture 设置为 true，第二次再将useCapture 设置为 false。
常用audio的事件：
| 事件名称 | 事件作用 |
| loadstart | 客户端开始请求数据 |
| progress | 客户端正在请求数据（或者说正在缓冲） |
| play | play()和autoplay播放时 |
| pause | pause()方法促发时 |
| ended | 当前播放结束 |
| timeupdate | 当前播放时间发生改变的时候。播放中常用的时间处理哦 |
| canplaythrough | 歌曲已经载入完全完成 |
| canplay | 缓冲至目前可播放状态。 |
上面包括HTML5 Audio标签的方法，属性和函数api对于基本的应用功能已足够满足，当然您还需要一点服务器的知识帮您去构建一个后台。