Web Audio audiocontext createMediaStreamSource 口吃

Question

我想将不同的音频媒体流混合到一个流中。我一直在使用 Web Audio audiocontext 和 createMediaStreamSource 进行此操作。

但最终的混合音频有点卡顿。

有人知道如何优化它以避免口吃吗？

// init audio context
var audioContext = new AudioContext({ latencyHint: 0 });
var audioDestination = audioContext.createMediaStreamDestination();

// add audio streams
audioContext.createMediaStreamSource(audioStream1).connect(audioDestination);
audioContext.createMediaStreamSource(audioStream2).connect(audioDestination);
audioContext.createMediaStreamSource(audioStream3).connect(audioDestination);
audioContext.createMediaStreamSource(audioStream4).connect(audioDestination);

// get mixed audio stream tracks
var audioTrack = audioDestination.stream.getTracks()[0];

// get video track
var videoTrack = videoStream.getTracks()[0];

// combine video and audio tracks into single stream.
var finalStream = new MediaStream([videoTrack, audioTrack]);

// assign to video element
el_video.srcObject = finalStream;

Answer 1

您可以尝试将latencyHint 设置为'playback'，如下所示：

const audioContext = new AudioContext({ latencyHint: 'playback' });

这允许浏览器为音频图增加一点延迟，这有助于功率不足的设备。另一方面，将latencyHint 设置为0 会告诉浏览器它应该尽可能快地执行操作，这会增加退出的风险。

话虽如此，latencyHint 只是一个提示。浏览器很可能会忽略它。您可以通过检查 baseLatency 属性来检查浏览器实际在做什么。

console.log(audioContext.baseLatency);