audio自定义简易音频播放器

smallStone 发布于2019-08-05 10:04 / 3452人阅读

摘要：先看一下效果点击这里查看当然源代码也都在这个文件里啦功能播放暂停音频轨迹随意拖动播放时间及总时间静音实现逻辑当然最终还是使用的的的相关实现的首先写好播放器相关的样式并且隐藏默认的播放器然后就是一步步实现逻辑啦播放暂停播放音频暂停音频音频的播

先看一下效果:

点击这里查看DEMO, 当然源代码也都在这个文件里啦;

功能:

播放/暂停

音频轨迹随意拖动

播放时间及总时间

静音

实现逻辑:

当然, 最终还是使用的HTML5的audio的相关API实现的;

首先, 写好播放器相关的样式并且隐藏默认的播放器;
然后, 就是一步步实现逻辑啦:

播放/暂停

audio.play()播放音频;
audio.pause()暂停音频;
音频的播放与暂停, 就执行这两函数就行啦, 然后就是切换一下相关样式的class;

音频轨迹的拖动

手动控制音频的播放轨迹, 主要使用到touch相关的事件:

在touchstart时先获取小圆点的初始位置;

在touchmove时需要设置小圆点的移动位置, 播放的进度条以及播放的当前时间, 还得注意拖到最后及开始时还继续拖动的位置处理;

播放时间及总时间

获取音频总时间使用loadedmetadata事件:

当元数据（比如分辨率和时长）被加载时触发的事件;

然后在事件中调用audio.duration返回音频的长度(单位秒);

获取当前播放位置的时间用audio.currentTime

静音

静音直接设置audio.muted = true/false

有几个关键点需要注意:

当音频播放完毕后, 调用一下load()方法, 不然需要再次播放时得相刷新一下页面;

还是播放结束后, 需要手动重置小圆点的移动位置为 0;

手动拖动到最右边时, 最好是设置移动距离为 100% - 1, 不然直接拖动到结束会回到开始;

当在最开始就向左拖动时直接将移动距离设置为 0;

参考资料:

HTML 5 视频/音频参考手册

HTML DOM Audio 对象

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

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

audio自定义简易音频播放器

摘要：先看一下效果点击这里查看当然源代码也都在这个文件里啦功能播放暂停音频轨迹随意拖动播放时间及总时间静音实现逻辑当然最终还是使用的的的相关实现的首先写好播放器相关的样式并且隐藏默认的播放器然后就是一步步实现逻辑啦播放暂停播放音频暂停音频音频的播先看一下效果: 点击这里查看DEMO, 当然源代码也都在这个文件里啦; showImg(https://segmentfault.com/img/...

Tamic 2019-08-20 10:25 评论0 收藏0
HTML5实例教程——制作酷炫音频播放器插件

摘要：播放控制在播放器的界面绘制完成后，首先我们需要做的是为播放上一首下一首这三个主要的控制按钮添加对应的事件监听。上述的按钮点击的事件监听中，我们通过调用原始的元素的和方法来控制音频的播放和暂停。到这里，播放器已经基本成型了。 showImg(https://segmentfault.com/img/bVkoOI); demo download 上图便是这个音频播放器的UI界面图，里面...

荆兆峰 2019-08-02 18:05 评论0 收藏0
audiojs--跨浏览器的HTML音频播放器（可自定义样式）

摘要：一款跨浏览器的音频播放器，可惜例子和文档都比较少英文文档官网使用方法第一步引用文件第二步，全局初始化第三步，在需要的地方放上下面类似的代码注意是直接闭合标签然后，然后就没有了，以上只适用静态的页面，如果动态添加音频怎么办相信好多人都需要这种一款跨浏览器的音频播放器，可惜例子和文档都比较少英文文档官网使用方法：第一步引用文件：第二步，全局初始化： audiojs.ev...

GHOST_349178 2019-08-22 11:01 评论0 收藏0
那是我在夕阳下的奔跑：边跑边学习html5之audio与video

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

gself 2019-08-20 19:04 评论0 收藏0
那是我在夕阳下的奔跑：边跑边学习html5之audio与video

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

flybywind 2019-08-01 17:31 评论0 收藏0