奇妙音乐屋!一个基于Vue3高仿网易云PC端的音乐流媒体网站
Java陈序员
2024年07月15日 21:51
收录于文集
共16篇
网易云音乐

大家好,我是 Java陈序员。

今天,给大家安利一个高仿网易云 PC 端的开源项目,界面精美、功能丰富!

项目介绍

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

功能特色:

  • 兼容夜间模式,骨架屏加载显示

  • 基于图片主色混入的 canvas 渐变背景

  • 歌曲支持随机、顺序、单曲循环播放

  • 自定义封装歌曲进度条,可点击拖拽切换到指定播放时间,添加 buffer 加载进度显示

  • 歌词自动同步滚动高亮,滚动选择歌词切换播放时间

  • 歌词底部头部基于当前所在滚动位置背景色添加虚化渐变遮罩

  • 歌曲播放或暂停时 CD 旋转或停止旋转

  • 支持歌单内部搜索歌曲、收藏歌单、编辑歌单、新建歌单

  • 搜索歌曲或歌单,提供搜索建议、搜索历史记录缓存

  • 支持扫码登录、编辑用户信息、签到、退出登录

  • 支持添加喜欢的音乐,获取我创建的歌单和收藏的歌单

  • 记忆当前滚动位置,刷新页面时更新滚动位置

  • MV 列表,支持播放 MV

  • 评论列表,支持点击评论、回复评论、添加评论、发表评论

技术栈:

  • Vue3

  • Vite

  • Pinia

  • Naive UI

  • tailwindcss

  • xgplayer

项目截图

项目运行

推荐 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

大家的点赞、收藏和评论都是对作者的支持,如文章对你有帮助还请点赞转发支持下,谢谢!