如何从 Three.JS AudioContext 将音频连接到 MediaStream答案

【问题标题】：How to connect audio to MediaStream from Three.JS AudioContext如何从 Three.JS AudioContext 将音频连接到 MediaStream
【发布时间】：2019-12-12 23:56:27
【问题描述】：

我正在从画布中实例化 MediaStream。我需要将来自 Three.js 的音频流中的音频连接到此流。

我尝试了很多东西，但最简洁的是提供的代码。是否添加了流但音频只是听不见？

const context: AudioContext = ThreeAudioContext.getContext();
const destination = context.createMediaStreamDestination();
const source = context.createMediaStreamSource(destination.stream);
source.connect(destination);
stream.addTrack(destination.stream.getAudioTracks()[0]);

我也试过这个看看音频是否连接，但我还是什么都听不到。

const context: AudioContext = ThreeAudioContext.getContext();
const destination = context.createMediaStreamDestination();
const source = context.createMediaStreamSource(destination.stream);

const gainNode = context.createGain();
gainNode.gain.value = 1;

source.connect(gainNode);
gainNode.connect(destination);
stream.addTrack(destination.stream.getAudioTracks()[0]);

我想听 Three.JS 的音频，但我什么也没听到。我在游戏中可以调节音量。这会影响事情吗？我应该注意我首先调用 canvas.captureStream()，然后执行这个“轨道添加”，然后实例化一个记录器。

【问题讨论】：

一个可运行的 sn-p 会很有帮助。你能提供一个吗？
@RaymondToy 感谢您的回复！我能够解决它并提供了一个可以帮助未来人们的解决方案。

标签： javascript three.js web-audio-api

【解决方案1】：

对于未来的开发者：

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

简而言之，要将音频连接到 MediaRecorder，请调用 createMediaStreamDestination 并将 gainNode（音量节点）连接到新创建的目的地。然后，将曲目添加到流中。

我有几个打嗝： - 您连接的所有增益节点都需要位于相同的音频上下文中。 - 如果你想将音频连接到流，即使它可能听不到，你需要创建一个独立的 GainNode。

当然，我说 GainNode 是因为你可能使用不同类型的 AudioNode，但我假设 95% 的人只想播放音频而不需要改变音量。

【讨论】：