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构建的。

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

或者，如果您想可视化远程流中的音频，可以使用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);

这里还有更多的事情要做，但这应该会帮助你开始。如果你不熟悉网络音频API，我建议你从这个视频开始。MDN web文档还提供了您需要的所有信息和一些演示。

祝好运