时间戳

首页 > 解决方案 > 为什么使用 Recorder.js 和 MediaDevices 录制多个音频会导致稍后出现空录制？

reactjs - 为什么使用 Recorder.js 和 MediaDevices 录制多个音频会导致稍后出现空录制？

问题描述

我正在使用 Recorder.js 和 MediaDevices 来录制音频。前几个录音很好，但在一些录音之后（据我所知是随机的），录制的音频是空的。

如果我快速连续按录制和停止一段时间，我可以创建相同的问题。

这是我的代码：

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

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

如果我等待某个时间（在空录音之后），比如说 5 秒，录音机开始像以前一样正常工作。我无法理解我应该尝试什么。我对网络开发和录音相当陌生。

任何建议，将不胜感激。

标签： reactjsgetusermediaaudiocontextmediadevicesrecorder.js

解决方案

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

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

提供的硬件上下文数 (6) 大于或等于最大界限 (6)

我改变了这些行：

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

进入另一个文件：

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

这解决了这个问题。

推荐阅读