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