Web 音频音频上下文 createMediaStreamSource 口吃

Question

I want to mix different audio media streams in to one stream. I'm been doing this with Web Audio audiocontext and createMediaStreamSource.

But the final mixed audio is stuttering.

Have anyone an idea how to optimize this to avoid stuttering?

// 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

You could try setting the latencyHint to 'playback' like this:

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

This allows the browser to add a bit of latency to the audio graph which can help on underpowered devices. Setting the latencyHint to 0 on the other hand will tell the browser that it should do things as fast as possible which increases the risk of dropouts.

Having said that, the latencyHint is only a hint. The browser may very well ignore it. You can check what the browser is actually doing by inspecting the baseLatency property.

console.log(audioContext.baseLatency);