Chrome浏览器使用RecordJS调用stopRecording时报stop属性未定义如何解决

安全阿岳

2026-10-11

问题根因

你的代码中startRecord函数同步调用了startRecording()和startTimer()两个方法，而startRecording内部的navigator.mediaDevices.getUserMedia是异步API，只有用户授权录音、回调函数执行完成后，rec对象才会完成初始化赋值。
Chrome对媒体权限校验、音频上下文初始化的执行逻辑和火狐不同，回调触发速度更慢，会出现定时器已经走到触发stopRecording的逻辑时，rec还处于未赋值的初始状态，调用rec.stop()自然会抛出undefined相关错误。

解决方案

1. 调整定时器触发时机

将startTimer()的调用逻辑从startRecord中移除，挪到getUserMedia的成功回调末尾，确保录音初始化完成后再启动计时：

// startRecord修改后只保留初始化逻辑
function startRecord()
{
    startRecording();
}

// startRecording内部的getUserMedia回调末尾加startTimer
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
    // 原有逻辑不变
    rec = new Recorder(input,{numChannels:1});
    rec.record();
    console.log("Recording started");
    // 新增：初始化完成后再启动定时器
    startTimer();
}).catch(function(err) {
    // 新增：打印错误方便排查权限、环境问题
    console.error("录音初始化失败：", err);
});

2. 加防御性判断避免报错

在操作rec、gumStream的函数开头增加非空判断，避免极端场景下的报错：

function stopRecording() {
    // 新增非空判断
    if(!rec || !gumStream) return;
    // 原有逻辑不变
    rec.stop();
    gumStream.getAudioTracks()[0].stop();
    rec.exportWAV(setUserVoice);
}

function pauseRecording(){
    // 新增非空判断
    if(!rec) return;
    // 原有逻辑不变
    if (rec.recording){
        rec.stop();
    }else{
        rec.record();
    }
}