一、引言

在現代 Web 應用開發中，音頻處理功能變得越來越重要。本文將詳細介紹如何使用 uniapp 結合 Vue3 語法在瀏覽器環境中實現音頻錄制、停止、保存、播放、轉碼以及實時音頻輸出等一系列功能。通過深入剖析代碼結構和功能實現細節，幫助讀者全面理解和掌握相關技術，以便在自己的項目中應用或進行進一步的拓展和優化。

二、代碼整體結構概述

這段代碼是一個 Vue3 組件的模板和腳本部分，用于在 uniapp 項目中實現音頻錄制相關功能。模板部分包含了用于控制音頻錄制、停止、播放的按鈕，以及顯示音頻 Base64 數據和音頻頻率進度條的元素。腳本部分則通過引入 Vue3 的相關函數和對象，定義了一系列變量和函數來實現音頻錄制的核心邏輯，包括獲取音頻流、實例化媒體錄制器、處理錄制數據、分析音頻頻率、轉換音頻格式以及與界面元素的交互等。

三、詳細功能實現解析

（一）數據變量定義

1. audioBase64：使用 ref 函數創建的響應式數據，用于存儲音頻的 Base64 編碼數據，初始值為空字符串。它將在音頻錄制完成并轉換為 Base64 格式后被賦值，以便在界面上顯示或進行其他處理。
2. mediaRecorder：用于存儲媒體錄制器實例。通過 navigator.mediaDevices.getUserMedia 獲取音頻流后，利用該實例來啟動和停止音頻錄制，并處理錄制過程中產生的數據塊。
3. audioStream：存儲獲取到的音頻流對象。該音頻流是從用戶設備的音頻輸入設備（如麥克風）獲取的，是后續音頻錄制和分析的基礎數據來源。
4. audioContext：AudioContext 實例，用于創建和管理音頻處理節點，如音頻分析器等。它提供了對音頻硬件的訪問和音頻處理的上下文環境。
5. analyser：音頻分析器實例，通過 audioContext.createAnalyser 創建。它用于對音頻流進行分析，獲取音頻的頻率數據等信息，以便實現實時音頻輸出（如進度條顯示音頻頻率變化）。
6. isRecording：布爾類型的響應式數據，標記當前是否正在進行音頻錄制，初始值為 false。通過該變量控制錄制按鈕的禁用狀態，避免重復錄制操作。
7. hasRecorded：布爾類型的響應式數據，標記是否已經有錄制的音頻內容，初始值為 false。用于控制播放音頻按鈕的禁用狀態，只有在有錄制內容后才能播放。
8. frequencyProgress：響應式數據，用于存儲音頻頻率對應的進度條進度值，初始值為 0。根據音頻分析器獲取的頻率數據進行映射和更新，以在界面上直觀地展示音頻頻率的變化情況。
9. recordedChunks：數組，用于存儲每次錄制的音頻數據塊。在錄制過程中，媒體錄制器的 ondataavailable 事件會將數據塊添加到該數組中，最后用于生成完整的音頻 Blob 對象。
10. audioContextClosed：布爾變量，標記 AudioContext 是否已經關閉，初始值為 false。用于避免重復關閉 AudioContext 導致的錯誤。
11. halfSecondUpdateIntervalId：用于存儲每 0.5 秒更新頻率的定時器標識。通過該標識可以在合適的時候清除定時器，避免定時器的累積和不必要的資源占用。

（二）音頻錄制功能 - startRecording 函數

