HTML5音频audio属性

简介: 来源:https://segmentfault.com/a/1190000008932943?utm_source=tuicool&utm_medium=referralaudio 的控制函数主要有:load() 加载音频、视频软件,通常不必调用,除非是动态生成的元素,用来在播放前预加载pla...

来源:https://segmentfault.com/a/1190000008932943?utm_source=tuicool&utm_medium=referral

audio 的控制函数主要有:

load() 加载音频、视频软件,通常不必调用,除非是动态生成的元素,用来在播放前预加载
play() 加载并播放音频、视频文件,除非文件已经暂停在其他位置,否则默认重头开始播放
pause() 暂停处于播放状态的音频、视频文件

audio 的只读媒体特性有:

duration 获取媒体文件的播放时长,以s为单位,如果无法获取,则为NaN
paused 如果媒体文件被暂停,则返回true,否则返回false
ended 如果媒体文件播放完毕,则返回true
startTime 返回起始播放时间,一般是0.0,除非是缓冲过的媒体文件,并一部分内容已经不在缓冲区
error 在发生了错误后返回的错误代码
currentSrc 以字符串形式返回正在播放或已加载的文件,对应于浏览器在source元素中选择的文件

audio 可脚本控制的特性值:

autoplay 自动播放已经加载的的媒体文件,或查询是否已设置为autoplay
loop 将媒体文件设置为循环播放,或查询是否已设置为loop
currentTime 以s为单位返回从开始播放到目前所花的时间,也可设置 currentTime的值来跳转到特定位置
controls 显示或者隐藏用户控制界面
volume 在0.0到1.0间设置音量值,或查询当前音量值
muted 设置是否静音
autobuffer 媒体文件播放前是否进行缓冲加载,如果设置了autoplay,则忽略此特性

歌曲播放进度

这个功能用到的 audio api 主要有:

currentTime() :以秒为单位返回从开始播放到目前所花的时间,也可设置 currentTime 的值来跳转到特定位置;
duration:获取媒体文件的播放时长,以秒为单位,如果无法获取,则为 NaN

歌曲进度:首先先设置一个定时器,分别获取这两个值,用当前播放的秒数除以歌曲总秒数,再乘以歌曲进度条的总宽度(px),就能算出歌曲进度条一秒钟可以走多少。

歌曲进度调节:点击进度条的某个位置,歌曲跳转到响应位置,这个功能的实现是先获取到点击的位置距离进度条最左边的长度(让 Firefox 支持 offsetXoffsetY),接着获得这段距离在整个进度条的长度里所占的百分比,用这个百分比乘以歌曲的总长度,就能算出该给 currentTime 设置的值。

歌曲时间显示

歌曲显示:在计算歌曲进度的定时器内,不断发送歌曲的播放时间和总时间,左边的时间为歌曲的播放时间,也就是 currentTime 的值,右边的时间用总时间减去 currentTime ,并将它们转换为我们需要的格式即可。

音量的调节

volume:在0.0到1.0间设置音量值,或查询当前音量值;

音量调节:这个功能实现起来很简单,把 volume 的值设为 0.0,就静音了。在控件上调节音量的原理和也歌曲的进度条一样,判断点击位置距离第一个相对元素 Y 轴上最顶端的位置,然后再进一步计算出具体的数值,注意数值的格式,别超过1,并且小数点后只有1位。

播放列表与播放方式

把整个歌曲文件的信息都写在 json 文件里,获取并生成播放列表。当播放歌曲时,系统会生成当前播放歌曲的引索值(例如:1,2,表示第二张专辑的第三首歌,这个很重要,歌曲切换都是基于这个引索值的),当要播放下一曲时,系统会根据当前是什么播放方式(列表循环,单曲循环,随机播放,顺序播放),生成新的引索值,然后通知播放器,下一首该怎么播放,是随机,还是循环,还是播放结束。

同步显示歌词

ajax获取歌词文件(lrc文件)

用正则分别过滤出歌词和歌词前面对应的时间,存入数组

将歌词的时间和内容遍历存入 HTML

