关于音乐播放器项目详细解析

 

 

项目码云地址：https://gitee.com/Snow28/MyMusic（如果觉得可以，麻烦给我鼓励一个star）

这个是基于Vue2.0，vuex，vue-router，axios和html5的flexible box布局与及css3的transform，animation，transition组成。

技术栈

• vue
• vue-router
• vuex
• axios
• jsonp
• better-scroll
• good-storage

---

主要功能：

• 歌曲播放（从搜索历史添加到播放列表，展示最近播放）
• 根据歌曲进度展示歌词，提供进度条
• 歌曲收藏
• 个人页面：显示个人的最近播放和个人收藏
• 排行榜单页面： 几种榜单，详情页显示排行数字
• 歌曲搜索（按人名，按歌名，删除搜索历史，无法搜索到歌曲页面）： 搜索框监听内容变化显示搜索结果，搜索结果上拉加载，点击搜索结果添加到当前播放列表并播放该歌曲，搜索为歌手跳转歌手详情页；保存搜索历史，显示热门搜索标签
• 热门歌单列表页面
• 歌手页面：按姓氏首字母排列，点击侧面字母栏跳转到对应歌手区域
• 推荐页面：推荐歌单
• 播放页面： 旋转大头像，播放时间，进度条，切换歌曲（上一首，下一首） ，收藏，播放模式（单曲-顺序-随机），歌词页，播放按钮，迷你底部播放栏（播放页收起时显示）

文件目录：

项目是由vue-cli脚手架搭建的，