前言:聽到好聽的網頁 BGM,怎麼把它「帶走」?
瀏覽網頁時被背景音樂打動,想存下來做鈴聲、素材、收藏。現代瀏覽器開發者工具雖強大,但**最原始、最通用、無需外掛**的方法依然是:**查看網頁原始碼 → 定位音訊 URL → 直接下載**。
經典七步走 (IE 時代邏輯,現代瀏覽器同樣適用)
- 開啟目標網頁,確認音樂正在播放。
- 查看原始碼:
- IE/Edge/Chrome/Firefox:Ctrl+U 或右鍵 → 「檢視網頁原始碼」/「查看網頁源代碼」。
- 或開發者工具 F12 → 「Elements」/「偵測器」標籤。
- 搜尋音訊副檔名: Ctrl+F 輸入
.mid、.mp3、.wav、.ogg、.m4a、.aac、.flac … 逐個嘗試。
- 定位完整 URL: 搜尋結果通常形如
https://domain.com/path/music.mp3 或相對路徑 /music/bgm.mp3。複製**完整絕對 URL** (相對路徑需補全域名)。
- 新分頁貼上 URL → Enter → 瀏覽器直接播放或彈出「另存為」對話框。
- 另存為: 選擇資料夾、命名 (建議保留原副檔名) → 儲存。
- 驗證: 本地播放確認完整、音質正常。
進階場景與對策
| 場景 | 特徵 | 解決方案 |
| 音訊 URL 動態生成/加密/Token 保護 |
原始碼無直連,Network 面板見媒體請求 |
開發者工具 F12 → Network → 篩選 Media → 重新整理播放 → 找到媒體請求 → 右鍵「Open in new tab」/「Copy link address」 → 下載
| 音訊切片/串流 (HLS .m3u8 / DASH .mpd) |
非單一檔案,為播放清單 |
複製 .m3u8/.mpd URL → 用 FFmpeg / Streamlink / youtube-dl / yt-dlp / IDM / FDM 下載合併
| Flash/舊式嵌入 (<embed> / <object> / <bgsound>) |
原始碼可見參數 src="..." |
同樣搜尋 src 屬性值 → 補全域名 → 下載
| 音訊經 Base64 內嵌 / Blob URL |
原始碼見 data:audio/... 或 blob:... |
Base64 → 線上解碼工具存檔;Blob → Network 面板找真實請求
| 格式需轉換 (如 .mid → .mp3) |
下載後用 Format Factory / Freemake / FFmpeg / CloudConvert 轉碼
法律與道德邊界
- **個人欣賞/研究/非商業用途**通常屬合理使用灰色地帶。
- **商業使用、再發布、去水印販售** → **嚴重侵權**,須獲得版權授權或購買正版音樂庫 (AudioJungle, Epidemic Sound, Artlist 等)。
- 尊重創作者,支持正版,良性循環。
現代一鍵替代:瀏覽器擴充功能
- Audio Downloader Prime / Media Downloader / Video DownloadHelper / 簡單音樂下載器: 工具列圖示一鍵嗅探頁面所有音訊/視訊資源,批量下載、重命名、格式選擇。
- **原理相同**:自動化「Network 面板嗅探 + URL 解析 + 下載」。理解本文手動流程,遇到擴充功能失效時才能手動兜底。
結語
「查看原始碼 → 搜尋副檔名 → 直接下載」是**永遠不會過時的底層技能**。無論網頁技術如何演進 (HTML5, WebAudio, WASM, 串流媒體),**音訊最終必須以可下載的 URL 或串流清單形式傳遞給瀏覽器播放**,這就是我們的切入點。掌握開發者工具 Network 面板,配合 FFmpeg/yt-dlp,天下沒有下載不了的音訊 (加密/付費牆除外)。