audio实现背景音乐，常用功能的简单封装
使用DOM Audio 对象实现背景音乐播放。支持链式操作。Demo
特点 1. 使用HTML DOM Audio对象实现音频控制,不需要在HTML文档中添加auido标签。
2. supportAutoPlay检测是否支持自动播放。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>audioPlugin Demo</title> </head> <body> <script type="text/javascript" src="src/audioPlayPlugin.js"></script> <script> /** *新建一个Audio对象并立即播放 *src设置为“file/test1.mp3” *loop:true表示循环播放，volume:0.1设置音量为0.1（默认1） *监听play事件（当音频已开始或不再暂停时触发） */ var bgAudio=new audioController({ src:"file/test1.mp3", attr:{ loop:true, volume:0.1 }, events:{ play:function(){ console.log("开始播放了") } } }) .play(); </script> </body> </html> 构造函数
| 名称 | 说明 |
|---|---|
| audoController(/*options*/) | 实例化一个Audio对象，参数缺省 |
实参必需是一个对象
| 属性 | 数据类型 | 说明 |
|---|---|---|
| src | string | 可选，指定音频文件路径。 |
| attr | object | 可选,指定音频标签属性。Audio所拥有的属性 |
| events | object | 可选，为Audio对象添加事件绑定。支持事件 |
{string} src 可选,音频路径。如Audio对象实例化时未设置音频路径，则执行该方法必需传入音频路径。
开始播放音频。参数缺省表示播放/继续播放音频，参数不缺少表示播放新传入的音频
pause()暂停音频播放。
events(/*optional*/){string} eventName 事件名称
{function} backFun 事件响应执行的函数
{Object} eventObject 事件绑定对象，事件名和函数键值对.
可以传入eventName、backFun两个参数，绑定/修改单个事件。或传入eventObject，绑定/修改多个事件
添加/修改事件监听。所支持事件
//示例 var bgAudio=new audioController(),process; bgAudio.events("play",function(){console.log("开始播放了。")}); bgAudio.events({ "timeupdate":function(){ process=bgAudio.getAttr("currentTime")/bgAudio.getAttr("duration"); console.log("当前播放进度："+(process*100||0).toFixed(2)+"%") }, "ended":function(){ console.log("播放结束了！") } }); bgAudio.play("file/test1.mp3"); delectEvents(eventName)
{string} eventName 需要删除的事件名称或名称数组
删除事件监听
//示例 bgAudio.delectEvents("play"); bgAudio.delectEvents(["timeupdate","ended"]); getAttr(eventName)
{string} agr [需要获取的属性名称]
根据传入的参数:单个返回string/object,多个返回object，缺省返回audio标签所属性。
Audio所拥有的属性
获得Audio对象的属性
//示例 bgAudio.getAttr("currentTime"); // 返回音频频中的当前播放位置（以秒计） bgAudio.getAttr("duration","ended"); //返回{duration:当前音频的长度（以秒计）,ended:音频播放是否已结束} bgAudio.getAttr();//{音频所有属性} setAttr(/*optional*/)
{string} attrName 属性名称
{string} value 属性值
{Object} attrObject 音频属性修改，属性名称和属性值的键值对。
可以传入attrName、value两个参数，绑定/修改单个属性值。或传入attrObject，绑定/修改多个属性值。
Audio可设置的属性
设置音频属性
//示例 bgAudio.setAttr("currentTime","70"); // 设置音频当前播放位置到70s处 bgAudio.setAttr({currentTime:270,volume:0.1}); //设置音频当前播放位置到270s处,音量为0.1 supportAutoPlay(obj)
{obejct} obj
{string} obj.src 必需,音频路径，用于测试是否支持自动播放
{function} obj.support 必需,支持自动播放时执行的回调函数 {function} obj.nonsupport 必需,不支持自动播放时执行的回调函数 该方法为异步方法
验证是否支持自动播放（iphone不支持自动播放，必需用户操作页面后才能播放音频）。验证完成后不管当前设备是否自动播放，都不会播放测试音频。需在回调中控制播放。
//示例 var bgAudio=new audioController(); bgAudio.supportAutoPlay({ src:"file/test1.mp3", support:playAudio,//支持自动播放，则立即播放音频 nonsupport:function(){ //不支持自动播放，监听到用户点击之后播放音频 document.addEventListener("click",playAudio) } }) function playAudio(){ bgAudio.play("file/test1.mp3"); document.removeEventListener("click",playAudio); }
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
