Agora WebSDK-NG音频可视化器

Question

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

或

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

感谢您的任何建议。

Answer 1

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

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

或者，如果您想可视化远程流中的音频，则可以使用user（AgoraRTCRemoteUser）并调用user.audioTrack以获得音轨。

Answer 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 还提供了您需要的所有信息和一些演示。

祝你好运