How to increase the size of div instead of re rendering audio graph

[sagharfrancis20]

I am using Peak,js in my react app. I am also using the backend library for pre-processing the waveform data. The default behavior of zoom functionality re-renders the graph when it reaches to end. What I want to do is I want to increase the size of div instead of re-rendering it.

Currently what I am doing is when I click on the zoom button I increase my parent div width and use the auto-fit property to fully cover the width but that's not giving me a good result. Instead of this, I want to use the zoom functionality with respect to seconds. But this is not working correctly. Still, at some point, it re-renders the canvas.

I want to want to increase the div size not want to re-render the canvas.

[sagharfrancis20]

zoomLevels: [512, 1024, 2048, 4096]

How much do the above values increase the pixels or percentages in the graph?

Can I use the values other than the above and what is the maximum and minimum range?

[chrisn]

How much do the above values increase the pixels or percentages in the graph?

Can I use the values other than the above and what is the maximum and minimum range?

Each value is a number of audio samples per pixel. With the default values you quoted, calling the zoomOut() method will double the amount of audio that is visible.

You can use any values you choose, yes, but only positive integer values are meaningful.

[chrisn]

I am using Peak,js in my react app. I am also using the backend library for pre-processing the waveform data. The default behavior of zoom functionality re-renders the graph when it reaches to end. What I want to do is I want to increase the size of div instead of re-rendering it.

Currently what I am doing is when I click on the zoom button I increase my parent div width and use the auto-fit property to fully cover the width but that's not giving me a good result. Instead of this, I want to use the zoom functionality with respect to seconds. But this is not working correctly. Still, at some point, it re-renders the canvas.

I want to want to increase the div size not want to re-render the canvas.

I'm not sure what you mean by re-rendering. If you change the size of the container div, you should call view.fitToContainer() to resize the waveform to fit the div.

You can also use view.setZoom() to fit a given number of seconds in the div width.

[sagharfrancis20]

How much do the above values increase the pixels or percentages in the graph? Can I use the values other than the above and what is the maximum and minimum range?

Each value is a number of audio samples per pixel. With the default values you quoted, calling the zoomOut() method will double the amount of audio that is visible.

You can use any values you choose, yes, but only positive integer values are meaningful.

I mean let's suppose I have audio have a 20-sec stream and the div with 600px width on which I am showing the audio waveform and on initial, the zoom value is 256 if I change the value to 512 how much it will decrease the space between seconds [256, 512, 1024, 2048, 4096]

[chrisn]

Changing from 256 to 512 will decrease the space by half. You can work out how many pixels for 1 second of audio by calculating sampleRate / zoom, e.g., 44100 / 256 = 172 px.