用 Python + Vue3 打造超炫酷音乐播放器：网易云歌单爬取 + Three.js 波形可视化
用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 / 256;
bars.scale.y = value * 10;
bars.material.color.setHSL(value * 0.5, 1, 0.5);
}
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ 感谢分享 喜欢鼓捣这些软件，现在用得少，谢谢分享！ 谢谢分享，试用一下 感谢分享
页:
[1]