HTML5 Audio标签方法和函数API介绍
HTML5 Audio标签方法和函数API介绍
- audio常用属性
- audio音乐格式的支持
- audio属性
- 参数说明
最近想弄一个类似在线播放MP3的应用,刚开始想用flash播放器,但是已经很就没有弄flash了,用起来很老火,于是想到了HTML5的audio标签也可以播放音乐,在这里就介绍一下HTML5 Audio标签方法和函数API。
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 Audio标签方法和函数API介绍相关推荐
- html怎么获取audio的状态,HTML5 Audio标签方法和函数API介绍
文章目录: audio常用属性 audio音乐格式的支持 audio属性 参数说明 最近在搞audio方面的h5页面,遇到一些坑,希望这篇文章对大家有所帮助. audio常用属性 那么首先来看一下au ...
- php curl_setopt抓取内容,PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
通过curl_setopt()函数可以方便快捷的抓取网页(采集很方便),curl_setopt 是php的一个扩展库 使用条件:需要在php.ini 中配置开启.(PHP 4 >= 4.0.2) ...
- html5比html4的音频使用方法,HTML5 audio标签的用法示例
您的位置:首页 - 教程 - HTML5 - 正文 HTML5 audio标签的用法示例 标签定义声音,比如音乐或其他音频流.html5 audio可以不用Flash插件就可以听音乐看视频,并不是全部 ...
- HTML5 Audio标签API整理(三)
一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...
- HTML5 Audio/标签Api整理(二)
1.实例2: 相对较完整 Html代码: <style>#volumeSlider .slider-selection {background:#bababa;} </style&g ...
- html作品简介代码,HTML5的标签的代码的简单介绍 HTML5标签的简介
HTML5的标签的代码的简单介绍 HTML5标签的简介 发布时间:2012-05-28 14:43:34 作者:佚名 我要评论 本文主要介绍了HTML5的标签.不同于以前的标签.更简单.更方便 ...
- Javascript控制html5 Audio标签
Javascript控制html5 Audio标签 9 Replies 在上一篇文章:Html5 audio标签(属性)的使用详解中已经把关于audio标签的如何使用以及支持属性说清楚了.这里写篇文章 ...
- HTML5 audio 标签-在html中定义声音的标签
2019独角兽企业重金招聘Python工程师标准>>> 本文来源 169it HTML 5 <audio> 标签定义和用法 <audio> 标签定义声音,比如 ...
- HTML5 audio 标签 播放事件流程
此代码包括了html5 audio 标签 整个播放流程. 你可以暂停,调整音量,拖动进度条 观察一下 var audio = new Audio(); document.body.appendChi ...
最新文章
- ssl单向tomcat配置webservice访问方法
- Java拦截器的小例子
- awk对某个字段分割处理
- 技术人应该如何投资时间?
- C语言返回文件大小的功能(fseek和ftell的使用)
- day18__文件操作
- php熊掌号怎么设置json-ld,织梦DEDECMS熊掌号JSON LD结构化数据代码分享
- java+phantomjs实现动态网页抓取
- 当知识图谱遇上预训练语言模型 -- 留言送书
- java表头表体动态返回_JAVA LIST 简单分页 集成EXT4 grid表头动态返回
- IIS日志存入数据库之二:ETW
- 软件著作权人享有的权利
- 世界上最好用的截图工具 吸色工具 Snipaste
- 需求分析的文档模板的书写方式
- 微积分(六)——一元函数微分学
- 文字闪图怎么做?如何制作gif闪图?
- MySQL 轻量级Online DDL工具 —— gh-ost
- Facecat的iOS自学笔记
- 蓝桥杯2019年第十届国赛真题-大胖子走迷宫
- 如何从iPhone的音乐应用程序中删除Apple Music