Web Audio API：防止麦克风输入通过扬声器播放

Posted 2023-02-25

【中文标题】Web Audio API：防止麦克风输入通过扬声器播放

【英文标题】：Web Audio API: Prevent microphone input from being played through speakers

【发布时间】：2016-01-08 22:19:03

【问题描述】：

我正在使用Recorder.JS 在 html 应用程序中录制音频。总的来说，这工作正常，除了麦克风输入通过扬声器回声（如果我不使用耳机会产生回声）。

我发现的各种帖子表明这是因为输入连接到 AudioContext 目标 - 但对于我的情况而言并非如此。

此外，如果我运行 Recorder.JS 示例，我不会得到任何这样的回显（同一台机器，同一浏览器），尽管据我所知代码是相同的：

// At the top of the script:
var recorder = null;

// in DOMContentLoaded:
navigator.getUserMedia( video: true, audio: true , function(stream) 
    // Video stuff.
    var audioContext = new AudioContext();
    var microphone = audioContext.createMediaStreamSource(stream);
    recorder = new Recorder(microphone,  numChannels: 1, sampleRate: 16000 );
, onError);

// In start button handler:
recorder.record();

// And in the stop button handler:
recorder.stop();
recorder.exportWAV(function(audio)  /* omited */ );

真的很奇怪，我认为完全相同的代码具有这种不同的行为 - 感谢任何指针。

【参考方案1】：

这将是一次盲目的尝试，但我非常确信您隐藏在 // Video stuff. 评论中的内容是您问题的根源。

如果您确实将流加载到 <video> 元素中，则将整个 gUM 流附加到其 src、视频和音频通道中。

因此，当您执行play() 视频流时，也会播放音频流。

因此，如果我的假设是正确的，您只需要静音视频元素，这要归功于它的muted 属性。

video.src = URL.createObjectURL(stream);
video.muted = true;
video.play();

---

请注意，we should be able 仅使用 VideoStreamTrack 调用 MediaStream() 构造函数，因此视频无法访问音频流。

但截至今天，似乎只有 Firefox 支持它。

navigator.mediaDevices.getUserMedia( video: true, audio: true )
    .then(function(stream) 
        var videoStream = stream.getVideoTracks()[0];
        var mediaStream = new MediaStream([videoStream]) ;
        v.src = URL.createObjectURL(mediaStream);
        v.play();
        // audio stuff
      );