有你在真好 的个人博客
HTML5+js开发自己的音乐播放器,千万粉丝围观!
阅读:2042 添加日期:3/30/2021 5:41:14 PM

今天小编我博客时,看到了一位大神分享的自己的音乐播放器,小编我也COPY了一份分享给头条上的小伙伴,能搞定这个音乐播放器找份工作还是没压力的,毕竟这个项目还是挺好的,正在学习web前端网页制作的伙伴们福利来了,小编我我项目整理了一下,顺便写下这篇文章(项目地址文末有)

做完的项目如图所示:

HTML5+js开发自己的音乐播放器,千万粉丝围观!

HTML5+js开发自己的音乐播放器,千万粉丝围观!

实现的功能

1、首页

HTML5+js开发自己的音乐播放器,千万粉丝围观!

2、底部播放控件

HTML5+js开发自己的音乐播放器,千万粉丝围观!

3、播放页面

HTML5+js开发自己的音乐播放器,千万粉丝围观!

4、播放列表

HTML5+js开发自己的音乐播放器,千万粉丝围观!

5、排行榜

HTML5+js开发自己的音乐播放器,千万粉丝围观!

6、音乐搜索

输入搜索关键词,点击放大镜图标

HTML5+js开发自己的音乐播放器,千万粉丝围观!

7、侧边栏

HTML5+js开发自己的音乐播放器,千万粉丝围观!

API

感谢作者把api整理的这么好(点个赞)

https://binaryify.github.io/NeteaseCloudMusicApi/#/?id=%e6%90%9c%e7%b4%a2%e9%9f%b3%e4%b9%90

目录结构

HTML5+js开发自己的音乐播放器,千万粉丝围观!

1、轮播图

首先感谢作者
ShanaMaid/vue-image-scroll开源的代码,我把代码copy下来自己进行了一点修改(没有手指滑动效果),因为这是移动端,少不了的手指滑动切换,所以添加了vue-touch(偷偷告诉你,vue-touch的next分支还是支持vue2.0的)。

HTML5+js开发自己的音乐播放器,千万粉丝围观!

2、歌曲操作(喜欢,分享,加入播放列表)动画、播放列表展开与删除歌曲动画

HTML5+js开发自己的音乐播放器,千万粉丝围观!

HTML5+js开发自己的音乐播放器,千万粉丝围观!

transition-group

一组过度动画,这里有个小坑的,之前看官网列表过渡的栗子,给每一项设置唯一的key值,一般都会用index。所以在做的时候就把index传给key,结果过渡老是不对,后来换成对应的item

就正常了(生无可恋脸)。

HTML5+js开发自己的音乐播放器,千万粉丝围观!

3、直线进度条、弧形进度条

西班牙建筑大师曾说过:“直线属于人类,曲线则归于上帝”。在这里我大胆的使用了弧形来作为进度条,(几大热门音乐APP貌似还没有弧形进度条)。

这里我用到了Vue的绑定内联样式

HTML5+js开发自己的音乐播放器,千万粉丝围观!

5、图片懒加载

使用了vue-lazyload插件

用法:

HTML5+js开发自己的音乐播放器,千万粉丝围观!

6、歌词滚动与高亮

因为api提供的歌词包括时间,如:

[03:57.280]原谅我这一生不羁放纵爱自由

所以首先要进行字符串切割:

HTML5+js开发自己的音乐播放器,千万粉丝围观!

然后在播放的监听事件中与播放的当前做对比:

HTML5+js开发自己的音乐播放器,千万粉丝围观!

到这就ok了

7、vuex状态管理

推荐官方调试工具 devtools extension

想进一步理解vuex,可以看这篇博客vuex学习实践笔记

之前看到好多人写的vuex,把整个项目的数据放到了一个state里,导致应用的所有状态集中到一个很大的对象。但是,当应用变得很大时,store 对象会变得臃肿不堪。

所以我建议(个人见解,轻喷):将 store 分割到模块(module)。每个模块拥有自己的 state、mutation、action、getters。这样方便管理与后期的维护。

车已到站✌️。

HTML5+js开发自己的音乐播放器,千万粉丝围观!

入门只是学习的开始,这时你可以运用你的技能,实现各种需求。 在实现各种需求时,你会遇到更多各种各样的问题。有些问题可能已经不是单纯写JS代码能很好解决的了。 你可能需要配合一些框架,或一些工具,或一些设计模式, 或一些业务知识。

随着解决更多问题, 你也会积累更多的知识。之后会是漫长的积累过程, 通过项目经验、看书、看博客、思考、讨论等等,积累你的经验和知识。

你需要持之以恒和刨根问底。总之,之后就看你自己的了。还是和前提差不多的那句话:你需要主动。

最后再来提点建议:

  1. 写JS的最好办法..是不停的重复练习....其实很多人反映...学JS的时候很难..但是有些人认为..它没有服务端的语言难.或者说..根本就不屑的学这种语言...什么破语言..老出各种各样的错误...浏览器还不兼容..但是...学好JS对你未来的web开发有至关重要的作用....我觉得.JS是奠定RIA的基础...或者说..客户端的开发RIA的基础.

  2. 这个音乐播放器项目到这里就算是做完了,想要完整代码自己学习练手的小伙伴进我的群自助领取,已经上传到群文件里了:640633433,欢迎初学和进阶中的小伙伴。

如果项目有哪些缺陷,欢迎在评论区指正!