Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

TimelinePlugin not properly rerendered after zooming if not contained in Wavesurfer wrapper #3742

Closed
alexanderleecii opened this issue Jun 14, 2024 · 0 comments · Fixed by #3743
Closed

TimelinePlugin not properly rerendered after zooming if not contained in Wavesurfer wrapper #3742

alexanderleecii opened this issue Jun 14, 2024 · 0 comments · Fixed by #3743
Labels
bug

Comments

@alexanderleecii
Copy link
Contributor

alexanderleecii commented Jun 14, 2024 •
edited
Loading

Bug description

If the container option is passed to TimelinePlugin.create() to render a timeline in a separate container, then the rendered waveform and the timeline will be visually out of sync when zooming.

How to reproduce:

  1. Create a Wavesurfer instance, with e.g. "#waveform" as a container
  2. Create a TimelinePlugin instance, with e.g. "#timeline" as a container
  3. Call .zoom(zoomLevel) on the Wavesurfer instance to change the zoom level of the waveform

=> The waveform will rerender properly, but the timeline will not

Environment

  • Browser: Chrome

Minimal code snippet

import WaveSurfer from 'wavesurfer.js'
import TimelinePlugin from 'wavesurfer.js/dist/plugins/timeline.esm.js'

// Create an instance of TimelinePlugin
const timeline = TimelinePlugin.create({
  container: '#timeline',
})

// 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: [timeline],
})

/*
<html>
  <label>
    Zoom: <input type="range" min="10" max="1000" value="100" />
  </label>

  <div id="timeline"></div>
  <div id="waveform"></div>
  <p>
    📖 <a href="https://wavesurfer.xyz/docs/classes/plugins_timeline.TimelinePlugin">Timeline plugin docs</a>
  </p>
</html>
*/

// Update the zoom level on slider change
wavesurfer.once('decode', () => {
  const slider = document.querySelector('input[type="range"]')

  slider.addEventListener('input', (e) => {
    const minPxPerSec = e.target.valueAsNumber
    wavesurfer.zoom(minPxPerSec)
  })
})

Expected result

The timeline and waveform should stay in sync visually when zoom level changes, even when the waveform and the timeline are in different containers.

Obtained result

The timeline is not scaled properly and does not follow the waveform when zoom level changes.

Screenshots

Recording.2024-06-14.182431.mp4
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug
1 participant
@alexanderleecii