Agora WebSDK-NG 音频可视化工具答案

【问题标题】：Agora WebSDK-NG audio visualizerAgora WebSDK-NG 音频可视化工具
【发布时间】：2021-04-03 20:16:01
【问题描述】：

是否可以使用 Agora WebSDK-NG 创建音频可视化工具？我正在寻找类似的东西： https://webrtc.github.io/samples/src/content/getusermedia/volume/

或

https://www.cssscript.com/audio-visualizer-with-html5-audio-element/

感谢您的任何建议。

【问题讨论】：

标签： webrtc agora.io agora-web-sdk-ng

【解决方案1】：

是的，这在技术上使用 Agora 的 NG WebSDK 是可行的，因为 SDK 是使用 WebRTC 构建的。

如果您希望将其添加到本地用户界面，请查看local-audio-tracks 的文档，特别是您需要在本地创建音轨以便能够将其传递给可视化工具。

或者，如果您想可视化来自远程流的音频，您可以使用user (AgoraRTCRemoteUser) 并调用user.audioTrack 来获取音轨。

【讨论】：

【解决方案2】：

@Hermes 的回答是正确的。如果您正在寻找一些模板代码进行试验，我建议您从 the basic live demo 开始或查看任何其他演示。无论哪种方式，重要的是您需要创建一个本地或远程音轨，然后一旦您拥有该音轨，您就可以创建一个 MediaStream 对象并将该音轨添加到其中，如下所示：

const audioStream = new MediaStream(); // Web Audio Api
audioStream.addTrack(remoteAudioTrack._mediaStreamTrack); // remote or local
var mediaSource = audioContext.createMediaStreamSource(audioStream); // don't forget to setup an audio context 
const analyser = audioContext.createAnalyser();
mediaSource.connect(analyser);

这里还有更多工作要做，但这应该可以帮助您入门。如果您不熟悉 Web Audio API，我建议您从 Video 开始。 The MDN web docs 还提供了您需要的所有信息和一些演示。

祝你好运

【讨论】：