一、整體實作的思想
- 頁面中實作錄音需要使用瀏覽器提供的MediaRecorder API,所以要實作頁面錄音就需要瀏覽器支持MediaStream Recording相關的功能，即瀏覽器能夠獲取瀏覽器的錄音權限，
- 頁面內容，需要一個記錄錄音開始和結束的按鈕，以及一個用于播放錄音的標簽<audio>
- 然后設計具體的實作細節：首先我們進入頁面需要判斷瀏覽器是否支持該API,如果支持的話，然后再獲取瀏覽器的錄音權限，獲取權限之后，我們的頁面上分別由錄音按鈕和播放音頻的標簽audio,然后我們就需要設計邏輯，在點擊錄音按鈕的時候就開始記錄音頻（實作這一步的前提是我們需要創建錄音實體），然后實作啟動錄音和結束錄音，錄音結束之后，我們就把獲取的錄音實體放在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>實作在網頁上錄音</title>
</head>
<body>
<div >
<button >record</button>
<audio controls >
</audio>
<button >record</button>
<audio controls >
</audio>
</div>
<script>
if (navigator.mediaDevices.getUserMedia) {
const constraints = { audio: true };
navigator.mediaDevices.getUserMedia(constraints).then(
stream => {
console.log("授權成功！");
const recordBtn = document.querySelector(".record-btn");
const mediaRecorder = new MediaRecorder(stream);
var chunks = [];
recordBtn.onclick = () => {
if (mediaRecorder.state === "recording") {
mediaRecorder.stop();
console.log(chunks)
mediaRecorder.onstop = e => {
var blob= new Blob(chunks, { type: "audio/ogg; codecs=opus" });
chunks = [];
var audioURL = window.URL.createObjectURL(blob);
const audioSrc = https://www.cnblogs.com/Annona/p/document.querySelector(".audio-player");
audioSrc.src = https://www.cnblogs.com/Annona/p/audioURL;
};
recordBtn.textContent = "record";
console.log("錄音結束");
} else {
mediaRecorder.start();
mediaRecorder.ondataavailable = function(e) {
chunks.push(e.data);
};
console.log(chunks)
console.log("錄音中...");
recordBtn.textContent = "stop";
}
console.log("錄音器狀態：", mediaRecorder.state);
};
},
() => {
console.error("授權失敗！");
}
);
} else {
console.error("瀏覽器不支持 getUserMedia");
}
if (navigator.mediaDevices.getUserMedia) {
const constraints1 = { audio: true };
navigator.mediaDevices.getUserMedia(constraints1).then(
stream1 => {
console.log("授權成功！");
const recordBtn1 = document.querySelector(".record-btn1");
const mediaRecorder1 = new MediaRecorder(stream1);
var chunks1 = [];
recordBtn1.onclick = () => {
if (mediaRecorder1.state === "recording") {
mediaRecorder1.stop();
//console.log(chunks)
mediaRecorder1.onstop = e => {
var blob1 = new Blob(chunks1, { type: "audio/ogg; codecs=opus" });
chunks1 = [];
var audioURL1 = window.URL.createObjectURL(blob1);
const audioSrc1 = document.querySelector(".audio-player1");
audioSrc1.src = https://www.cnblogs.com/Annona/p/audioURL1;
};
recordBtn1.textContent = "record";
console.log("錄音結束");
} else {
mediaRecorder1.start();
mediaRecorder1.ondataavailable = function(e) {
chunks1.push(e.data);
};
//console.log(chunks)
console.log("錄音中...");
recordBtn1.textContent = "stop";
}
console.log("錄音器狀態：", mediaRecorder1.state);
};
},
() => {
console.error("授權失敗！");
}
);
} else {
console.error("瀏覽器不支持 getUserMedia");
}
</script>
</body>
</html>
（這個代碼可以直接復制粘貼使用，查看效果，然后再一步步的學習細節）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/232401.html
標籤：JavaScript
上一篇：小程式使用canvas生成二維碼