用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