资讯专栏INFORMATION COLUMN

HTML5音频audio属性

mrli2016 / 1588人阅读

摘要:音量的调节在到间设置音量值或查询当前音量值音量调节这个功能实现起来很简单,把的值设为,就静音了。播放列表与播放方式把整个歌曲文件的信息都写在文件里,获取并生成播放列表。

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 里的值一样,就滚动

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/56111.html

相关文章

  • HTML5 Audio & Video 属性解析

    摘要:二音频视频属性设置或返回是否在加载完成后随即播放音频视频。返回音频视频的播放是否已结束返回表示音频视频错误状态的对象。当音频视频在因缓冲而暂停或停止后已就绪时触发。当音频视频处于加载过程中时,会依次发生以下事件 一、HTML 音频/视频 方法 play() play() 方法开始播放当前的音频或视频。 var myVideo=document.getElementById(video1...

    JellyBool 评论0 收藏0
  • 那是我在夕阳下的奔跑:边跑边学习html5audio与video

    摘要:尤其是乔布斯在年发布的一篇的文章。乔布斯在里面写下了关于的一点看法,说明自己为什么不使用,谈到关于的一些问题,比如开放性,安全性,对于设备续航的影响,不利于触摸屏,等等。终于,于年月日,爸爸也放弃治疗了,宣布将于年正式退休。 今天为大家分享一下html5中的视频(video)与音频(audio)。在进入主题之前我们先了解一下Flash与html5这两种技术的时代背景与发展历史。 1.前...

    gself 评论0 收藏0
  • 那是我在夕阳下的奔跑:边跑边学习html5audio与video

    摘要:尤其是乔布斯在年发布的一篇的文章。乔布斯在里面写下了关于的一点看法,说明自己为什么不使用,谈到关于的一些问题,比如开放性,安全性,对于设备续航的影响,不利于触摸屏,等等。终于,于年月日,爸爸也放弃治疗了,宣布将于年正式退休。 今天为大家分享一下html5中的视频(video)与音频(audio)。在进入主题之前我们先了解一下Flash与html5这两种技术的时代背景与发展历史。 1.前...

    flybywind 评论0 收藏0
  • 那是我在夕阳下的奔跑:边跑边学习html5audio与video

    摘要:尤其是乔布斯在年发布的一篇的文章。乔布斯在里面写下了关于的一点看法,说明自己为什么不使用,谈到关于的一些问题,比如开放性,安全性,对于设备续航的影响,不利于触摸屏,等等。终于,于年月日,爸爸也放弃治疗了,宣布将于年正式退休。 今天为大家分享一下html5中的视频(video)与音频(audio)。在进入主题之前我们先了解一下Flash与html5这两种技术的时代背景与发展历史。 1.前...

    mrli2016 评论0 收藏0
  • 那是我在夕阳下的奔跑:边跑边学习html5audio与video

    摘要:尤其是乔布斯在年发布的一篇的文章。乔布斯在里面写下了关于的一点看法,说明自己为什么不使用,谈到关于的一些问题,比如开放性,安全性,对于设备续航的影响,不利于触摸屏,等等。终于,于年月日,爸爸也放弃治疗了,宣布将于年正式退休。 今天为大家分享一下html5中的视频(video)与音频(audio)。在进入主题之前我们先了解一下Flash与html5这两种技术的时代背景与发展历史。 1.前...

    LiuZh 评论0 收藏0
  • JavaScript HTML5脚本编程——“媒体元素”的注意要点

    摘要:事件除了大量属性之外,这两个媒体元素还可以触发很多事件。下表列出了媒体元素相关的事件。这两个媒体元素都有一个方法,该方法接收一种格式编解码器字符串,返回或空字符串。 audio和video元素的用法如下: 不支持音频 不支持视频 因为并非所有浏览器都支持所有媒体格式,所以可以指定多个不同的媒体来源。为此,不用在标签中指定src属性,而是要像下面这样使用一或多个元素。 ...

    baoxl 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<