Error of time conversion

[jason30704]

Hi @chrisn ,

I try to draw some custom canvases outside peaks, so I need to know how peaks convert position into time. I found two functions (timeToPixelOffset() and pixelOffsetToTime()).

When the zoomview time is greater than about 3 seconds, the conversion using these two methods is accurate, but as long as the zoomview duration is 1 second or even lower, they will have increasing errors.

Is this the current expected situation?

[chrisn]

I'm not sure... Would you mind sharing an example, to help me investigate?

[jason30704]

Hi @chrisn ,
Sorry for replying to you so late.

I found that the root cause of this problem is that when I use the following method to crop the zoomview, it will not be able to perfectly cut to the time interval I want.
(ex: I want to capture 0 ~ 0.52 seconds. But actually what can be seen on the UI may be only 0 ~ 0.48 seconds)

Therefore, when I use pixelOffsetToTime(), there will be an error in the calculation of time. Is my cutting method wrong? Thanks!

[chrisn]

The waveform is computed based on a number of audio samples per pixel. This is what you set in the zoomLevels option in Peaks.init().

When you call zoomView.setZoom({ duration: seconds }), internally it does this:

const samplesPerPixel = Math.floor(duration * sampleRate / width);

and because samplesPerPixel must be an integer for the waveform calculation which is why we use Math.floor(), you get an approximation.

As an example, let's say sampleRate is 48000, your container width is 500px, and you call zoomView.setZoom({ duration: 0.4 }).

This gives samplesPerPixel as 38, rounded down from 38.4.

Now, 0.4 * 48000 = 19200 samples. At 38 samples per pixel, this gives a waveform length of 506 pixels.

This is just to illustrate the approximation, and this tends to be worse for short durations, as you've found.

I'd like to fix this, to make it more accurate, but it's non-trivial.

Related: bbc/audiowaveform#114 (comment)