抓取网页音频(浏览器获取录音的创建实例启动录音实例上有个state状态)

　　抓取网页音频(浏览器获取录音的创建实例启动录音实例上有个state状态)

　　一、整体实现的思路

　　页面录制的实现需要使用浏览器提供的MediaRecorder API，所以要实现页面录制，浏览器需要支持MediaStream Recording相关的功能，即浏览器可以获得浏览器的录制权限.

　　页面内容需要一个按钮来记录录音的开始和结束，以及一个播放录音的标签，然后设计具体的实现细节：首先，我们需要确定浏览器在进入页面时是否支持该API，如果是，则获取浏览器。获得权限后，我们的页面上分别有录制按钮和音频标签audio，然后我们需要设计在点击录制按钮时开始录制音频的逻辑（这一步的前提是我们需要创建 Recording 实例），然后开始录制和结束录制。录音结束后，我们把获取到的录音实例放到音频中，点击播放，就可以播放录音了。

　　二、详情及功能

　　浏览器访问录制权限

　　/*获取浏览器的录音权限，contraint是需要获取权限的列表*/

const constraints = { audio: true };

//返回的是Promise对象，因为需要等到用户确定授予权限的时候，我们才会处理下面的步骤,navigator是浏览器对象，我们就是通过navigator获取录音权限,成功回调的话就会获取到一个stream，然后将这个stream放入到我们下面创建的录音实例里面去

navigator.mediaDevices.getUserMedia(constraints)

　　创建录音实例

　　//通过该方法创建录音实例

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：处于静止状态，要么不启动，要么启动后停止。

　　录音：录音

　　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);

};

　　音频数据的采集

　　上面的按钮处理来自用户的交互，只负责开始或停止录制。音频数据也是从 MediaRecorder 实例通过*敏*感*词*其相应事件来完成的。

　　当录制开始时，它的 MediaRecorder.ondataavailable 事件将被触发。事件回调的入参为BlobEvent，从中获取的event.data就是我们需要的音频数据。因为数据是一块块生成的，所以需要临时存储在一个数组中。

　　const chunks = [];

mediaRecorder.ondataavailable = function(e) {

chunks.push(e.data);

};

　　当录制结束播放音频时，通过*敏*感*词*MediaRecorder.onstop事件将采集到的音频数据创建为Blob对象，然后通过URL.createObjectURL创建为html中标签可以使用的资源链接。

　　mediaRecorder.onstop = e => {

var blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });

chunks = [];

var audioURL = window.URL.createObjectURL(blob);

audio.src = audioURL;

};

　　三、详细完整的代码

　　

实现在网页上录音

record

record

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 = document.querySelector(".audio-player");

audioSrc.src = 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 = 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");

}

　　MediaRecorder 实例上有一个 state 状态，可以用来判断当前记录器的活动状态。一共有三个值：

　　inactive：处于静止状态，要么不启动，要么启动后停止。

　　录音：录音

　　paused：开始，但暂停，既不停止也不恢复。

　　这篇文章就结束了~