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

发布时间：2026-01-06 07:15

用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

网址：用 Python + Vue3 打造超炫酷音乐播放器：网易云歌单爬取 + Three.js 波形可视化 https://mxgxt.com/news/view/1922319

⬅️上一篇：AI 时代品牌 GEO 优化破局

➡️下一篇：影石Insta360与华为智能穿

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