使用 Web Audio API 和 Wrtc 进行远程音频处理

Question

我正在尝试处理来自服务器的媒体流对象的远程音频。我得到多个媒体流对象，这些对象被传递给video element srcObject 然后静音。（如视频会议） 每个媒体流对象都被传递给一个单独的组件，该组件具有唯一的video 元素并附加到它上面。 我想分别处理每个媒体流对象的音频并相应地处理它以显示必要的视觉效果。
问题是，假设通话中有 5 个用户并且任何随机用户说话，分析器仅适用于第一个媒体流对象（添加到通话中的第一个）。如何检查音频来自哪个特定媒体流？以及为什么分析器适用于单个媒体流？ 从媒体流对象分析音频的代码在这里提到如下

const context = new AudioContext();
const track = context.createMediaStreamSource(this.mediaStreamObj);
const gainNode = context.createGain();
const analyzer = context.createAnalyser();
track.connect(gainNode);
track.connect(analyzer);
gainNode.gain.value = 0;
track.connect(context.destination);
const bufferLength = analyzer.frequencyBinCount;
console.log(bufferLength);
const dataArray = new Uint8Array(bufferLength);

dataArray 进一步用于获取音频级别的平均值并应用必要的 css。 我找到了一个来源，其中提到这是一个 chrome 错误，请查看此链接 - Proper way to get the remote audio levels of a media stream in order to display audio levels visually? 有多个来源提到了本地音频的步骤，但我找不到与远程音频相关的任何内容。任何形式的帮助将不胜感激。

Answer 1

最后，我能够找出问题所在。分析器节点对所有媒体 Streams 都运行良好。该问题与正在应用CSS 的元素的id 有关。事实证明 id 对于每个包含它自己的媒体流对象的子组件都是唯一的。但是，由于父组件包含所有子组件，因此必须应用css 的所有元素都具有相同的id。这就是样式被应用到单个id 的原因。因此，我确保元素具有不同的 id，即使它们位于不同的子组件中，并且现在一切正常！

Answer 2

基于 cmets，我认为问题在于 MediaStreamSourceNode 只有一个轨道，即使流有很多。使用的曲目是“第一首”，有点不确定。

您可以使用多个MediaStreamTrackAudioSourceNodes 来访问每个曲目。然后为每个这些添加一个分析器，以便您可以衡量正在发生的事情。

（注意：Chrome 尚未实现此功能。请参阅https://crbug.com/679813）