为什么使用 Recorder.js 和 MediaDevices 录制多个音频之后会导致录制为空？

Question

我正在使用 Recorder.js 和 MediaDevices 来录制音频。前几段录音不错，但经过一些录音（据我所知是随机的）后，录制的音频是空的。

如果我连续快速按下 Record 和 Stop 一段时间，我会产生同样的问题。

这是我的代码：

recordFunction=()=>{
    // setup the recorder
    var input;
    var volume;
    var AudioContext = window.AudioContext || window.webkitAudioContext;
    this.audioContext = new AudioContext;

    if(!this.state.isRecording){
        this.setState({
            isRecording:true
        });
        var constraints = {
            audio: {
                mandatory: {
                    googAutoGainControl: true,
                    googNoiseSuppression: false,
                    googHighpassFilter: false
                }
            },
            video: false
        }

        // providing support for older Browsers
        if(navigator.mediaDevices===null){
            navigator.mediaDevices = {};
        }
        
        if(navigator.mediaDevices.getUserMedia===null){
            navigator.mediaDevices.getUserMedia = (
                navigator.getUserMedia ||
                navigator.webkitGetUserMedia ||
                navigator.mozGetUserMedia
            )
        }
        navigator.mediaDevices.getUserMedia(constraints)
        .then((stream)=> {
            this.gumStream = stream;
            input = this.audioContext.createMediaStreamSource(stream);
            this.rec = new Recorder(input, {
                numChannels: 1
            }) 
            this.rec.record();
        }).catch((err) =>{
            console.log("Error in recording: ",err);
        });
    }
    else{
        this.rec.stop();
        this.gumStream.getAudioTracks()
        .forEach( (track) => {
            track.stop()
        } );
        this.gumStream.getVideoTracks().forEach((track)=> {
            track.stop();
        });
        this.gumStream=null;
        //create the wav blob and pass it on to createDownloadLink 
        this.rec.exportWAV(this.createDownloadLink);
    }
}

recordFunction 每次我按下 Record and Stop 时都会被调用。我的实现不正确吗？

如果我等待一段时间（在空录音之后），比如 5 秒，录音机开始像以前一样正常工作。我不知道应该尝试什么。我对网络开发和录音还很陌生。

如有任何建议，我们将不胜感激。

Answer 1

以防以后有人遇到同样的问题。

问题是：我在每次单击按钮时都创建了一个新的 AudioContext。我在 Phone 上尝试了运行应用程序，在按 Record 6 次后出现错误：

The number of hardware contexts provided (6) is greater than or equal to the maximum bound (6)

我移动了这些行：

var AudioContext = window.AudioContext || window.
this.audioContext = new AudioContext;

进入另一个文件为：

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioContext = new AudioContext();
export default audioContext;

这解决了问题。

为什么使用 Recorder.js 和 MediaDevices 录制多个音频之后会导致录制为空？

Why does recording multiple audio using Recorder.js and MediaDevices result in an empty recording later on?

reactjs

getusermedia

audiocontext

mediadevices

recorder.js