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

發(fā)布時(shí)間：2021-04-12 10:42:12 來(lái)源：億速云閱讀：589 作者：小新欄目：web開(kāi)發(fā)

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

首先準(zhǔn)備一個(gè)頁(yè)面，其中內(nèi)容很簡(jiǎn)單，一個(gè)錄音按鈕，一個(gè)用于播放的 <audio> 標(biāo)簽。

<!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>

獲取錄音權(quán)限

因?yàn)殇浺粜枰褂迷O(shè)備的話筒，所以第一步應(yīng)該是向用戶索要錄音的權(quán)限。這是通過(guò) MediaDevices.getUserMedia()
來(lái)完成的，其用法為：

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

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

其返回是個(gè) Promise，因?yàn)橛脩艉螘r(shí)進(jìn)行授權(quán)是不確定的。通過(guò)在 Promise 的回調(diào)中進(jìn)行授權(quán)成功或失敗的處理。

在使用前需要判斷瀏覽器是否已經(jīng)支持相應(yīng)的 API，此時(shí)得到如下的代碼：

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

其中成功回調(diào)里得到的入?yún)?stream 為 MediaStream 對(duì)象。

此時(shí)運(yùn)行后可看到瀏覽器展示出了讓用戶授權(quán)使用麥克風(fēng)的提示。

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

向用戶索要麥克風(fēng)使用權(quán)限

創(chuàng)建錄音實(shí)例

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

var mediaRecorder = new MediaRecorder(stream);

啟動(dòng)錄音

通過(guò)監(jiān)聽(tīng)頁(yè)面中錄音按鈕的點(diǎn)擊來(lái)啟動(dòng)錄音。

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

MediaRecorder 實(shí)例上有個(gè) state 狀態(tài)，可用來(lái)判斷錄音器當(dāng)前的活動(dòng)狀態(tài)，總共有三種值：

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

所以通過(guò)這個(gè)狀態(tài)，我們可以實(shí)現(xiàn)再次點(diǎn)擊按鈕時(shí)，結(jié)束錄音。

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

音頻數(shù)據(jù)的獲取

上面按鈕處理來(lái)自用戶的交互，只負(fù)責(zé)啟動(dòng)或停止錄音。音頻的數(shù)據(jù)還是從 MediaRecorder 實(shí)例上通過(guò)監(jiān)聽(tīng)其相應(yīng)的事件來(lái)完成的。

當(dāng)錄音開(kāi)始時(shí)，會(huì)觸發(fā)其 MediaRecorder.ondataavailable 事件，從該事件回調(diào)的入?yún)?BlobEvent，從它身上取到 event.data 便是我們需要的音頻數(shù)據(jù)。因?yàn)閿?shù)據(jù)是一段一段產(chǎn)生的，所以需要暫存到一個(gè)數(shù)組中。

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

目前為止完成的代碼應(yīng)該是這樣的：

recorder.js

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

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

錄音結(jié)束及音頻的播放

通過(guò)監(jiān)聽(tīng) MediaRecorder.onstop 事件，將收集好的音頻數(shù)據(jù)創(chuàng)建成Blob 對(duì)象，然后通過(guò) URL.createObjectURL 創(chuàng)建成 HTML 中 <audio> 標(biāo)簽可使用的資源鏈接。

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

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

目前為止完成的代碼應(yīng)該是這樣的：

recorder.js

運(yùn)行

完成上面步驟后，實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的錄音功能，可通過(guò)此地址在線體驗(yàn)。完整的代碼可在倉(cāng)庫(kù) wayou/audio-recorder 中獲取到。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何使用JavaScript實(shí)現(xiàn)頁(yè)面中錄音功能”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