search

katspaugh / wavesurfer.js

Audio waveform player
https://wavesurfer.xyz
BSD 3-Clause "New" or "Revised" License
8.61k stars 1.62k forks source link

Timeline disappear when zooming #3782

Open SectionSoutienAnalytique opened 1 month ago

SectionSoutienAnalytique commented 1 month ago

Bug description

In the Timeline plugin, when zooming in, the timeline disappears. It does not update correctly. However, as soon as the scrollbar is moved, the timeline updates properly.

Environment

Minimal code snippet

// Customized Timeline plugin

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

// Create a timeline plugin instance with custom options
const topTimeline = TimelinePlugin.create({
  height: 20,
  insertPosition: 'beforebegin',
  timeInterval: 0.2,
  primaryLabelInterval: 5,
  secondaryLabelInterval: 1,
  style: {
    fontSize: '20px',
    color: '#FFFFFF',
  },
})

// Create a second timeline
const bottomTimeline = TimelinePlugin.create({
  height: 10,
  timeInterval: 0.1,
  primaryLabelInterval: 1,
  style: {
    fontSize: '10px',
    color: '#6A3274',
  },
})

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

wavesurfer.registerPlugin(ZoomPlugin.create())

// Play on click
wavesurfer.once('interaction', () => {
  wavesurfer.play()
})

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

Expected result

https://github.com/user-attachments/assets/171a6c8c-7319-4217-9552-f6f8632d5867

Obtained result

https://github.com/user-attachments/assets/3f561308-1aab-4e2c-b779-3bb528db9bd9

PR

I fix the issue (like you can see in the Expected result) but I do not know how to create PR

rk9155 commented 1 month ago

@SectionSoutienAnalytique
I solved this issue by wrapping the container of waveform to timeline plugin wavesurfer.registerPlugin( TimelinePlugin.create({ height: 18, insertPosition: 'beforebegin', style: { fontSize: '12px', color: '#000', }, container: this.wavesurfer.getWrapper(), }), ); This resolves the issue for me