当前位置: 首页 > news >正文

用 Python + Vue3 打造超炫酷音乐播放器:网易云歌单爬取 + Three.js 波形可视化

用Python + Vue3 打造超炫酷音乐播放器


*项目背景:一直想做一个属于自己的音乐播放器,既能听歌,又有炫酷的视觉效果。于是,我结合 Python 爬虫能力 与 Vue3 前端生态,打造了一个集网易云音乐数据获取 + Web Audio 播放 + Three.js 3D 波形可视化于一体的音乐播放器。
它不仅功能完整,界面也极具科技感,非常适合前端/全栈开发者学习参考!

开源地址

  • https://github.com/812781385/Super-Player.git,开源不易感谢star

效果展示

1

技术架构概览

后端(Python)

  • 框架:FastAPI(高性能、自动文档)
  • 核心功能:
    • 爬取网易云音乐 热歌榜(Toplist)
    • 支持按歌名/歌手搜索
    • 获取歌词(含时间轴)
    • 代理播放音乐(绕过网易云防盗链)
    • 加密处理:使用 pycryptodome 模拟网易云 Web API 的 AES + RSA 加密

前端(Vue3 + Three.js)

  • 框架:Vue3 + TypeScript + Vite
  • 核心功能:
    • 歌曲列表展示(热榜 & 搜索结果)
    • 歌词滚动同步
    • Web Audio API 解析音频数据
    • Three.js 渲染 3D 动态波形(频谱 + 粒子效果)
    • 自定义 CSS 动画

后端实现亮点

1. 网易云 API 加密破解

网易云 Web 端接口使用了双重 AES 加密 + RSA 加密,我们通过逆向分析,用 Python 复现了加密逻辑:

def _encrypt_data(self, data: dict) -> dict:d = json.dumps(data, separators=(',', ':'))g = '0CoJUm6Qyw8W8jud'  # 第一层 AES 密钥i = self._random_str(16)  # 第二层密钥(随机)# 双重 AES 加密params = _aes_encrypt(_aes_encrypt(d, g), i)# RSA 加密第二层密钥enc_sec_key = self._rsa_encrypt(i, '010001', modulus)return {'params': params, 'encSecKey': enc_sec_key}

2. 安全代理播放

为防止直接暴露网易云链接,后端提供 /playMusic?id=xxx&token=xxx 接口,结合:

Token 验证(防未授权调用)
Referer 白名单(防盗链)
请求限流(防刷)

前端可视化:Three.js + Web Audio

1. Web Audio 解析音频流

const audio = new Audio(url);
const audioCtx = new (window.AudioContext || (window as any).webkitAudioContext)();
const source = audioCtx.createMediaElementSource(audio);
const analyser = audioCtx.createAnalyser();source.connect(analyser);
analyser.connect(audioCtx.destination);
analyser.fftSize = 2048;// 获取频谱数据
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteFrequencyData(dataArray);

2. Three.js 渲染 3D 波形

  • 创建粒子系统或柱状图
  • 每帧更新粒子高度 = 频谱数据
  • 添加颜色渐变、旋转动画、相机跟随
// 示例:更新波形柱高度
for (let i = 0; i < bars.length; i++) {const value = dataArray[i] / 256;bars[i].scale.y = value * 10;bars[i].material.color.setHSL(value * 0.5, 1, 0.5);
}

💡 效果:音乐节奏越强,波形越高,颜色越鲜艳,沉浸感拉满!

视频效果