每秒都去判断一下现在歌曲播放的时间,如果和临时数据 data-timeline 里的值一样,就滚动

 

相关文章
WK
|
28天前
|
存储 移动开发 前端开发
HTML5新增了哪些其他元素和属性
这段文字介绍了HTML5中新增的多种元素和属性,包括页面布局元素如header、nav等,表单元素如email、tel输入框等,以及其他元素如canvas、svg等。此外,还介绍了全局及表单属性,例如contenteditable、placeholder等,这些新功能显著增强了HTML5在现代网页设计与开发中的实用性与灵活性。
WK
46 1
HTML 属性参考手册
HTML属性参考手册提供了常用的HTML属性列表,包括`class`、`id`、`style`、`title`等,用于定义元素的样式、唯一标识、额外信息等。此外,还包括`href`、`src`、`alt`、`name`、`value`、`target`、`type`和`placeholder`等,分别用于链接、资源路径、替代文本、表单元素名称和值、链接打开方式、表单元素类型及占位符文本的定义。
HTML 属性
HTML属性为元素提供额外信息,格式为name="value",置于开始标签内。如<a href="http://www.runoob.com">,其中href为属性名,URL为值。属性值应加引号,推荐使用小写。
|
21天前
|
移动开发 HTML5
在HTML5中嵌入视频和音频
【10月更文挑战第5天】在HTML5中嵌入视频和音频。
29 3
|
1月前
|
移动开发 JavaScript 前端开发
HTML5 表单属性详解
HTML5引入了多种新的表单属性,使表单创建与验证更加便捷高效。新增的输入类型包括`email`、`url`、`tel`等,常用属性有`placeholder`、`required`等。表单元素如`<form>`可设置提交方法和目标URL,`<button>`及`<input type="submit">`用于提交。新元素`<datalist>`和`<output>`提供更多功能。HTML5还提供了内置表单验证机制,增强用户体验。
|
28天前
|
Web App开发 移动开发 JavaScript
HTML 音频(Audio)详解
HTML5通过`<audio>`元素为网页音频播放提供了丰富支持。本文将介绍其基本用法、属性(如`controls`、`autoplay`)、事件监听、格式兼容性(MP3、OGG、WAV、AAC),并提供JavaScript控制示例。此外,还将讨论优化技巧,如使用CDN、懒加载及提升用户体验的方法。
WK
|
28天前
|
移动开发 UED HTML5
HTML5新增了哪些表单属性
HTML5新增的表单属性包括:autocomplete(启用或禁用自动完成建议)、autofocus(自动聚焦)、form(关联表单外的表单元素)、formaction等重写版本(自定义提交行为)、height/width(设置图像输入尺寸)、list(指定可选列表)、min/max/step(设置数值范围)、multiple(多选文件/选项)、pattern(正则表达式验证)、placeholder(占位符提示)和required(必填校验)。这些新功能显著提升了表单的灵活性和用户体验,使数据输入更加准确有效。
WK
20 1
|
2月前
|
移动开发 JavaScript 前端开发
HTML5 Audio(音频)详解
HTML5 通过 `<audio>` 标签简化了网页音频嵌入。本文详细介绍其基本语法与常用属性(如 `controls`、`autoplay`),并通过示例代码展示如何使用 JavaScript 控制音频播放及处理音频事件。此外,还提供了关于浏览器兼容性、自适应设计及无障碍访问的注意事项,助您优化音频体验。
|
2月前
|
移动开发 开发者 UED
HTML5中video标签controlslist属性的使用方法
`controlsList`属性为开发者提供了更多控制HTML5视频播放器行为的能力,让视频内容的集成更加灵活和符合需求。通过精心设计的控制列表,可以提升用户体验,同时保持内容的安全性和专业性。这种细节的控制和定制能力是现代Web开发的一个重要方面,反映了HTML5对开发者和内容创作者需求的响应。
163 1
|
19天前
|
Web App开发 数据采集 移动开发
HTML5新增的属性和标签
HTML5新增的属性和标签
78 0