Connect Audio from Three.JS to MediaRecorder

Questions
,
6

For developers in the FuTuRe:

const context: AudioContext = ThreeAudioContext.getContext();
const destination = context.createMediaStreamDestination();
this.audioListener.getInput().connect(destination);
this.backgroundGainNode.connect(destination);
stream.addTrack(destination.stream.getAudioTracks()[0]);

In short, to connect audio to the MediaRecorder, call createMediaStreamDestination and connect the gainNode (volume node) to the newly created destination. Then, add the track to the stream.

Couple of hiccups I had:

  • All gain nodes you connect need to be under the same audio context.
  • If you want to connect audio to the stream, even though it may not be audible, you need to create an independent GainNode.

Of course, I say GainNode with the understanding you might be using a different type of AudioNode, but I assume 95% of people just want audio to play without any alteration besides volume.

4 Likes