如何用vue打造一个移动端音乐播放器

animabear 发布于2019-08-05 14:39 / 1436人阅读

摘要：写在前面没错，这就是慕课网上的那个音乐播放器，后台是某音乐播放器的线上接口扒取，虽然这类项目写的人很多，但不得不说这还是个少有的适合提升的好项目，做这个项目除了想写一个比较大并且功能复杂的项目，主要原因是要拿它来应对面试，也确实对我的业务能

写在前面

没错，这就是慕课网上的那个vue音乐播放器，后台是某音乐播放器的线上接口扒取，虽然这类项目写的人很多，但不得不说这还是个少有的适合vue提升的好项目，做这个项目除了想写一个比较大并且功能复杂的项目，主要原因是要拿它来应对面试，也确实对我vue的业务能力有很全面的提升，也使我找工作更加得心应手

代码内容有区别于作者源码，因为作者编码习惯跟我有很大差别，或者说比我更高级，生搬硬套并没有太大的意义，如果有时间最好从头到尾都自己写，包括所有的样式，代码量比较大，我在业余时间去写大概一个月完成了这个项目，这还只是我跟随作者的架构去编码的情况下

项目基本完成，但因为我已入职，最近也没有时间去完善它，以下是项目的简介，更详细的介绍在github里欢迎访问

源码地址

