javascript - JavaScript:如何将音频 blob 拆分为 1 秒的块并使用 recorder.js 导出到 wav 文件?
问题描述
我想录制语音,将录制的语音(或音频 blob)自动拆分为 1 秒的块,将每个块导出到 wav 文件并发送到后端。这应该在用户说话时异步发生。
我目前使用以下 recorder.js 库来完成上述任务 https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js
我的问题是,随着时间的推移,blob/wave 文件的大小会变大。我认为这是因为数据会累积并使块大小变大。所以随着时间的推移,我实际上并没有发送连续的 1 秒块,而是累积的块。
我无法弄清楚这个问题在我的代码中是在哪里引起的。可能这发生在 recorder.js 库中。如果有人使用记录器 js 或任何其他 JavaScript 方法来完成类似的任务,如果你能仔细阅读这段代码并让我知道它在哪里中断,我将不胜感激。
这是我的 JS 代码
var gumStream; // Stream from getUserMedia()
var rec; // Recorder.js object
var input; // MediaStreamAudioSourceNode we'll be recording
var recordingNotStopped; // User pressed record button and keep talking, still not stop button pressed
const trackLengthInMS = 1000; // Length of audio chunk in miliseconds
const maxNumOfSecs = 1000; // Number of mili seconds we support per recording (1 second)
// Shim for AudioContext when it's not available.
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext //audio context to help us record
var recordButton = document.getElementById("recordButton");
var stopButton = document.getElementById("stopButton");
//Event handlers for above 2 buttons
recordButton.addEventListener("click", startRecording);
stopButton.addEventListener("click", stopRecording);
//Asynchronous function to stop the recoding in each second and export blob to a wav file
const sleep = time => new Promise(resolve => setTimeout(resolve, time));
const asyncFn = async() => {
for (let i = 0; i < maxNumOfSecs; i++) {
if (recordingNotStopped) {
rec.record();
await sleep(trackLengthInMS);
rec.stop();
//stop microphone access
gumStream.getAudioTracks()[0].stop();
//Create the wav blob and pass it on to createWaveBlob
rec.exportWAV(createWaveBlob);
}
}
}
function startRecording() {
console.log("recordButton clicked");
recordingNotStopped = true;
var constraints = {
audio: true,
video: false
}
recordButton.disabled = true;
stopButton.disabled = false;
//Using the standard promise based getUserMedia()
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
//Create an audio context after getUserMedia is called
audioContext = new AudioContext();
// Assign to gumStream for later use
gumStream = stream;
//Use the stream
input = audioContext.createMediaStreamSource(stream);
//Create the Recorder object and configure to record mono sound (1 channel)
rec = new Recorder(input, {
numChannels: 1
});
//Call the asynchronous function to split and export audio
asyncFn();
console.log("Recording started");
}).catch(function(err) {
//Enable the record button if getUserMedia() fails
recordButton.disabled = false;
stopButton.disabled = true;
});
}
function stopRecording() {
console.log("stopButton clicked");
recordingNotStopped = false;
//disable the stop button and enable the record button to allow for new recordings
stopButton.disabled = true;
recordButton.disabled = false;
//Set the recorder to stop the recording
rec.stop();
//stop microphone access
gumStream.getAudioTracks()[0].stop();
}
function createWaveBlob(blob) {
var url = URL.createObjectURL(blob);
//Convert the blob to a wav file and call the sendBlob function to send the wav file to the server
var convertedfile = new File([blob], 'filename.wav');
sendBlob(convertedfile);
}
解决方案
Recorder.js 保留它记录的音频的记录缓冲区。当exportWAV
被调用时,记录缓冲区被编码但不被清除。您需要在再次调用clear
之前调用记录器,record
以便从记录缓冲区中清除前一个音频块。
这就是在上面的代码中修复它的方式。
//Extend the Recorder Class and add clear() method
Recorder.prototype.step = function () {
this.clear();
};
//After calling the exportWAV(), call the clear() method
rec.exportWAV(createWaveBlob);
rec.step();
推荐阅读
- vue.js - Nuxt 组件变量未更新
- regex - 正则表达式获取包含某些字符但不包含其他字符的单词
- android - 下载的图片没有显示在手机的图库中,颤抖
- python - 未找到符号:_TA-ACOS - TA-Lib 的 Python 包装器未导入
- python - 如何在 Python 中使用相互引用的模块编写包?
- excel - 使用 VBA 自动过滤不同的单元格颜色
- amazon-web-services - 如何使用 AWS 开发工具包 (Javascript) 登录 AWS Cognito 用户池?
- plotnine - 如何按多个变量重新排序图?
- c# - Deleting large volumes of data from database using .NetCore
- r - How to use Logical indexing and min function to find the row which has min value?