1. 首先，函數會檢查當前是否已經在錄制音頻，如果 isRecording.value 為 true，則直接返回，不進行重復錄制操作。
2. 若未在錄制，則調用 resetRecordingData 函數重置錄制相關數據。這個函數會清空 recordedChunks 數組，將 hasRecorded.value 設置為 false，關閉 audioContext（如果未關閉）并斷開 analyser 的連接，同時將 frequencyProgress.value 設置為 0。這樣做的目的是為了確保每次新的錄制都是在一個干凈的狀態下開始，清除之前錄制可能留下的殘留數據和狀態。
3. 接著使用 navigator.mediaDevices.getUserMedia 方法獲取音頻流，傳入的參數 { audio: true } 表示只獲取音頻設備的媒體流。如果獲取成功，將音頻流賦值給 audioStream 變量，并在控制臺打印獲取到的音頻流信息。然后創建 MediaRecorder 實例，傳入獲取到的音頻流，并啟動錄制，即 mediaRecorder.start()。
4. 為 mediaRecorder 的 ondataavailable 事件注冊回調函數，當有可用的音頻數據塊時，會觸發該事件。在回調函數中，判斷數據塊的大小是否大于 0，如果是，則將數據塊添加到 recordedChunks 數組中，用于后續生成完整的音頻文件。
5. 調用 initAudioAnalyzer 函數初始化音頻分析器，傳入獲取到的音頻流作為參數。這個函數將在后面詳細介紹，它主要用于創建音頻分析器實例，并設置相關參數，以及啟動定時器來定期更新音頻頻率數據并反映在進度條上。
6. 最后，將 isRecording.value 設置為 true，表示當前正在錄制音頻，同時界面上的“開始錄制”按鈕將被禁用，“停止錄制”按鈕將被啟用。

（三）音頻分析器初始化 - initAudioAnalyzer 函數

1. 首先檢查 audioContextClosed 變量，如果已經關閉，則直接返回，不再進行初始化操作，避免重復創建和初始化音頻分析器導致的錯誤。
2. 創建 AudioContext 實例并賦值給 audioContext 變量，通過 audioContext.createMediaStreamSource 方法從傳入的音頻流創建音頻源，并連接到音頻分析器 analyser。
3. 設置音頻分析器的參數，如 fftSize 設置為 2048，這個參數決定了頻率分析的精度和分辨率。然后獲取分析器的頻率數據緩沖區長度 bufferLength，并創建一個 Uint8Array 類型的數組 dataArray 用于存儲頻率數據。
4. 定義了一個名為 updateFrequency 的函數，用于每秒更新一次音頻頻率數據。在這個函數中，首先通過 analyser.getByteFrequencyData 方法獲取當前音頻的頻率數據并存儲到 dataArray 中，然后計算頻率數據的總和 sum，并求出平均頻率值 average。接著將平均頻率值進行映射處理，將其轉換為適合進度條顯示的值 mappedValue，通過 Math.min 函數確保該值不超過 100，并使用 Math.round 函數進行四舍五入取整。最后在控制臺打印原始平均頻率值和映射后的進度條值。通過 setInterval 函數以每秒一次的頻率調用 updateFrequency 函數，并將定時器的標識存儲在 intervalId 變量中，以便在錄制停止時清除該定時器。
5. 為 mediaRecorder 的 onstop 事件注冊回調函數，在錄制停止時，清除之前創建的每秒更新頻率的定時器。
6. 新增了一個每 0.5 秒更新頻率的定時器邏輯。通過 setInterval 函數創建一個定時器，每隔 0.5 秒執行一次匿名函數。在匿名函數中，同樣獲取音頻頻率數據并計算平均頻率值和映射后的進度條值，然后直接將映射后的進度條值賦值給 frequencyProgress.value，這樣就可以實現進度條根據音頻頻率實時跳動的效果。將這個定時器的標識存儲在 halfSecondUpdateIntervalId 變量中，以便在后續停止錄制或其他合適的時機清除該定時器。

（四）音頻停止錄制功能 - stopRecording 函數

1. 首先檢查 mediaRecorder 是否存在且當前狀態是否為“recording”（正在錄制），如果滿足條件，則調用 mediaRecorder.stop() 停止錄制。
2. 為 mediaRecorder 的 onstop 事件注冊回調函數，在錄制停止后執行以下操作：
   • 遍歷 audioStream 的所有音頻軌道，并調用 stop 方法停止音頻流，釋放音頻設備資源。
   • 如果 audioContext 存在且未關閉，調用 audioContext.close() 方法關閉音頻上下文，將 audioContextClosed 設置為 true，表示音頻上下文已關閉，避免重復關閉操作。
   • 如果 analyser 存在，調用 analyser.disconnect() 方法斷開音頻分析器與音頻源的連接，釋放相關資源。
   • 調用 convertAudioToBase64 函數將錄制的音頻數據轉換為 Base64 格式，并存儲在 audioBase64.value 中，以便在界面上顯示音頻數據。
   • 將 isRecording.value 設置為 false，表示錄制已停止，“開始錄制”按鈕將被啟用，“停止錄制”按鈕將被禁用；將 hasRecorded.value 設置為 true，表示已經有錄制的音頻內容，“播放音頻”按鈕將被啟用；將 frequencyProgress.value 設置為 0，重置進度條。
   • 最后，清除每 0.5 秒更新頻率的定時器，通過 clearInterval 函數傳入 halfSecondUpdateIntervalId 來實現。

