Can we seek and draw audio visualizer on a particular time?

[adityakrshnn]

Hi,

Can we draw frames of the audio visualizer and let it stay on that? I am trying to export the audio visualizer as a video file. For that, I need the ability to seek the audio visualizer at particular times and wait so that I can capture a screenshot. I can see there is an onCanvasDraw callback, however, is there any way to make it draw the visualizer with the exact preset that I have set on audiomotion object?

[hvianna]

The visualizer renders the graphs based on the audio data that is currently passing through its internal analiserNode, 60 times per second (ideally). You can't seek the analyzer itself, you must do that on your audio source.

If a callback function is defined for onCanvasDraw, it will be called after each frame is rendered, so you can simply get the contents of the canvas element. If you can't process the frames fast enough for real-time operation, you could "freeze" the visualizer with toggleAnalyzer() - you'd probably want to pause the audio source as well, and resume both the audio and the analyzer after capturing each frame. Not sure if this would be accurate enough for what you need.

[adityakrshnn]

I see. This probably won't work for me as the export mechanism I am using is seeking the audio element. I am sure seeking the audio element would not give AnalyserNode the correct frequencies to paint on the canvas.

If I preprocess the audio and store the frequencies somewhere. Then in the _draw function, if I provide my frequency data instead of this._analyzer[ channel ].getFloatFrequencyData( fftData ); then it would be able to draw those frequencies correct? (provided I'll have to fork the repo and make changes in the _draw function)

[arnav-kr]

@adityakrshnn, were you able to make it work? i am trying to achieve somewhat the same