Hover jitters when using zoom plugin #4138

clinton-encord · 2025-07-03T09:18:11Z

clinton-encord
Jul 3, 2025

Hi!

I'm noticing that the hover (from the hover plugin) jitters when zooming in/out (with the Zoom Plugin).

My code (which is mostly copy pasted from the examples page, with a few tweaks to add the HoverPlugin).

/**
 * Zoom plugin
 *
 * Zoom in or out on the waveform when scrolling the mouse wheel
 */

import WaveSurfer from 'wavesurfer.js'
import ZoomPlugin from 'wavesurfer.js/dist/plugins/zoom.esm.js'
import Hover from 'wavesurfer.js/dist/plugins/hover.esm.js'

// Create an instance of WaveSurfer
const wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'rgb(200, 0, 200)',
  progressColor: 'rgb(100, 0, 100)',
  url: '/examples/audio/audio.wav',
  minPxPerSec: 100,
  plugins: [
        Hover.create({
    lineColor: '#ff0000',
    lineWidth: 2,
    labelBackground: '#555',
    labelColor: '#fff',
    labelSize: '11px',
    labelPreferLeft: false,
  }),
  ]
})

// Initialize the Zoom plugin
wavesurfer.registerPlugin(
  ZoomPlugin.create({
    // the amount of zoom per wheel step, e.g. 0.5 means a 50% magnification per scroll
    scale: 0.5,
    // Optionally, specify the maximum pixels-per-second factor while zooming
    maxZoom: 100,
  }),

)

//  show the current minPxPerSec value
const minPxPerSecSpan = document.querySelector('#minPxPerSec')
wavesurfer.on('zoom', (minPxPerSec) => {
  minPxPerSecSpan.textContent = `${Math.round(minPxPerSec)}`
})

// Create a minPxPerSec display and waveform container
/*
<html>
  <div>
       minPxPerSec: <span id="minPxPerSec">100</span> px/s
  </div>

    <div id="waveform"></div>
 </html>
 *
 */

// A few more controls
/*
<html>
    <button id="play">Play/Pause</button>
    <button id="backward">Backward 5s</button>
    <button id="forward">Forward 5s</button>
  <p>
    📖 Zoom in or out on the waveform when scrolling the mouse wheel
  </p>
</html>
*/

const playButton = document.querySelector('#play')
const forwardButton = document.querySelector('#forward')
const backButton = document.querySelector('#backward')

playButton.onclick = () => {
  wavesurfer.playPause()
}

forwardButton.onclick = () => {
  wavesurfer.skip(5)
}

backButton.onclick = () => {
  wavesurfer.skip(-5)
}

katspaugh · 2025-07-04T05:32:30Z

katspaugh
Jul 4, 2025
Maintainer

Oh, I see. It does jump left and right during zooming.
Some sort of debounce in the Hover plugin would probably help, so that it only reacts to a zoom change with a delay.

1 reply

clinton-encord Jul 4, 2025
Author

I can create a PR for that!

Am eager to contribute back to this repo!

clinton-encord · 2025-07-04T14:27:02Z

clinton-encord
Jul 4, 2025
Author

Closing this to open an issue. And will make a corresponding PR.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Hover jitters when using zoom plugin #4138

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Hover jitters when using zoom plugin #4138

Uh oh!

Uh oh!

clinton-encord Jul 3, 2025

Replies: 2 comments · 1 reply

Uh oh!

Uh oh!

katspaugh Jul 4, 2025 Maintainer

Uh oh!

clinton-encord Jul 4, 2025 Author

Uh oh!

clinton-encord Jul 4, 2025 Author

clinton-encord
Jul 3, 2025

Replies: 2 comments 1 reply

katspaugh
Jul 4, 2025
Maintainer

clinton-encord Jul 4, 2025
Author

clinton-encord
Jul 4, 2025
Author