setZoom auto has little error

[jason30704]

Hello,
I use the following code to set zoom to auto.
But it does not completely cover the entire waveform.
As the video shows, it can still slide. Is there a way to ensure that it is fully covered?

2.mp4

const WaveformView = ({ audioCtx, audioElementRef}) => {
  const [peaks, setPeaks] = useState(null);
  const zoomviewWaveformRef = useRef(null);
  const overviewWaveformRef = useRef(null);

  useEffect(() => {
    initPeaks();
  }, []);

  const initPeaks = () => {
    const options = {
      overview: {
        container: overviewWaveformRef.current,
        axisGridlineColor: "transparent",
        showAxisLabels: false,
      },
      zoomview: {
        container: zoomviewWaveformRef.current,
        axisGridlineColor: "transparent",
        showAxisLabels: false,
      },
      mediaElement: audioElementRef,
      keyboard: true,
      logger: console.error.bind(console),
      zoomLevels: [512, 2048, 4096, 10000],

      webAudio: {
        audioContext: audioCtx,
      },
    };

    if (peaks) {
      peaks.destroy();
      setPeaks(null);
    }

    Peaks.init(options, (err, peaks) => {
      setPeaks(peaks);
      if (err) {
        console.log(err);
        return;
      }

      peaks.views.getView("overview").enableMarkerEditing(true);
      peaks.views.getView("zoomview").setZoom({ seconds: "auto" });
      peaks.views.getView("zoomview").setSegmentDragMode("compress");

      // onPeaksReady();
    });
  };

  return (
    <Box width={"600px"}>
      <Box className="zoomview-container" ref={zoomviewWaveformRef}></Box>
      <Box className="overview-container" ref={overviewWaveformRef}></Box>
    </Box>
  );
};

[jason30704]

Also, is it not possible to prevent zoomview drag now?
Using the following two functions will cause an error.

peaks.views.getView("zoomview").enableDragScroll(false);
peaks.views.getView("zoomview").enableAutoScroll(false);

[chrisn]

I have fixed the bug in enableAutoScroll() in e7f049c.

There is no enableDragScroll() function, try using setWaveformDragMode().

[chrisn]

The zoom 'auto' problem is fixed in b6e1662.

[chrisn]

I have published v3.4.1 to npm, with both these fixes.

[jason30704]

Thanks for your response and quick fix
However, the modification in 3.4.1 is "Prevent scrolling the zoomview when set to auto zoom". But if you zoomview during playback, it will still be affected by autoScroll and you can slide. (Of course, we can also cancel autoScroll)
In addition, when sliding the overview, there will still be the same problem.
I think the root cause may be that in some cases the overview and zoomview will have different widths.

The following are the results of my own use. Among the three audios, only the third audio does not have misalignment problems.
Not sure if it’s related to the length of the video?

3.mp4

[chrisn]

I can reproduce the problem here, so there's no need to upload your files. But thank you for offering, it's really helpful.

There are two problems I can see:

• The waveform length is different in the zoomview and overview when you set auto zoom (they should be the same)
• The waveform resampling doesn't guarantee you get the requested number of pixels. For example, resizing the waveform to fit a 1000 pixel width might give you 1002 samples, and this is what causes the movement when playback reaches the end of the audio.

Fixing the first one is easy, the second is a bit more involved. For now, I can prevent the auto-scroll when you set auto zoom, but to fix this properly means changing the waveform resampling to support floating-point scale (samples per pixel) values. Currently these are integer, which causes a rounding error, which leads to the resampled waveform length being close to but not exactly the length requested. This would need changing in both audiowaveform and waveform-data.js

[chrisn]

Please try v3.4.2, which prevents the waveform from scroll when the zoom is set to 'auto'.

[jason30704]

I understand, thanks for the explanation.
After using version 3.4.2, I feel that it is much better to use! It seems that this is already a good workaround for now.
Thank you so much.

[chrisn]

Thank you too, for raising these issues. It all helps improve this package.