JavaScript實現頁面中錄音功能的方法

2024-05-06 16:51:47

字體：大中小

來源：轉載

供稿：網友

前言

頁面中實現錄音需要使用瀏覽器提供的 Media?Recorder API，所以前提是需要瀏覽器支持 MediaStream Recording 相關的功能。

以下代碼默認工作在 Chrome 環境中。

準備頁面

首先準備一個頁面，其中內容很簡單，一個錄音按鈕，一個用于播放的 <audio> 標簽。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>audio record</title></head><body> <div class="app">  <button class="record-btn">record</button>  <audio controls class="audio-player"></audio> </div> <script src="./recorder.js"></script></body></html>

獲取錄音權限

因為錄音需要使用設備的話筒，所以第一步應該是向用戶索要錄音的權限。這是通過 Media?Devices?.get?User?Media()
來完成的，其用法為：

var promise = navigator.mediaDevices.getUserMedia(constraints);

其中 constraints 為需要獲取的權限列表，這里只需要指定音頻 audio 即可。

其返回是個 Promise，因為用戶何時進行授權是不確定的。通過在 Promise 的回調中進行授權成功或失敗的處理。

在使用前需要判斷瀏覽器是否已經支持相應的 API，此時得到如下的代碼：

if (navigator.mediaDevices.getUserMedia) { const constraints = { audio: true }; navigator.mediaDevices.getUserMedia(constraints).then( stream => {  console.log("授權成功！"); }, () => {  console.error("授權失敗！"); } );} else { console.error("瀏覽器不支持 getUserMedia");}

其中成功回調里得到的入參 stream 為 MediaStream 對象。

此時運行后可看到瀏覽器展示出了讓用戶授權使用麥克風的提示。

JavaScript,頁面,錄音

向用戶索要麥克風使用權限

創建錄音實例

將上一步獲取到的 MediaStream 傳入 Media?Recorder 的構造器創建一個錄音器的實例。

var mediaRecorder = new MediaRecorder(stream);

啟動錄音

通過監聽頁面中錄音按鈕的點擊來啟動錄音。

const recordBtn = document.querySelector(".record-btn");const mediaRecorder = new MediaRecorder(stream);recordBtn.onclick = () => { mediaRecorder.start(); console.log("錄音中...");};

MediaRecorder 實例上有個 state 狀態，可用來判斷錄音器當前的活動狀態，總共有三種值：

inactive：處于休息狀態，要么是沒開始，要么是開始后已經停止。
recording：錄音中
paused：已經開始，但被暫停了，不是停止也沒有被恢復。

所以通過這個狀態，我們可以實現再次點擊按鈕時，結束錄音。

recordBtn.onclick = () => { if (mediaRecorder.state === "recording") {  mediaRecorder.stop();  recordBtn.textContent = "record";  console.log("錄音結束"); } else {  mediaRecorder.start();  console.log("錄音中...");  recordBtn.textContent = "stop"; } console.log("錄音器狀態：", mediaRecorder.state);};

音頻數據的獲取

上面按鈕處理來自用戶的交互，只負責啟動或停止錄音。音頻的數據還是從 Media?Recorder 實例上通過監聽其相應的事件來完成的。

當錄音開始時，會觸發其 MediaRecorder.ondataavailable 事件，從該事件回調的入參為 BlobEvent，從它身上取到 event.data 便是我們需要的音頻數據。因為數據是一段一段產生的，所以需要暫存到一個數組中。

const chunks = [];mediaRecorder.ondataavailable = function(e) { chunks.push(e.data);};

目前為止完成的代碼應該是這樣的：

recorder.js

JavaScript,頁面,錄音

錄音狀態的查看

錄音結束及音頻的播放

通過監聽 MediaRecorder.onstop 事件，將收集好的音頻數據創建成Blob 對象，然后通過 URL.createObjectURL 創建成 HTML 中 <audio> 標簽可使用的資源鏈接。

mediaRecorder.onstop = e => { var blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" }); chunks = []; var audioURL = window.URL.createObjectURL(blob); audio.src = audioURL;};

其中，在使用完收到到的音頻數據后，將 chunks 置空方便下次錄音時使用。

目前為止完成的代碼應該是這樣的：

recorder.js

運行

完成上面步驟后，實現了一個簡單的錄音功能，可通過此地址在線體驗。完整的代碼可在倉庫 wayou/audio-recorder 中獲取到。

相關資源