Problem with scrolling waveform animation

[cesxhin]

Bug description

set custom rendering but this animation changes the Y axis values. I think it's something rendering.

Environment

• Browser: Chrome

Minimal code snippet

const wavesurfer = WaveSurfer.create({
  container: document.body,
  waveColor: 'rgb(200, 0, 200)',
  progressColor: 'rgb(100, 0, 100)',
  url: '/examples/audio/demo.wav',

  /**
   * Render a waveform as a squiggly line
   * @see https://css-tricks.com/making-an-audio-waveform-visualizer-with-vanilla-javascript/
   */
  renderFunction: (channels, ctx) => {
    const { width, height } = ctx.canvas
    const scale = channels[0].length / width
    const step = 10

    ctx.translate(0, height / 2)
    ctx.strokeStyle = ctx.fillStyle
    ctx.beginPath()

    for (let i = 0; i < width; i += step * 2) {
      const index = Math.floor(i * scale)
      const value = Math.abs(channels[0][index])
      let x = i
      let y = value * height

      ctx.moveTo(x, 0)
      ctx.lineTo(x, y)
      ctx.arc(x + step / 2, y, step / 2, Math.PI, 0, true)
      ctx.lineTo(x + step, 0)

      x = x + step
      y = -y
      ctx.moveTo(x, 0)
      ctx.lineTo(x, y)
      ctx.arc(x + step / 2, y, step / 2, Math.PI, 0, false)
      ctx.lineTo(x + step, 0)
    }

    ctx.stroke()
    ctx.closePath()
  },
});

wavesurfer.registerPlugin(Recorder.create({scrollingWaveform: true, scrollingWaveformWindow: 3}));

Expected result

changing the position of x remains the same value of y

Obtained result

changing the position of x not remains the same value of y

Screenshots

Registrazione.schermo.2023-11-06.alle.15.23.27.mov

[katspaugh]

That’s a weird behavior indeed but not a bug per se.
This particular custom render function samples the audio data for each pixel. There are much more audio data points (peaks) than pixels, so it picks out a single peak on each loop step (index * scale, floored). Since we’re scrolling inside the audio data, the peaks are shifted on each frame. So you get a different sample each time.

To get a nice and smooth animation like with the default renderer, a custom render function should always get an averaged peak instead of sampling individual peaks that vary a lot.

[cesxhin]

Even making it default doesn't work very well, it bothers the eyes when it scrolls. In my opinion it's not normal

[sfc-gh-nbellante]

I'm seeing this even with the default renderer, exacerbated by using bar styling. @katspaugh

Screen.Recording.2024-08-27.at.18.15.22.mov

[katspaugh]

Oof that’s not great. I’ll make a bug issue for that.