2

Is it possible to create an audio visualizer with Agora WebSDK-NG? I'm looking for something similar to : https://webrtc.github.io/samples/src/content/getusermedia/volume/

or

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

Thanks for any suggestion.

Joe Lin
  • 450
  • 7
  • 20

2 Answers2

1

Yes this is technically feasible using Agora's NG WebSDK because the SDK is built using WebRTC.

If you are looking to add this to the local user's interface, look into the documentation for local-audio-tracks specifically you will want to create an audio track locally to be able to pass it to the visualizer.

Or if you want to visualize the audio from a remote stream you can use the user (AgoraRTCRemoteUser) and call user.audioTrack to get the audio track.

Hermes
  • 2,828
  • 2
  • 14
  • 34
1

@Hermes's answer is correct. If you're looking for some template code to experiment with, I'd recommend starting with the basic live demo or looking at any of the other demos. Either way, what's important is that you need to create a local or remote audio track, then once you have the track you can create an MediaStream object and add the track to it as follows:

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);

There's more to do here but this should help you get started. If you're unfamiliar with the Web Audio API, I'd recommend you start with this Video. The MDN web docs also provides all the information you need and some demos.

Good luck

NSCoder
  • 1,594
  • 5
  • 25
  • 47