網易雲音樂前端架構揭秘：單頁應用 (SPA) 與音頻持久化

核心結論

網易雲音樂 Web 版採用 **單頁應用 (Single Page Application, SPA)** 架構。頁面不整頁刷新，音頻播放器組件常駐 DOM，實現「換頁不斷音」。

關鍵技術點

1. 路由控制：使用 History API (pushState/replaceState) 或 Hash 模式 (#/playlist/123) 管理「虛擬頁面」狀態，URL 變化不觸發瀏覽器導航。
2. 組件化框架：Vue.js / React / Angular 等現代框架 (網易早期自研類 Vue 框架) 管理視圖層，實現局部更新。
3. 全域狀態管理：Vuex / Redux / MobX 存儲播放隊列、當前播放索引、播放狀態、用戶資訊等，跨路由共享。
4. 音頻元素持久化：<audio> 元素或封裝的 Player 類掛載在 **App 根組件** 或 **Body 直屬容器**，不隨路由切換銷毀。切歌僅修改 src 屬性。
5. Service Worker / PWA：離線快取靜態資源，預載入下一首音頻，提升體驗。

簡化架構圖

index.html (單一入口)
├── App.vue (根組件，生命週期最長)
│   ├── <audio-player ref="player" />  ← 常駐，不銷毀
│   ├── <router-view />               ← 路由出口，切換子頁面
│   │   ├── HomeView
│   │   ├── PlaylistView
│   │   ├── SearchView
│   │   └── UserProfileView
│   └── Store (Vuex)                 ← 全域狀態：currentSong, playlist, playing

模仿建議

• 入門：create-react-app / vue create + react-router / vue-router + 狀態庫。
• 音頻核心：封裝 HTMLAudioElement 類，暴露 play(src), pause(), onEnded 事件，掛載全域 (Context/Store/Window)。
• 進階：Web Audio API 實現視覺化、均衡器、跨頁淡入淡出；IndexedDB 快取音頻元數據。

延伸閱讀

SPA 原理、History vs Hash 模式優劣、前端路由實現、音頻預載入策略、PWA 實戰。