[英]Recording browser audio using navigator.mediaDevices.getUserMedia
I am recording browser audio input from the microphone, and sending it via websocket to a nodeJs service that writes the stream to a .wav file. 我正在记录来自麦克风的浏览器音频输入,并将其通过websocket发送到将流写入.wav文件的nodeJs服务。
My problem is that the first recording comes out fine, but any subsequent recordings come out sounding very slow, about half the speed and are therefore unusable. 我的问题是,第一个录音效果很好,但是随后的任何录音听起来都很慢,大约是速度的一半,因此无法使用。
If I refresh the browser the first recording works again, and subsequent recordings are slowed down which is why I am sure the problem is not in the nodeJs service. 如果刷新浏览器,则第一个记录会再次起作用,并且随后的记录会变慢,这就是为什么我确定问题不在nodeJs服务中的原因。
My project is an Angular 5 project. 我的项目是Angular 5项目。
I have pasted the code I am trying below. 我在下面粘贴了我要尝试的代码。
I am using binary.js -> https://cdn.jsdelivr.net/binaryjs/0.2.1/binary.min.js 我正在使用binary.js-> https://cdn.jsdelivr.net/binaryjs/0.2.1/binary.min.js
this.client = BinaryClient(`ws://localhost:9001`)
createStream() {
window.Stream = this.client.createStream();
window.navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
this.success(stream);
})
}
stopRecording() {
this.recording = false;
this.win.Stream.end();
}
success(e) {
var audioContext = window.AudioContext || window.webkitAudioContext;
var context = new audioContext();
// the sample rate is in context.sampleRate
var audioInput = context.createMediaStreamSource(e);
var bufferSize = 2048;
var recorder = context.createScriptProcessor(bufferSize, 1, 1);
}
recorder.onaudioprocess = (e) => {
if (!this.recording) return;
console.log('recording');
var left = e.inputBuffer.getChannelData(0);
this.win.Stream.write(this.convertoFloat32ToInt16(left));
}
audioInput.connect(recorder)
recorder.connect(context.destination);
}
convertoFloat32ToInt16(buffer) {
var l = buffer.length;
var buf = new Int16Array(l)
while (l--) {
buf[l] = buffer[l] * 0xFFFF; //convert to 16 bit
}
return buf.buffer
}
I am stumped as to what can be going wrong so if anyone has experience using this browser tech I would appreciate any help. 对于可能出什么问题我深感困惑,因此,如果任何人都有使用此浏览器技术的经验,我将不胜感激。
Thanks. 谢谢。
I've had this exact problem - your problem is the sample rate you are writing your WAV file with is incorrect. 我遇到了这个确切的问题-您的问题是写入WAV文件所使用的采样率不正确。
You need to pass the sample rate used by the browser and the microphone to the node.js which writes the binary WAV file. 您需要将浏览器和麦克风使用的采样率传递给写入二进制WAV文件的node.js。
Client side: 客户端:
After a successfull navigator.mediaDevices.getUserMedia
(in your case, success
function), get the sampleRate
variable from the AudioContext
element: 成功完成
navigator.mediaDevices.getUserMedia
(对于您而言,是success
函数)之后,从AudioContext
元素获取sampleRate
变量:
var _smapleRate = context.sampleRate;
Then pass it to the node.js listener as a parameter. 然后将其作为参数传递给node.js侦听器。 In my case I used:
就我而言,我使用了:
binaryClient.createStream({ SampleRate: _smapleRate });
Server (Node.js) side: 服务器端(Node.js):
Use the passed SampleRate
to set the WAV file's sample rate. 使用传递的
SampleRate
设置WAV文件的采样率。 In my case this is the code: 就我而言,这是代码:
fileWriter = new wav.FileWriter(wavPath, {
channels: 1,
sampleRate: meta.SampleRate,
bitDepth: 16
});
This will prevent broken sounds, low pitch sounds, low or fast WAV files. 这样可以防止断音,低音,低或快速的WAV文件。
Hope this helps. 希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.