webrtc - 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

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

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

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

Answer 2

@Hermes 的回答是正确的。如果您正在寻找一些模板代码进行试验，我建议您从基本的现场演示开始或查看任何其他演示。无论哪种方式，重要的是您需要创建本地或远程音轨，然后一旦有了音轨，您就可以创建一个 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开始。MDN Web 文档还提供了您需要的所有信息和一些演示。

祝你好运