[video(video-X3UUyLJa-1760431001302)(type-bilibili)(url-https://player.bilibili.com/player.html?aid=115371579280113)(image-https://i-blog.csdnimg.cn/img_convert/5ffa57d40cae86d5eed3b2b6df26e7cf.jpeg)(title-录屏2025-10-14 16.14.38)]


如何运行?

后端(python)

# 安装依赖(python版本>=3.10)
pip install -r requirements.txt# 启动
python main.py

前端(Vue3)

# 安装依赖
yarn install# 启动
yarn run dev

📌 总结与展望

这个项目不仅实现了完整的音乐播放功能,还通过 Three.js + Web Audio 带来了惊艳的视觉体验。它展示了:

  • Python 爬虫 + 加密逆向的实战能力
  • Vue3 响应式 + TypeScript 的工程化开发
  • Web Audio 与 3D 图形的创新结合

未来可扩展方向:

  • 歌单收藏、历史记录
  • 用户登录
  • 多平台支持(QQ音乐、酷狗)
  • PWA 离线播放

💬 结语

如果你也喜欢音乐与代码的结合,不妨试试这个项目!欢迎 Star / Fork / 提 Issue,一起打造更酷的播放器!

GitHub 地址:https://github.com/812781385/Super-Player.git

http://www.hskmm.com/?act=detail&tid=30986

相关文章:

  • 读书笔记:时间戳(TIMESTAMP)类型:比日期更强大的时间管理工具
  • python对比“解包赋值”和 match 语句中的“解构”
  • 2025 防静电/耐高温/耐低温/耐湿耐水/防油/耐酸耐碱/进口原料塑烧板厂家推荐榜单:聚焦高效过滤解决方案
  • 2025 优质的数控/空心管/螺旋/钢带/方向盘/伺服/液压/不锈钢带/桶箍/抱箍/卡箍/弹簧打圈机厂家推荐榜单:聚焦精度与服务的实力之选
  • 在线PS(Photoshop网页版)如何加马赛克,保护隐私的小技巧
  • 2025 深圳点胶机厂家实用推荐榜:从精密制造到行业适配的优选指南
  • 观点分享:Oracle数据库GRID升级的案例的闲聊
  • 2025 广东洗头机厂家推荐榜:从家用到商用的品质之选
  • 2025北京优质拆迁/征地/征拆/动迁/腾退/强拆/房产/烂尾楼/行政诉讼/行政赔偿律师事务所所推荐:聚焦专业实力与服务价值
  • excel单元格粘贴显示科学计数法,需要展示完整的字符串的解决方法
  • 2025 佛山高尔夫模拟器厂家推荐:从家庭到专业场景的靠谱之选
  • UML复习
  • 跨越三年周期、几十部门、上千零部件:庞大整车研发项目如何被清晰掌控?
  • 【SPIE出版】2025计算机视觉和影像计算国际学术会议
  • 2025 年济南画室最新推荐排行榜权威发布,含小班教学、全封闭管理机构及素描课、寒暑假班、高考集训选择指南
  • 2025 年贴片机优质厂家最新推荐排行榜:涵盖高精度高速固晶点胶等设备,助力企业精准选品高速/固晶/点胶/芯片/光模块贴片机厂家推荐
  • 2025 年真空共晶回流焊炉生产厂家最新推荐排行榜:聚焦国内优质品牌,助力企业精准采购真空共晶炉/真空回流焊炉/真空甲酸炉/半导体焊接炉厂家推荐
  • 高速采集卡:解锁海量数据洪流,驱动精准测量新时代
  • 基于MATLAB的HOG+SVM行人检测
  • 2025法兰保护罩厂家推荐:荣专科技,专业制造防溅保温优质产品!
  • 网络文件共享系统NFS服务搭建
  • 在CentOS 7.9系统上使用Docker部署RuoYi-Vue前后端分离系统
  • C# 泛型懒汉单例类
  • uni-app x使用uview-plus
  • MyEMS 支撑公共建筑低碳运营:多维度能耗建模逻辑与运行优化策略
  • 实时检测机器人广告点击的深度学习技术
  • MATLAB频散曲线绘制与相速度群速度分析
  • 密码算法的应用
  • 开源生态视角下 MyEMS 的能源管理系统国产化实践:架构设计与自主可控路径
  • 【IEEE出版】第七届机器学习、大数据与商务智能国际会议(MLBDBI 2025)