HTML内联框架制作音乐播放器,HTML5+js开发自己的音乐播放器,千万粉丝围观!

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

做完的项目如图所示:

f218305e2c28925d84eb74a05090373f.png

73f1acc87ddb241f600b1924d2b767af.png

实现的功能

1、首页

4e04b70f61a23dbbcaf28956bf827b62.png

2、底部播放控件

70aeabaaf1dedc5c118bfcbdc7df5b25.png

3、播放页面

e4db744fc3de79531cd51bb7316c7eb0.png

4、播放列表

756b0f36e9535c610904a3eec8f9c97f.png

5、排行榜

aa59ef4d1c8fd46861a668ff7d98c719.png

6、音乐搜索

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

f3d671a623e6c03d5b1d80cda97ff9e8.png

7、侧边栏

ff537af6f9bb5c1e0cb7c8fd499fe771.png

API

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

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

目录结构

0e71652a455f0060ac216ff56cb2b933.png

1、轮播图

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

39342f796f4dba5886032eb49f390e74.png

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

da112b7edbfbb30ddda2e48582c3a5c6.png

b96dd93bb3cc31fcacb8aba48d9ab573.png

transition-group

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

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

b1729172470dcb5e15070e69ece7b240.png

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

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

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

6e6a24b09fd98f4737ccf2c83e0a8e50.png

5、图片懒加载

使用了vue-lazyload插件

用法:

b00c901c31060bc580e75f3e97ed1622.png

6、歌词滚动与高亮

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

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

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

3076a24097d975febb15c5aab1cbf781.png

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

83e2b81641a77cef74459ff71d8a6a27.png

到这就ok了

7、vuex状态管理

推荐官方调试工具 devtools extension

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

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

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

车已到站。

4a9e39ce67f3efaa9b2552f7a6d20e97.png

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

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

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

最后再来提点建议:

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

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值