（五）音頻播放功能 - playAudio 函數

1. 使用 recordedChunks 數組創建一個 Blob 對象，指定類型為 audio/mp3，表示創建的 Blob 是一個音頻文件，格式為 MP3。
2. 通過 URL.createObjectURL 方法創建一個對象 URL，該 URL 指向創建的音頻 Blob 對象，以便在瀏覽器中播放音頻。
3. 創建一個 Audio 元素實例，傳入創建的對象 URL，然后調用 play 方法播放音頻，從而實現播放錄制的音頻功能。

（六）音頻轉換為 Base64 功能 - convertAudioToBase64 函數

1. 創建一個 FileReader 實例，用于讀取文件數據并轉換為特定格式。
2. 使用 recordedChunks 數組創建一個音頻 Blob 對象，類型為 audio/mp3。
3. 為 FileReader 的 onloadend 事件注冊回調函數，當讀取操作完成時，將讀取結果（即音頻的 Base64 編碼數據）賦值給 audioBase64.value，以便在界面上顯示音頻的 Base64 數據。
4. 如果音頻 Blob 對象存在，調用 reader.readAsDataURL 方法開始讀取音頻數據并轉換為 Base64 格式。

（七）生命周期鉤子函數

1. onMounted：在組件掛載時執行的生命周期鉤子函數，目前該函數體為空，可根據實際需求在組件掛載后進行一些初始化操作，如設置界面元素的初始狀態或注冊一些全局事件監聽等。
2. onUnmounted：在組件卸載時執行的生命周期鉤子函數。在該函數中，如果 audioStream 存在，遍歷其音頻軌道并停止音頻流，釋放音頻設備資源；如果 audioContext 存在且未關閉，調用 audioContext.close() 方法關閉音頻上下文，確保在組件卸載時清理所有與音頻相關的資源，避免內存泄漏和其他潛在問題。

四、代碼的優勢與可擴展性

1. 功能完整性：該代碼實現了音頻錄制的完整流程，包括開始錄制、停止錄制、播放錄制音頻、將音頻轉換為 Base64 格式以及實時音頻頻率分析和進度條展示等功能，能夠滿足大多數基本的音頻處理需求。
2. 實時反饋：通過音頻分析器和定時器的配合，實現了音頻頻率的實時分析和進度條的實時更新，為用戶提供了直觀的音頻錄制狀態反饋，增強了用戶體驗。
3. 可擴展性：代碼結構相對清晰，各個功能模塊相對獨立，易于進行擴展和修改。例如，可以進一步優化音頻分析算法，增加更多音頻特效處理功能，或者與后端服務器進行交互，將錄制的音頻上傳到服務器進行存儲或進一步處理等。
4. 兼容性：基于瀏覽器的標準 API（如 navigator.mediaDevices.getUserMedia、MediaRecorder、AudioContext 等）實現，在現代主流瀏覽器中具有較好的兼容性，可以方便地應用于各種基于瀏覽器的項目中，無論是桌面端還是移動端瀏覽器。

五、可能的優化方向

1. 錯誤處理增強：目前代碼中雖然對獲取音頻設備權限失敗等錯誤進行了簡單的控制臺打印處理，但可以進一步完善錯誤處理機制，例如向用戶顯示友好的錯誤提示信息，引導用戶檢查設備設置或權限配置等。
2. 音頻格式支持多樣化：目前代碼中僅將錄制的音頻轉換為 MP3 格式并進行處理，如果需要支持更多音頻格式（如 WAV、OGG 等），可以進一步擴展代碼，根據用戶需求或系統配置動態選擇音頻格式進行處理。
3. 性能優化：在音頻分析和定時器操作過程中，可能會存在一定的性能開銷，尤其是在處理長時間錄制或高頻率音頻數據時。可以考慮優化音頻分析算法，減少不必要的計算和數據處理，或者采用更高效的定時器管理策略，避免定時器累積和頻繁觸發導致的性能問題。
4. 用