JS和H5做一个音乐播放器,附带源码

JS和H5做一个音乐播放器,附带源码

http://mp.weixin.qq.com/s/KpXT9X46AMlUVXQvpHuXGQ

效果图:

JS和H5做一个音乐播放器,附带源码

实现的功能

1、首页

JS和H5做一个音乐播放器,附带源码

2、底部播放控件

JS和H5做一个音乐播放器,附带源码

3、播放页面

JS和H5做一个音乐播放器,附带源码

4、播放列表

JS和H5做一个音乐播放器,附带源码

5、排行榜

JS和H5做一个音乐播放器,附带源码

6、音乐搜索

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

JS和H5做一个音乐播放器,附带源码

7、侧边栏

JS和H5做一个音乐播放器,附带源码

目录结构

JS和H5做一个音乐播放器,附带源码

开发心得与总结

1、轮播图

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

地址:https://github.com/hzzly/MagicMusic/blob/master/src/components/banner.vue

JS和H5做一个音乐播放器,附带源码

2、歌曲操作(喜欢,分享,加入播放列表)动画、播放列表展开与删除歌曲动画Vue提供了transition的封装组件,在下列情形中,可以给任何元素和组件添加 entering/leaving 过渡

  • 条件渲染 (使用 v-if)

  • 条件展示 (使用 v-show)

  • 动态组件

  • 组件根节点

JS和H5做一个音乐播放器,附带源码

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

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

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

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

JS和H5做一个音乐播放器,附带源码

4、本地存储

将一些数据缓存到localStorage,可以减少Http请求,从而优化页面加载时间。

在这个项目中首页歌曲列表以及搜索历史用到了本地缓存,拿搜索历史来举栗:

JS和H5做一个音乐播放器,附带源码

5、图片懒加载

使用了vue-lazyload插件

用法:

JS和H5做一个音乐播放器,附带源码

JS和H5做一个音乐播放器,附带源码

6、歌词滚动与高亮

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

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

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

JS和H5做一个音乐播放器,附带源码

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

JS和H5做一个音乐播放器,附带源码

到这就ok了

7、VUEX状态管理

推荐官方调试工具 devtools extension

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

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

车已到站✌️。

不知不觉写了这么多,老铁们凑合这看吧,觉得还行的可以点赞,需要完整代码练习的加群453833554: 已经上传到群文件。


JS和H5做一个音乐播放器,附带源码

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/113860.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号