[https://github.com/wwenj/web-music-player]
希望你能在这有所收获，欢迎star

项目简介

基于vue全家桶开发的一款移动端音乐播放器webapp，数据由qq音乐后台通过jsonp跨域和代理获取

技术栈

前端：vue全家桶，es6，sass，axios，jsonp，better-scroll

数据：qq音乐接口扒取

功能模块： 页面

推荐页： 轮播，推荐歌单，点击跳转详情组件下3同

歌手页： 按姓氏首字母排列，点击侧面字母栏跳转到对应歌手区域

排行页： 几种榜单，详情页显示排行数字

搜索页： 搜索框监听内容变化显示搜索结果，搜索结果上拉加载，点击搜索结果添加到当前播放列表并播放该歌曲，搜索为歌手跳转歌手详情页；保存搜索历史，显示热门搜索标签

个人页： 选项卡显示最近播放历史，与我的收藏列表

播放页： 旋转大头像，播放时间，进度条，上一曲下一曲，收藏，播放模式（单曲-顺序-随机），歌词页，播放按钮，迷你底部播放栏（播放页收起时显示）

功能

播放列表： 显示当前播放列表，查看播放模式，清空列表，点击收藏，点击删除，点击添加歌曲到当前播放列表

添加歌曲到播放列表： 搜索歌曲添加，播放历史添加，搜索历史添加

播放组件： 拖动进度条跳转播放进度，歌词跟随进度联动

架构设计

15个业务组件，9个基础组件

详情组件，歌曲列表组件，搜索框组件，scroll组件，loading组件等组件多复用

vuex集中状态管理 ：

搜索历史，收藏列表，播放历史

播放状态，播放模式，收起播放页，当前播放索引

排行榜数据，推荐歌单数据，歌手数据（进入详情页使用）

模块化：js模块写在assets内，数据请求模块写在api内，vuex写在mutation.js，state.js，getters.js，action.js中

移动端适配：淘宝适配方案amfe-flexible，用sass函数统一rem为正常px逻辑单位

几种历史记录收藏列表存储在localStorage

项目测试 边界条件测试

歌曲未加载成功连续点击下一曲：设标志值，事件开始前做判断，当歌曲加载成功才能继续执行

选择播放歌曲当前正在播放：watch监听歌曲时，新旧值一致则不进行任何变化

顺序播放时播放列表中只有一首歌：判断只有一首歌时循环播放

删除播放列表歌曲的最后一首：关闭播放列表和播放页

未找到（搜索，收藏，历史等）任何数据：显示提示空信息组件

出现底部迷你播放页时，重新计算dom，显示正确scroll滚动位置

移动端测试

兼容：uc音乐播放器不能播放歌曲

滚动搜索结果出现小键盘：触摸搜索结果列表使input搜索框失焦

播放页收回动画卡慢：修改收回动画为改变透明度

项目总结 难点

jsonp与代理，获取QQ音乐真实后台数据，获取数据的二次封装使用

better-scroll 移动端插件（每次dom渲染要重新计算scroll宽度），封装成组件。

vuex状态管理的项目结构设计

收获

业务： 清晰项目架构，学习良好的编程风格，Es6模块化写法，Eslint代码规范，vuex状态管理，常用组件的封装复用，

技术： jsonp跨域请求，vue更深入理解掌握更熟练

项目截图

推荐页，排行页，歌手页

搜索页，我的本地（收藏，播放历史）

详情页，播放列表，添加歌曲到播放列表

播放页，歌词页

作者 [王文健]

2018 年 8月 10日

idc机房托管混合云如何用vue开发实时音视频如何用云服务器做一个个人网站 webrtc移动端播放如何用云计算

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

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

如何用vue打造一个移动端音乐播放器

摘要：写在前面没错，这就是慕课网上的那个音乐播放器，后台是某音乐播放器的线上接口扒取，虽然这类项目写的人很多，但不得不说这还是个少有的适合提升的好项目，做这个项目除了想写一个比较大并且功能复杂的项目，主要原因是要拿它来应对面试，也确实对我的业务能写在前面没错，这就是慕课网上的那个vue音乐播放器，后台是某音乐播放器的线上接口扒取，虽然这类项目写的人很多，但不得不说这还是个少有的适合vu...

lanffy 2019-08-23 10:55 评论0 收藏0
项目开发

摘要：前端菜鸟项目，大佬们轻喷美团外卖项目演示地址第期分享推荐上好玩容易上手的项目，帮你找到编程的乐趣。包含支持冒泡的事件框架资源模块等组件，按需选择组件，不绑架开发者。基于 Vue 的 WebSocket 实时聊天实战项目一个基于vue的，从前端到后端构建的项目。能让学到如何用，用到了vue全家桶，nodejs，通过webpack打包，图灵机器人，websocket等前沿知识进行构建。...

elva 2019-08-05 12:53 评论0 收藏0
Vue全家桶+Mint-Ui打造高仿QQMusic，搭配详细说明

摘要：简介最近有点小闲置，于是乎希望写点东西，正好自己喜欢听歌，便决定自己写一个音乐的简易版。核心文件则是在在这里使用统一管理页面切换动画，歌曲播放状态，歌曲进度等信息。所有对于歌曲的操作都通过来进行全局管理，然后对相应的变化做出全局改变。 Vue-QQMusic 简介：最近有点小闲置，于是乎希望写点东西，正好自己喜欢听歌，便决定自己写一个QQ音乐的简易版。顺便进一步加深下自己对移动端的知...

haoguo 2019-08-20 16:51 评论0 收藏0
Android应用开发

摘要：使用的快捷键这里是一个使用的小建议集合多个可以提高你安卓开发技能的开源学习的最佳方式就是阅读，对程序员来说也是如此。国内值得关注的非官方 API 集合一些国内的非官方 API 集合，用于练手足够了。国内值得关注的官方 API 集合收集了国内常用 API 一个不错的巩固 Android 基础的 APP https://github.com/SusionSuc/... Androi...

马永翠 2019-06-25 11:51 评论0 收藏0
vue.js 移动端音乐app（一）基础组件 scroll

一、基础实现（1）功能对 better-scroll 插件的基本封装，实现移动端的滚动（2）实现引入 better-scroll props probeType: better-scroll 配置项之一（1）取值： 1 滚动的时候会派发 scroll 事件，会截流。 2 滚动的时候实时派发 scroll 事件，不会截流。 3 除了实时派发 scroll 事件，在 swipe 的情况...

wqj97 2019-08-21 17:38 评论0 收藏0