瀏覽器如何錄音、分析與合成聲音

網頁不只是播放音訊。取得明確授權後,它可以讀取麥克風音訊幀、建立處理節點、分析頻譜,也可以完全在本機合成音樂。

第一步永遠是取得權限

網頁透過 Media Capture and Streams 介面要求音訊輸入。瀏覽器應向使用者顯示權限提示,頁面只能在獲得授權後取得媒體串流。取得權限不代表網站一定要上傳錄音:串流可以只連到本機處理節點,也可以在使用者明確操作後再編碼並傳送。

安全設計需要同時說清楚「會使用麥克風」與「資料會去哪裡」。只顯示瀏覽器的權限圖示,不足以解釋保存、公開或刪除規則。

Web Audio 是一張音訊圖

Web Audio 以節點連線表示處理流程:麥克風或音訊檔案是來源,增益、濾波器與分析器是中間節點,喇叭或記憶體緩衝區則是輸出。AnalyserNode 可以提供最近一段訊號的時域資料,以及透過 FFT 得到的頻域資料;FFT 大小越大,頻率解析度通常越細,但運算量與時間窗也會更大。

MelodyCanvas 沒有麥克風輸入,它透過取樣緩衝區、音高移調與時間排程來合成音樂。FrostNote 則讀取麥克風音訊幀,在瀏覽器本機估算 F0,並把即時結果繪製在介面上。

如何選擇本機處理與伺服器端處理

方式優點限制與責任
瀏覽器本機低延遲,原始音訊可以不離開裝置,適合即時回饋與合成。受到裝置效能、瀏覽器差異與頁面生命週期限制,較複雜的模型不易執行。
伺服器端工具鏈統一,可以執行一致的音訊解碼、聲學特徵擷取或較大型模型。必須傳輸資料,因此需要明確說明保留時間、存取控制、錯誤清理與公開範圍。

CVoice 與 Insight 選擇伺服器端分析,以維持特徵實作的一致性;FrostNote 與 MelodyCanvas 則選擇本機路徑,以獲得即時互動。不存在一種對所有情境都最理想的單一方案。

「本機」也需要隱私意識

本機分析能減少上傳,但不代表完全沒有風險。頁面仍應只在需要時要求權限、停止未使用的媒體軌、釋放記憶體中的錄音,並避免利用音訊裝置特徵進行跨網站識別。W3C 規範也指出,音訊處理能力可能暴露裝置特徵,因此不應收集與產品目的無關的資訊。

判斷聲音網頁是否透明查看頁面是否有說明:何時會要求權限、原始音訊是否上傳、結果會保留多久、是否會公開播放、如何刪除,以及拒絕授權後是否仍能使用其他功能。

參考資料