首页 > 其他分享 >奇妙音乐屋!一个基于Vue3高仿网易云PC端的音乐流媒体网站

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

时间:2024-07-11 09:53:38浏览次数:15  
标签:歌单 PC 音乐屋 高仿 https pnpm cloud

大家好,我是 Java陈序员

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

关注微信公众号:【Java陈序员】,获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。

项目介绍

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
项目地址: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/#/

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

标签:歌单,PC,音乐屋,高仿,https,pnpm,cloud
From: https://www.cnblogs.com/codechen8848/p/18294184

相关文章

  • 高仿imtoken钱包源码/获取助记词/获取私钥/自动归集
    简介:高仿imtoken钱包/获取助记词/获取私钥/自动归集带双端,无纯源码     下载源码 ......
  • 推出8端口, 16通道PCIe 3.0分组交换机PI7C9X3G816GP,让设计更灵活性,还具备先进的电源管
    PI7C9X3G816GP,采用灵活的2埠、3埠、4埠、5埠和8埠配置,支持16信道作业方式。设计这款切换器的目的在于满足追求先进效能的需求,尤为适用于网络和电信基础设施、安全系统、故障转移系统、人工智能和深度学习、NAS、HBA卡和数据中心产品应用项目。从-40°C到+85°C的宽......
  • PCA(主成分分析)--降维的基础算法
    一.原理简介PCA主成分分析,是一种使用较为广泛的数据降维算法,主要思想是将n维数据特征映射到k维上,这k维全新的正交数据特征称为主成分;PCA的工作就是从原始的空间中顺序地找一组相互正交的坐标轴,新的坐标轴的选择与数据本身是密切相关的。其中,第一个新坐标轴选择是原始数据......
  • 易优eyoucms在手机端下,访问PC端自动跳转手机网站的代码
    首先要区分网站是自适应还是分离式模板,比如:自适应=PC端和手机端共用模板,分离式=PC端和手机端分开模板以下代码只需在PC端模板里添加,移动端模板不需要添加。如果是分离式模板,请在网站模板里的</head>之前加上以下代码: <metahttp-equiv="mobile-agent"content="format=xhtml;url......
  • RPC api与Rest api的区别 微服务 正反向代理
    参考链接:https://blog.csdn.net/weixin_43871785/article/details/129922143  RPC:本地化REST:国际化HTTP与RPC的关系就好比国际化与地方化的关系(可以认为标准的国际拳击手和随意的自由拳击手)。要进行跨企业服务调用时,往往都是通过HTTPAPI,虽然效率不高,但是通用,没有......
  • 12bit 两通道5.2G或单通道10.4G pcie采集卡
    12bit两通道5.2G或单通道10.4Gpcie采集卡是一款同时支持交流耦合与双极性宽带信号输入的高精度高速数据采集卡,它提供12位双通道5.2GS/s或单通道10.4GS,A/D采样变换,全功率模拟带宽(-3dB)8GHz。板载FPGA具备实时信号处理能力,板载DDR4内存容量达8GB,可以进行大数据量的实时信号处理,这......
  • GBPC5010-ASEMI逆变箱专用GBPC5010
    编辑:llGBPC5010-ASEMI逆变箱专用GBPC5010型号:GBPC5010品牌:ASEMI封装:GBPC-4批号:2024+现货:50000+最大重复峰值反向电压:1000V最大正向平均整流电流(Vdss):50A功率(Pd):大功率芯片个数:4引脚数量:4类型:整流方桥、整流桥正向浪涌电流:400A正向电压:1.20V封装尺寸:如图工作温度......
  • opc ua设备数据 转MQTT项目案例
    目录1 案例说明 12 VFBOX网关工作原理 13 准备工作 24 配置VFBOX网关采集OPCUA的数据 25 用MQTT协议转发数据 46 配置参数说明 47 上报内容配置 58 其他说明 89 案例总结 81 案例说明设置网关采集OPCUA设备数据把采集的数据转成MQTT协议转发给其他系统。2 VFBOX......
  • 面试官:Dubbo一次RPC调用会经过哪些环节?
    大家好,我是三友~~今天继续探秘系列,扒一扒一次RPC请求在Dubbo中经历的核心流程。本文是基于Dubbo3.x版本进行讲解一个简单的Demo这里还是老样子,为了保证文章的完整性和连贯性,方便那些没有使用过的小伙伴更加容易接受文章的内容,这里快速讲一讲Dubbo一个简单的Demo如果你已经......
  • KBPC5010-ASEMI逆变焊机专用KBPC5010
    编辑:llKBPC5010-ASEMI逆变焊机专用KBPC5010型号:KBPC5010品牌:ASEMI封装:KBPC-4正向电流(Id):50A反向耐压(VRRM):1000V正向浪涌电流:400A正向电压(VF):1.00V引脚数量:4芯片个数:4芯片尺寸:88MIL功率(Pd):大功率工作温度:-55°C~150°C类型:整流方桥、插件整流桥应用领域工业电源电焊......