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

Regions whose temporal boundaries are made up of a lot of decimal numbers cause issues for region playing. #3631

Open
VaysseRobin opened this issue Apr 4, 2024 · 5 comments
Open

Regions whose temporal boundaries are made up of a lot of decimal numbers cause issues for region playing. #3631

VaysseRobin opened this issue Apr 4, 2024 · 5 comments
Labels
bug

Comments

@VaysseRobin
Copy link

Bug description

When defining a region with a number made up of a lot of decimals, when clicking on a region, the event "region-out" is triggered directly after the "region-clicked".

Environment

  • Browser: Chrome

Minimal code snippet

import WaveSurfer from 'wavesurfer.js'
import RegionsPlugin from 'wavesurfer.js/dist/plugins/regions.esm.js'

// Create an instance of WaveSurfer
const ws = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'rgb(200, 0, 200)',
  progressColor: 'rgb(100, 0, 100)',
  url: '/examples/audio/audio.wav',
})

// Initialize the Regions plugin
const wsRegions = ws.registerPlugin(RegionsPlugin.create())

// Create some regions at specific time ranges
ws.on('decode', () => {
  // Regions
  wsRegions.addRegion({
    start: 9.16454684654654,
    end: 11,
    content: 'Bug region',
    color: "#00ff0044",
    drag: false,
    resize: true,
  })
  wsRegions.addRegion({
    start: 6,
    end: 8,
    content: 'Normal region',
    color: "#ff000044",
    drag: false,
    resize: true,
  })

})

wsRegions.enableDragSelection({
  color: 'rgba(255, 0, 0, 0.1)',
})

{
  let activeRegion = null
  wsRegions.on('region-out', (region) => {
    console.log('region-out', region)
    if (activeRegion === region) {
        activeRegion = null
        ws.pause()
      
    }
  })

  // play a region section when clicked
  wsRegions.on('region-clicked', (region, e) => {
    console.log('region-click', region)
    e.stopPropagation() // prevent triggering a click on the waveform
    activeRegion = region
    region.play()
  })
  // Reset the active region when the user clicks anywhere in the waveform
  ws.on('interaction', () => {
    activeRegion = null
  })
}

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

Screenshots

bug.mp4
@VaysseRobin VaysseRobin added the bug label Apr 4, 2024
@VaysseRobin
Copy link
Author

6 digits seems to be the limit (with 7 I still have the bug).

As a temporary fix for those who meet this issue, you can add this to your code:

  wsRegions.on('region-updated', (region) => {
    region.setOptions({ start: region.start.toFixed(6), end: region.end.toFixed(6) })
})

wsRegions.on('region-created', (region) => {
    region.setOptions({ start: region.start.toFixed(6), end: region.end.toFixed(6) })
})

@katspaugh
Copy link
Owner

Any idea why this is happening?

@VaysseRobin
Copy link
Author

I'm not very comfortable with JavaScript so I will not be very helpful but here is my hypothesis.
I assume that a rounding step is performed when the region is played, so the rounded start value is outside the region and cause a bug. Something like:

region.start = 4.12345678 -> when played, a rounding is performed and the cursor is set to 4.123456 which is actually outside of the region so "region-out" is triggered.

@katspaugh
Copy link
Owner

Ah, good guess, thank you! I should probably round it in the other direction.

@ducolares
Copy link

I'm having a similar issue. The fix proposed by VaysseRobin sorted most of the region.
But there is one case where my region.start is 4.1. The region-out event is immediately called after the region click.
Inside the region-out event a console log prints:
console.log('region start:', region.start, 'current time', ws.getCurrentTime()) --> region start: 4.1 current time 4.099999

@katspaugh katspaugh mentioned this issue Apr 15, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@katspaugh @ducolares @VaysseRobin