html5实现在线响应式音乐播放器

yankeys 发布于2019-08-22 10:40 / 2153人阅读

摘要：欢迎吐槽功能思路分析用了这么多年的音乐播放软件，目前已是网易云音乐的重度用户。一个基本的音乐播放器基础功能有播放暂停歌曲切换。用媒体查询实现响应式，删除不必要的区域。细节实现利用定时器实时显示歌曲播放时间，利用百分比来动态改变进度条的长度。

大概很早的时候就有想法做一个音乐播放器玩玩，以前可能还考虑过做APP，大一的时候第一个html的静态页面也是做的音乐网站，想想，大概小时候比较喜欢音乐吧。然而，现在入了前端大坑，就用h5做一个耍耍好了。功能不多，UI不美，But，练习了html5中audio及其API的使用。欢迎吐槽~

功能思路分析

用了这么多年的音乐播放软件，目前已是网易云音乐的重度用户。
一个基本的音乐播放器基础功能有：播放、暂停、歌曲切换。
用户体验基础功能：歌曲跳跃播放、音量调整、歌曲单曲或列表循环。
当了解这些之后，再瞅一眼audio的api，简直了，基本上都能实现，开做。

页面实现

采用了比较喜欢的深蓝渐变背景加活力黄搭配，界面没啥好说的，萝卜白菜，各有所爱。
用css3媒体查询实现响应式，删除不必要的区域。

js实现

1.设置默认属性

默认不自动播放audio.autoplay = false;
  默认不单曲循环audio.loop = false;
初始化音量audio.volume = 0.5;
默认不自动缓冲加载audio.autobuffer = false;
2.基本功能实现

这里不提了，有想了解的可以去github(地址)看源码。
3.细节实现

①利用定时器实时显示歌曲播放时间，利用百分比来动态改变进度条的长度。

②利用audio.readyState来设置缓冲进度，用css3来实现平滑改变

③可点击歌曲进度条任意位置实现跳转播放，音量同理
④实现静音，单曲循环和列表循环

在线音乐实现

这次采用的是网易云音乐的API来进行在线音乐的实现。此处参考了小青年的文章html5+ XMLHttpRequest 与mui ajax用法详解。
利用事件委托，为动态加载的结果绑定监听事件。将搜到的资源数据加载到audio中去，然后播放在线资源。
本来想加入localStorage存储播放列表的，对于体验还有所考虑，毕竟只是个玩儿的东西，所以保留想法了，没有加入。

上结果

不得不承认，总结能力真的有够差，直接上结果吧：(http://fehey.com/hey-Audio/)
喜欢的可以去github看源码，有什么改进，欢迎留言（star也不介意哦?）~

个人博客：(http://fehey.com/)

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

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

2015 年十佳 HTML5 应用

摘要：第五名中国中国在我们的网上应用店里一直评分较高，排名较前。中国手机网页端的滑动体验和阅读体验都非常优秀，究其原因，我认为是十分用心的体验设计，与优化过的请求，和它对于加速的应用。值得一提的是，中国是基于最近大热的开发的。 showImg(https://segmentfault.com/img/bVr50R); 前言优秀的前端工程师戴着脚铐跳舞，究竟能把 HTML5 的体验推进到什么...

wh469012917 2019-08-19 17:19 评论0 收藏0
用 TS + Vue 重写 APlayer HTML5 音乐播放器

摘要：简介是一款简洁漂亮的音乐播放器在我第一次看到这款播放器颜值的时候让我眼前一亮，我非常崇拜那些能设计出好看界面的设计师但是在用过之后发现还是有不足的地方这是我曾经提过的用了一段时间，很喜欢简洁的，提一些其他可改进的建议我认为有必要提供动态管理简介 @DIYgod/APlayer 是一款简洁漂亮的 HTML5 音乐播放器 (〃ﾉωﾉ) 在我第一次看到这款播放器颜值的时候让我眼前一亮，我...

BingqiChen 2019-08-20 18:15 评论0 收藏0