HTML5 Audio标签方法和函数API介绍

文章目录:

  • audio常用属性

  • audio音乐格式的支持

  • audio属性

  • 参数说明

最近在搞audio方面的h5页面,遇到一些坑,希望这篇文章对大家有所帮助。

audio常用属性

那么首先来看一下audio标签中的一些常用属性:

属性属性值注释
srcurl播放的音乐的url地址(火狐只支持ogg的音乐,而IE9只支持MP3格式的音乐。chrome貌似全支持)
preloadpreload预加载(在页面被加载时进行加载或者说缓冲音频),如果使用了autoplay的话那么该属性失效。
looploop循环播放
controlscontrols是否显示默认控制条(控制按钮)
autoplayautoplay自动播放

audio音乐格式的支持

来看下对于音乐格式的支持:

音频格式ChromeFirefoxIE9OperaSafari
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客户端正在请求数据(或者说正在缓冲)
playplay()和autoplay播放时
pausepause()方法促发时
ended当前播放结束
timeupdate当前播放时间发生改变的时候。播放中常用的时间处理哦
canplaythrough歌曲已经载入完全完成
canplay缓冲至目前可播放状态。
    原文作者:sourcenode
    原文地址: https://segmentfault.com/a/1190000009488711
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