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

栏目: Html5 · 发布时间: 6年前

内容简介: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 缓冲至目前可播放状态。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

迎接互联网的明天

迎接互联网的明天

邹静 / 电子工业 / 2011-6 / 55.00元

《迎接互联网的明天-玩转3D Web(附盘)》,全书共5章,第1章主要阐述了国内外空前繁荣的3D互联网技术领域,以及这些领域透射出来的潜在商机;第2章主要用当下比较流行的Flash编程语言ActionScript 3,来向大家介绍面向对象编程语言的思想概念,以及一些3D渲染技术的入门知识;第3章注重建模知识的运用,主要运用WireFusion和3ds Max来制作3D网页;第4章主要介绍3D游戏编......一起来看看 《迎接互联网的明天》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试