Vue2 + xgplayer 仿网易云音乐播放器

正在用 vue3、vite、typescript 仿 AppleMusic 重新写了一个移动端的播放器

体验一下 demo(建议手机)

前言

API 源自网易云音乐 NodeJS 版 API，非常感谢 API 提供者。

最近一项考试需要用到 vue2 所有没有选择 3，本身也很少接触 Audio API。发现如此全面的网易云音乐 API 后来踩踩坑，交互界面参考 Spotify、YouTuBe Music，后续考虑用 vue3、vite、typescript 练手。

目前仍在开发，如果对您有帮助，您可以点右上角 "Star" 支持一下 谢谢！

演示

1. 主页

2. 自动提取主题色

3. 播放 mv

4. 艺人详情

5. 播放列表

项目中遇到的问题和总结记录

• 虚拟无限滚动列表组件

• 用 Observer API 配合 Vue 自定义指令实现全局图片懒加载

• Vue3 中使用 mapActions 和 mapMutations 语法糖

• Canvas 提取图片主题色

• Canvas 压缩图片分辨率

• mouse 和 touch 冲突

技术栈

• vue2
• axios
• vue-cli
• less
• fetch

特点

• 推荐歌单
• 推荐 MV
• 推荐歌手
• 推荐新曲
• 视频播放器
• 音乐播放器
• 显示播放进度
• 拖动调整进度
• 全局图片懒加载
• 自动提取封面主题色
• 显示缓存进度
• 播放错误重连
• 播放列表
• 刷新恢复播放
• 搜索所有内容
• 搜索提示
• vip 提示
• 登录
• 自动连播
• 选择码率
• 随机播放
• 播放模式
• 歌词

我的博客

项目地址