如何使用JavaScript實現(xiàn)頁面中錄音功能-創(chuàng)新互聯(lián)

這篇文章主要介紹了如何使用JavaScript實現(xiàn)頁面中錄音功能，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

我們提供的服務有：成都做網站、成都網站設計、微信公眾號開發(fā)、網站優(yōu)化、網站認證、寧都ssl等。為超過千家企事業(yè)單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的寧都網站制作公司

首先準備一個頁面，其中內容很簡單，一個錄音按鈕，一個用于播放的 <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>

獲取錄音權限

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

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實現(xiàn)頁面中錄音功能

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

創(chuàng)建錄音實例

將上一步獲取到的 MediaStream 傳入 MediaRecorder 的構造器創(chuàng)建一個錄音器的實例。

var mediaRecorder = new MediaRecorder(stream);

啟動錄音

通過監(jiān)聽頁面中錄音按鈕的點擊來啟動錄音。

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

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

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

所以通過這個狀態(tài)，我們可以實現(xiàn)再次點擊按鈕時，結束錄音。

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

音頻數據的獲取

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

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

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

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

recorder.js

如何使用JavaScript實現(xiàn)頁面中錄音功能

錄音狀態(tài)的查看

錄音結束及音頻的播放

通過監(jiān)聽 MediaRecorder.onstop 事件，將收集好的音頻數據創(chuàng)建成Blob 對象，然后通過 URL.createObjectURL 創(chuàng)建成 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

運行

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何使用JavaScript實現(xiàn)頁面中錄音功能”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!

標題名稱：如何使用JavaScript實現(xiàn)頁面中錄音功能-創(chuàng)新互聯(lián)
文章來源：http://m.kartarina.com/article38/dicjsp.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網站制作、App設計、網頁設計公司、品牌網站設計、營銷型網站建設、搜索引擎優(yōu)化

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容