内容简介:HTML5 Audio标签方法和函数API介绍
文章目录:
-
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 | 缓冲至目前可播放状态。 |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- HTML5 Audio标签方法和函数API介绍
- HTML5常用标签(2-4)链接标签及多媒体标签
- 基于标签特定文本表示的文本多标签分类
- HTML5常用标签(2-3)图片标签
- HTML5常用标签(2-5)列表标签
- HTML5常用标签(2-6)样式标签
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
学习JavaScript数据结构与算法(第2版)
[巴西] Loiane Groner / 邓 钢、孙晓博、吴 双、陈 迪、袁 源 / 人民邮电出版社 / 2017-9 / 49.00元
本书首先介绍了JavaScript 语言的基础知识以及ES6 和ES7 中引入的新功能,接下来讨论了数组、栈、队列、链表、集合、字典、散列表、树、图等数据结构,之后探讨了各种排序和搜索算法,包括冒泡排序、选择排序、插入排序、归并排序、快速排序、堆排序、计数排序、桶排序、基数排序、顺序搜索、二分搜索,然后介绍了动态规划和贪心算法等常用的高级算法以及函数式编程,最后还介绍了如何计算算法的复杂度。一起来看看 《学习JavaScript数据结构与算法(第2版)》 这本书的介绍吧!