奇妙音乐屋！一个基于Vue3高仿网易云PC端的音乐流媒体网站

项目介绍

vue3-cloud-music —— 一个主要基于 Vue3 + TypeScript + Vite 构建的高仿网易云 PC 端的音乐流媒体网站。

文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17052.html

功能特色：文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17052.html

• 兼容夜间模式，骨架屏加载显示
• 基于图片主色混入的 canvas 渐变背景
• 歌曲支持随机、顺序、单曲循环播放
• 自定义封装歌曲进度条，可点击拖拽切换到指定播放时间，添加 buffer 加载进度显示
• 歌词自动同步滚动高亮，滚动选择歌词切换播放时间
• 歌词底部头部基于当前所在滚动位置背景色添加虚化渐变遮罩
• 歌曲播放或暂停时 CD 旋转或停止旋转
• 支持歌单内部搜索歌曲、收藏歌单、编辑歌单、新建歌单
• 搜索歌曲或歌单，提供搜索建议、搜索历史记录缓存
• 支持扫码登录、编辑用户信息、签到、退出登录
• 支持添加喜欢的音乐，获取我创建的歌单和收藏的歌单
• 记忆当前滚动位置，刷新页面时更新滚动位置
• MV 列表，支持播放 MV
• 评论列表，支持点击评论、回复评论、添加评论、发表评论

技术栈：文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17052.html

• Vue3
• Vite
• Pinia
• Naive UI
• tailwindcss
• xgplayer

项目截图

文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17052.html

文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17052.html

文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17052.html

文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17052.html

文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17052.html

文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17052.html

文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17052.html

项目运行

推荐 Node 版本 14.18+/16+,推荐使用 pnpm 安装依赖！

1、拉取代码

git clone https://github.com/path-yu/vue3-cloud-music.git

2、安装依赖

pnpm install

3、运行

pnpm run dev

4、构建

pnpm run build

项目地址：https://github.com/path-yu/vue3-cloud-music
在线体验：https://cloud-music-eight-nu.vercel.app/#/discovery

最后

推荐的开源项目已经收录到 GitHub 项目，欢迎 Star：

https://github.com/chenyl8848/great-open-source-project

或者访问网站，进行在线浏览：

https://chencoding.top:8090/#/