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

问说网 · 发布于 2014-06-19 · 字数5163 · 浏览 4885 · 评论 0

最近想弄一个类似在线播放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对于基本的应用功能已足够满足,当然您还需要一点服务器的知识帮您去构建一个后台。

本文系作者 问说网 授权问说网发表,并经问说网编辑,转载请注明出处和 本文链接

相关文章

  • 2015-01-28编程语言的类型系统
  • 2016-03-13分层架构设计原则
  • 2016-04-05ScrollMagic神奇的滚动交互动画jQuery插件
  • 2016-05-16设计新技能!爱不释手的模糊背景设计
  • 2016-05-17如何制作一枚流光溢彩的界面
  • 2016-07-05刷流量的注意了使用流量宝可能会中毒!
  • 2016-07-06Java接口和抽象类
  • 2016-07-06Java异常处理
  • 发布评论

    为您推荐

    问说网 · 发布于 2016-03-22

    在WordPress文章中使用短代码引用其它文章

    如果你认真写博客的话肯定会有在文章内引用你站内其他文章的时候。这个时候我们一般都是直接用一个a标签来搞定,虽然这样已经解决了问题,但是我们可以有更好的方案。

    酷比了!Whats APP黑色版界面设计欣赏

    WhatsApp[1] 是一款非常受欢迎的跨平台应用程序,用于智能手机之间的通讯。本应用程序借助推送通知服务,可以即刻接收亲友和同事发送的信息。可免费从发送手机…

    • 酷比了!Whats APP黑色版界面设计欣赏
    • 酷比了!Whats APP黑色版界面设计欣赏
    • 酷比了!Whats APP黑色版界面设计欣赏
    • 酷比了!Whats APP黑色版界面设计欣赏
    GuntherJay · 发布于 2016-05-15 · 浏览 1316 · 评论 0
    爆款来袭!Austera WEB模板PSD免费下载
    张奕奕 · 发布于 2016-05-15

    爆款来袭!Austera WEB模板PSD免费下载

    朋友们,我们很高兴今天给大家分享这个蓝色实用简约的响应式HTML5企业模板,这个模板风格的重点是对企业和科技。包括几个精心设计的PSD文件,您可以轻松地适应您的…

    PS教程!一起来学习酷炫的极品飞车3D海报

    朋友们,对不起!好久没有发PS教程了,让大家久等了,今天我们一起来学习酷炫的极品飞车海报3D文字效果与惊人的光影效果。无论是作为比赛还是电影海报都特别有吸引力,…

    • PS教程!一起来学习酷炫的极品飞车3D海报
    • PS教程!一起来学习酷炫的极品飞车3D海报
    • PS教程!一起来学习酷炫的极品飞车3D海报
    • PS教程!一起来学习酷炫的极品飞车3D海报
    ChurchillChristine · 发布于 2016-05-16 · 浏览 1302 · 评论 0

    文字设计技巧!如何让文字排版更具易读性

    在视觉设计工作中,大家总习惯将重点放在图标和色彩上。但实际上,作为一个阅读类app,思考如何让文章更易于阅读是和图形、色彩处理同等甚至更为重要。

    • 文字设计技巧!如何让文字排版更具易读性
    • 文字设计技巧!如何让文字排版更具易读性
    • 文字设计技巧!如何让文字排版更具易读性
    • 文字设计技巧!如何让文字排版更具易读性
    VanXaviera · 发布于 2016-05-16 · 浏览 1477 · 评论 0

    当设计遇上心理学!解析心理学在设计上的应用

    设计师经常犯的错误:同时将大量信息展示给用户,不要一次性大量提供信息,可以在当前场景下只提供必要的信息来满足当前的需求。如果用户中存在不需要引导的高端用户,同时…

    • 当设计遇上心理学!解析心理学在设计上的应用
    • 当设计遇上心理学!解析心理学在设计上的应用
    • 当设计遇上心理学!解析心理学在设计上的应用
    • 当设计遇上心理学!解析心理学在设计上的应用
    BetsyAdolph · 发布于 2016-05-17 · 浏览 1321 · 评论 0
    问说网 · 发布于 2016-06-17

    解决Firefox提示已阻止载入混合活动内容

    问说网由于采用了Https安全连接,在引入问说网CDN项目文件的时候,在Firefox浏览器下被提示已阻止载入混合活动内容,直接的结果就是文件并没有引入,无法完…

    FTP被动/主动模式介绍和FTP工具设置方法

    问说网的服务器默认开启了防火墙设置,只允许了80和21端口,发现FTP无法链接到服务器了,通过网上查找说是21端口只是进行用户验证,20端口才是传输数据,于是有…

    • FTP被动/主动模式介绍和FTP工具设置方法
    • FTP被动/主动模式介绍和FTP工具设置方法
    • FTP被动/主动模式介绍和FTP工具设置方法
    • FTP被动/主动模式介绍和FTP工具设置方法
    问说网 · 发布于 2016-06-22 · 浏览 1534 · 评论 0

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    问说网

    问说网分享与设计有关的文章素材界面和作品,提供设计教程、素材分享、界面欣赏、编程设计、设计书籍、设计师导航等内容,你可以在这里阅读、学习、分享、交流。

    13177 文章
    495 评论
    2159 人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 4430

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 4664

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 4588

    图片素材

    关注 图片素材

    文章 29463 · 浏览 3647

    高清图片

    关注 高清图片

    文章 26530 · 浏览 3911

    更多 推荐作者

    关注 秋天的孤寂

    文章 99 · 评论 0

    关注 惢碎葬爱

    文章 96 · 评论 0

    关注 走了留下什么

    文章 110 · 评论 0

    关注 莪很迷茫

    文章 97 · 评论 0

    关注 思念像咒语

    文章 102 · 评论 0

    关注 无感觉

    文章 91 · 评论 0

    
    顶部 反馈 评论 底部

    意见反馈

    感谢您对问说网的支持,提出您在使用过程中遇到的问题或宝贵建议,您的反馈对我们产品的完善有很大帮助。

    您的反馈我们已收到!

    感谢您提供的宝贵意见,我们会在1-2个工作日,通过您留下的联系方式将处理结果反馈给您!