Music Player

基于Vue的音乐播放器

  • QQ音乐播放源过一段时间就会更改,因此示例中的歌曲可能无法播放,如果大家有好用的播放源还希望能分享下,伤不起呀
  • 这个demo依然有许多隐藏的bug,还有许多功能待完善,抱着学习的态度我会一直更新完善它,如果大家发现这个player有什么问题可以发issue或是PR,我会尽量改正的,也欢迎star~~~

手机扫一扫预览:

图片描述

一、播放器基本功能

  • [x] 歌曲播放、切歌、进度控制
  • [x] 三种播放模式的切换
  • [x] 搜索歌手、歌曲
  • [x] 上拉加载功能
  • [x] 模拟登录跳转
  • [x] 收藏歌曲

二、概述

  • 下面图片可以看出,有许多页面采用了复用的组件,比如推荐歌单页(图2)、歌手详情页(图4)、排行榜详情页(图8),同时在这些组件中还有更加细分的基础组件。这样可以高度定制化组件,满足不同的需求,提高开发效率。
  • 核心是利用vuex做数据的传递,方便跟踪状态
  • Vue-Router实现单页面路由跳转
  • Vue-lazyLoad实现图片懒加载
  • fastclick解决移动端300ms延迟
  • 对搜索框搜索功能进行了节流,减少请求节约流量
  • 使用vue提供的异步组件配合webpack的代码分割实现路由懒加载
  • (2017.12.29新增)利用路由元信息的meta字段,通过watch $route动态改变transition的name,实现合理的动态路由切换过渡动画
  • (2017.12.30新增)利用localStorage实现收藏歌曲功能,且该功能需在登录状态下操作(未登录时点击收藏按钮会自动跳转登录页)

三、项目结构

│  App.vue                  //组件入口
│  main.js                  //js入口
│  
├─api                       //获取数据的文件
│      config.js                //公共配置
│      deslist.js               //热门歌单数据
│      lyric.js                 //歌词数据
│      rank.js                  //排行榜数据
│      rankDetail.js            //榜单详情数据
│      recommend.js             //轮播图数据
│      recommendDetail.js       //热门歌单详情数据
│      result.js                //搜索结果数据
│      search.js                //热搜关键词数据
│      singerdetail.js          //歌手详情数据
│      singerlist.js            //歌手列表数据
│      
├─baseComponents            //公用基础组件
│  ├─cannotfind                 
│  │      cannotfind.vue        //搜索结果为空
│  │      
│  ├─circleProgress
│  │      circleProgress.vue    //环形进度条
│  │      
│  ├─input
│  │      input.vue             //搜索框
│  │      
│  ├─loading
│  │      loading.svg
│  │      loading.vue           //加载中
│  │      
│  ├─music
│  │      music.vue             //歌单列表
│  │      
│  ├─progress
│  │      progress.vue          //进度条
│  │      
│  ├─scroll
│  │      scroll.vue            //better-scroll的封装
│  │      
│  ├─slider
│  │      slider.vue            //轮播图
│  │      
│  └─songRank
│          songrankcomplex.vue  //榜单歌曲排序
│          songranksimple.vue   //普通歌曲排序
│          
├─common                    //js工具库、样式、字体
│  ├─iconfont
│  │      demo.css
│  │      demo_fontclass.html
│  │      demo_symbol.html
│  │      demo_unicode.html
│  │      iconfont.css
│  │      iconfont.eot
│  │      iconfont.js
│  │      iconfont.svg
│  │      iconfont.ttf
│  │      iconfont.woff
│  │      
│  ├─js
│  │      config.js             //项目相关配置
│  │      dom.js                //DOM操作方法
│  │      jsonp.js              //jsonp的封装
│  │      mixins.js             //vue提供的复用功能
│  │      prefixStyle.js        //js中操作DOM添加前缀
│  │      singer.js             //Singer类
│  │      song.js               //Song类
│  │      localstorage.js       //自制vue的localstorage插件
│  │      utils.js              //函数工具库
│  │      
│  └─stylus                 //stylus文件
│          base.styl
│          index.styl
│          mixin.styl
│          myicon.styl
│          reset.styl
│          variable.styl
│          
├─components                //业务组件
│  ├─header             
│  │      header.vue            //公用头部
│  │      logo@2y.png
│  │      logo@3y.png
│  │      
│  ├─player                     
│  │      player.vue            //播放器组件
│  │      
│  ├─rank                       
│  │      rank.vue              //排行榜组件
│  │      
│  ├─rankDetail
│  │      rankDetail.vue        //排行榜详情组件
│  │      
│  ├─recommend
│  │      recommend.vue         //首页
│  │      
│  ├─recommendDetail
│  │      recommendDetail.vue   //首页详情组件
│  │      
│  ├─result
│  │      result.vue            //搜索结果组件
│  │      
│  ├─search
│  │      search.vue            //搜索页组件
│  │      
│  ├─singer
│  │      singer.vue            //歌手列表组件
│  │      
│  ├─singerDetail
│  │      singerDetail.vue      //歌手详情组件
│  │      
│  ├─song
│  │      song.vue              //歌曲组件
│  │
│  ├─login
│  │      login.vue             //登录组件
│  │      
│  ├─person
│  │      person.vue            //个人中心     
│  └─tab
│          tab.vue              //头部导航组件
│          
├─router                    //路由配置
│      index.js
│      
└─vuex                      //vuex配置
        actions.js              //dispatch
        getters.js              //计算state数据
        index.js                //vuex入口
        mutations-types.js      //mutations常量
        mutations.js            //commit
        state.js                //基础数据

本文固定链接: http://www.js-code.com/vue-js/vue-js_25544.html