用Python + Vue3 打造超炫酷音乐播放器
*项目背景:一直想做一个属于自己的音乐播放器,既能听歌,又有炫酷的视觉效果。于是,我结合 Python 爬虫能力 与 Vue3 前端生态,打造了一个集网易云音乐数据获取 + Web Audio 播放 + Three.js 3D 波形可视化于一体的音乐播放器。
它不仅功能完整,界面也极具科技感,非常适合前端/全栈开发者学习参考!
开源地址
- https://github.com/812781385/Super-Player.git,开源不易感谢star
效果展示
技术架构概览
后端(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