基于Vue.js的音乐播放器（Webapp）

widuu 发布于2019-08-20 18:23 / 1946人阅读

摘要：概述项目是基于，成品是一个移动端的音乐播放器，来源于的实战课程。播放器是全局组件，放在下面，通过传递数据，触发提交，从而使播放器开始工作。将请求的数据格式化后再通过传递，组件间共享，实现歌曲的播放切换等。

概述

项目是基于Vue.js，成品是一个移动端的音乐播放器，来源于imooc的实战课程。自己动手实践并加以修改拓展。
项目的大致流程是Vue-cli构建开发环境，分析需求，设计构思，规划目录结构，开始编码。

视图层

推荐页

歌手页

歌手详情

歌曲排行榜

排行榜详情

搜索页

用户中心

数据来源

所有数据都来自于QQ音乐，抓取自QQ的接口，大部分接口都是JSONP，抓取比较容易，其中一些接口限制了host，不能直接抓取，采用的方法是用axios代理，设置header，以此绕过host的限制。
PS：具体代码请看prod.server.js文件

技术栈

Vue

Vuex

Vue-Router

Vue-cli

Stylus

Axios

ESlint

Better-scroll

src目录结构

难点 player组件

讲一讲player 播放器组件，播放器组件可谓是整个项目的核心，当然数据处理和用户体验方面也是不简单的（逃。
播放器是全局组件，放在App.vue下面，通过Vuex传递数据，触发action提交mutation，从而使播放器开始工作。当然，其中的数据交互说复杂也不是很复杂，就是要花多点时间理解，player组件由多个基础组件构成，具体请看项目代码，下面上图

为了防止切换歌曲时点击速度过快导致歌曲播放错误，使用了audio的onplayAPI，结合Vuex获取到数据，判断当前歌曲数据请求到才可以切换下一首歌曲，判断函数如下

 ready() {
   this.songReady = true
 }

数据处理

通过调用QQ音乐的JSONP接口，获取的数据并不能直接拿来用，需要做进一步的规格化，达到我们使用的要求，所以在这方面多带带封装了一个class来处理这方面的数据，具体请看src/common/js/song.js

在请求JSONP的时候，用到了一个JSONP库，这个库代码十分简短，只有几十行，有兴趣的同学可以学习下。

使用时，就是将请求的参数拼接在请求url上，然后调用这个库的jsonp方法。所以，在此封装了两个函数，一个是将参数拼接在url上，另一个是将库里面的jsonp方法Promise化，方便我们使用，具体请查看src/common/js/jsonp.js。

将请求的数据格式化后再通过Vuex传递，组件间共享，实现歌曲的播放切换等。

交互体验

该项目的很多地方都涉及到滚动，包括下拉滚动，下拉滚动刷新等。这里面用到了一个库(better-scroll)，来实现所有涉及到的滚动，建议学习下它的API。

其他动画包括了Vue的transition动画，路由之间切换时的简单动画，播放器打开时的动画，这个地方比较难，也比较好玩。

打开页面时的加载Loading效果，其实就是一个Loading组件，也比较简单。

为了减少流量，图片加载使用了懒加载的方式，滚动时再加载真实的图片。
具体效果请自身体验：）

效果

构建 开发环境

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# run e2e tests
npm run e2e

# run all tests
npm test

生产环境

# build for production with minification
npm run build
# run
node prod.server.js

总结

通过学习该项目，自己收获了许多，实践中也遇到了大大小小许多问题，通过断点调试等最终解决了，对我来说无疑是最大的鼓励，也希望能与大家一起学习。
项目地址：https://github.com/k-water/vue-music
喜欢的点个赞
完：）

云服务器 GPU云服务器 java写的播放音乐网络音乐播放器安卓音乐播放器音乐播放器实现

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

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

【收藏】2019年最新Vue相关精品开源项目库汇总

摘要：前言本文的前身是源自上的项目但由于该项目上次更新时间为年月日，很多内容早已过期或是很多近期优秀组件未被收录，所以小肆今天重新更新了内容并新建项目。提交的项目格式如下项目名称子标题相关介绍如果收录的项目有错误，可以通过反馈给小肆。前言本文的前身是源自github上的项目awesome-github-vue,但由于该项目上次更新时间为2017年6月12日，很多内容早已过期或是很多近期优...

williamwen1986 2019-08-23 14:50 评论0 收藏0
Vue 实现网易云音乐 WebApp

摘要：基于等开发一款移动端音乐，界面参考了安卓版的网易云音乐布局适配常见移动端。图标使用阿里巴巴图标库，中间的唱片旋转动画使用了实现。搜索功能实现功能搜索歌手歌单歌曲热门搜索数据节流上拉刷新保存搜索记录。基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等开发一款移动端音乐 WebApp，UI ...

Karuru 2019-08-22 17:16 评论0 收藏0