MagicMusic

🎵帅气的手机端音乐播放器(vue vue-router vuex flex ...)

358
77
Vue

MagicMusic

前言:在最近的一个外包项目中包联盟中使用到了video,遇到了好多坑。突发奇想来踩一踩audio的坑😀,果然一入深似海,👇下面将分享我的DIY之路-Vue音乐播放器。
注:本项目为开源项目,不能用于商业应用,仅供学习。

[温馨提示:pc浏览f12手机模式最佳,手机建议wifi下访问,低版本浏览器可能有兼容性问题]

demo地址: http://hzzly.net/magic-music/

示范图片1 示范图片1 示范图片3

欢迎大家的star啦😄~

Build Setup

# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report

API文档

$ git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git
$ npm install
$ npm start

👉老铁们,准备发车(技能点):

👉坐好,出发

实现的功能

1、首页

  • [x] 个性推荐
  • [x] 歌手列表
  • [x] 排行榜
  • [x] 搜索

2、底部播放控件

  • [x] 播放
  • [x] 暂停
  • [x] 下一曲
  • [x] 播放进度条

3、播放页面

  • [x] 上一曲
  • [x] 播放
  • [x] 暂停
  • [x] 下一曲
  • [x] 播放进度条[弧形进度条]
  • [x] 歌词滚动
  • [x] 播放的歌词高亮
  • [ ] 播放模式[单曲循环、列表循环、随机播放]

4、播放列表

  • [x] 播放歌曲高亮
  • [x] 切歌(单击切歌)
  • [x] 删歌(点击右侧小X)
  • [x] 清空播放列表
  • [x] 本地缓存播放列表

5、排行榜

  • [x] 热门排行榜
  • [x] 排行榜里的歌曲(单击播放)
  • [x] 播放全部

6、音乐搜索

输入搜索关键词

  • [x] 单曲(单击或点击歌曲操作(…)添加至音乐播放列表,部分音乐会存在版权问题无法播放)
  • [x] 歌手
  • [x] 专辑
  • [x] 歌单
  • [x] 用户

7.个人中心

  • [x] 我喜欢的
  • [x] 最近听的

8.侧边栏

  • [x] 头像
  • [x] 菜单
    • [x] 个人中心

第一版文章:DIY一个自己的音乐播放器

第二版文章:DIY一个人自己的音乐播放器2.0来袭

车已到站✌️。

不知不觉写了这么多,老铁们凑合这看吧😁。
MagicMusic还在不断努力的改进,觉得还行的可以点个star,你的star是我继续开源创作的动力,谢谢!!!