Awesome

cloud-music

这是一个主要基于Vue3+TypeScript+Vite构建的高仿网易云pc端的音乐流媒体网站.

前言

为了探索最前沿的前端技术栈, 一切为了好玩, 肝代码不易,觉得喜欢的可以点个star,本项目仅供参考学习. 谢谢大家star.

常见问题

由于网易云服务器限制,加上ffmpeg需要设置COOP和COEP 导致获取媒体资源和图片会存在跨域问题, 可以使用Allow CORS: Access-Control-Allow-Origin 这个插件来解决, 使用项目部署在vercel,导致需要使用vpn访问, 导致图片和音频可能无法加载, 在clash添加一条规则将music.126.net, 类型选择DOMAIN-KEYWORD 域名设置成直连.

项目部署

本项目预览地址采用vercel部署, 推荐大家使用vercel部署, 部署步骤非常简单, fork本仓库,在vercel中导入该仓库,按照提示点击部署即可.

主要技术栈如下

Vue3: 用于快速构建web用户界面的框架.
naive-ui: 基于Vue3的组件库,可自定义主题,支持夜间模式.
Vite: 下一代的前端构建工具,支持HRM,TypeScript,JSX,开箱即用.
axios: 是用于浏览器和node.js的基于Promise的http库,用于请求Api.
dayjs: 轻量级,用于处理时间相关格式化问题的库.
color.js: 用于不可变颜色的转换和操作的JavaScript库.
eslint: 基于AST模式的JavaScript代码风格检查工具.
lodash: 实用JavaScript工具函数库,提供了类似防抖节流,深拷贝开箱即用的函数.
nanoid: 小型的安全的,用于生成唯一字符串id的JavaScript库.
normalize.css: 一个用于现代化的重置css的库,用于磨平各个浏览器之间不同样式的兼容问题.
pinia: 基于Proxy使用TypeScript编写的灵活的且类型安全的下一代Vue状态管理库.
qs: 安全的用于字符串序列化的库,通常用于处理请求参数.
rgbaster: 基于Promise的JavaScript库,用于从图像中提取主色.
vue-router4: 基于Vue3路由管理库
vue-virtual-scroller: 基于Vue的虚拟滚动JavaScript库.
xgplayer: 西瓜播放器(HTML5),带解析器,能节省流量提供开箱即用的HTML5视频播放器库
tailwindcss: 基于原子化css的实用程序优先的css框架,用于快速构建自定义用户界面.

功能亮点如下
基于图片主色混入的canvas渐变背景
歌曲随机,顺序,单曲循环播放.切换播放上一首,下一首.
自定义封装歌曲进度条,可点击拖拽切换到指定播放时间, 添加buffer加载进度显示.
歌词自动同步滚动高亮,滚动选择歌词切换播放时间, 歌词逐字播放.
歌词底部头部基于当前所在滚动位置背景色添加虚化渐变遮罩.
歌曲播放或暂停时cd旋转或停止旋转.
兼容夜间模式,骨架屏加载显示.
歌单内部搜索歌曲,收藏歌单,编辑歌单,新建歌单.
添加喜欢的音乐,获取我创建的歌单和收藏的歌单.
歌单列表下拉加载.
自定义图片懒加载,缓冲loading显示.
扫码登录,编辑用户信息,签到.退出登录.
记忆当前滚动位置.刷新页面时更新滚动位置.
搜索歌曲或歌单,提供搜索建议.搜索历史记录缓存.
mv列表,播放mv
评论列表,点击评论,回复评论,添加评论.发表评论
基于ffmpeg-wasm和IndexedDB缓存压缩歌曲数据到本地,实现离线播放.

项目预览

项目运行

推荐使用pnpm安装依赖，推荐node版本14.18+, 16+。建议使用nvm管理不同node版本，nvm安装前建议卸载当前已经安装的node。

nvm仓库

在首页点击Releases进入版本页面，下载最新版本即可 https://github.com/coreybutler/nvm-windows

pnpm 安装

npm i pnpm -g

依赖安装

pnpm i

运行

pnpm dev

构建

pnpm build

预览

pnpm preview