摘要：侦听到事件后处理事件的函数。侦听器在侦听时有三个阶段捕获阶段目标阶段和冒泡阶段。顺序为捕获阶段根节点到子节点检查是否调用了监听函数目标阶段目标本身冒泡阶段目标本身到根节点。播放中常用的时间处理哦歌曲已经载入完全完成缓冲至目前可播放状态。
文章目录：
audio常用属性
audio音乐格式的支持
audio属性
参数说明
最近在搞audio方面的h5页面，遇到一些坑，希望这篇文章对大家有所帮助。
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 | 缓冲至目前可播放状态。 |
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/50792.html
摘要：侦听到事件后处理事件的函数。侦听器在侦听时有三个阶段捕获阶段目标阶段和冒泡阶段。顺序为捕获阶段根节点到子节点检查是否调用了监听函数目标阶段目标本身冒泡阶段目标本身到根节点。播放中常用的时间处理哦歌曲已经载入完全完成缓冲至目前可播放状态。 文章目录： audio常用属性 audio音乐格式的支持 audio属性 参数说明 最近在搞audio方面的h5页面，遇到一些坑，希望这篇文章对大...
摘要：侦听到事件后处理事件的函数。侦听器在侦听时有三个阶段捕获阶段目标阶段和冒泡阶段。顺序为捕获阶段根节点到子节点检查是否调用了监听函数目标阶段目标本身冒泡阶段目标本身到根节点。播放中常用的时间处理哦歌曲已经载入完全完成缓冲至目前可播放状态。 文章目录： audio常用属性 audio音乐格式的支持 audio属性 参数说明 最近在搞audio方面的h5页面，遇到一些坑，希望这篇文章对大...
摘要：尤其是乔布斯在年发布的一篇的文章。乔布斯在里面写下了关于的一点看法，说明自己为什么不使用，谈到关于的一些问题，比如开放性，安全性，对于设备续航的影响，不利于触摸屏，等等。终于，于年月日，爸爸也放弃治疗了，宣布将于年正式退休。 今天为大家分享一下html5中的视频（video）与音频（audio）。在进入主题之前我们先了解一下Flash与html5这两种技术的时代背景与发展历史。 1.前...
摘要：尤其是乔布斯在年发布的一篇的文章。乔布斯在里面写下了关于的一点看法，说明自己为什么不使用，谈到关于的一些问题，比如开放性，安全性，对于设备续航的影响，不利于触摸屏，等等。终于，于年月日，爸爸也放弃治疗了，宣布将于年正式退休。 今天为大家分享一下html5中的视频（video）与音频（audio）。在进入主题之前我们先了解一下Flash与html5这两种技术的时代背景与发展历史。 1.前...
阅读 2518·2021-11-25 09:43
阅读 1826·2021-09-22 15:26
阅读 3579·2019-08-30 15:56
阅读 1668·2019-08-30 15:55
阅读 1852·2019-08-30 15:54
阅读 765·2019-08-30 15:52
阅读 3094·2019-08-29 16:23
阅读 851·2019-08-29 12:43
