[Issue] Playhead out-of-sync with Waveform on long audio files

[kai-shimada]

Hello Community!

As I'm developing an Electron transcription app on Mac (WhisperScript), I am facing an issue when navigating the playhead via mouse click in long audio files (>15min).

I noticed that the playhead is not getting placed correctly where I position the cursor. The gap between the cursor position and the placed playhead gets bigger the more you seek into the audio file (see the video). If I set the seek point programmatically using SeekTo, the playhead gets placed correctly. I also noticed that the width of the < wave > or the container is getting calculated incorrectly as it's wider than the actual length of the audio (see the gap after it reaches the end of the audio).

Has anyone experienced the same issue?

Screen.Recording.2023-03-21.at.16.54.52.mov

I am seeing this issue on WAV 48khz 24 bit as well as on MP3 44,1khz audio files... (it worked with none of the files I tested)

WaveSurfer Version: 6.6.1
WaveSurfer Option:

{
    ...
    backend: 'MediaElement',
    autoCenterImmediately: true,
    responsive: 80,
    normalize: true,
    minPxPerSec: 20,
    splitChannels: false,
    plugins: [
        RegionsPlugin.create({
            edgeScrollWidth: 3,
            dragSelection: true,
            minLength: 0.1,
            showTooltip: false,
            contentEditable: true,
            removeButton: true,
        })
    ]
}

I'd appreciate any help! thank you 🙏

[katspaugh]

I think there's indeed a bug in how the width is calculated.
Can you try the same file with the new version (currently in alpha)?

[kai-shimada]

Thanks for the reply!
I tried the alpha version and the playhead issue seems to be resolved there, but since it's not really backwards compatible at the moment, it breaks too many things to get this to work again for me (no contenteditable and removeButton option in region.add(), different way to add regions and set enableDragSelection parameter (if its even possible), etc.).

Since it is an actual bug in a basic feature (navigating through mouse click), is it possible to take the working calculation in alpha and make it work in wavesurfer.js as well? That would be great!

[katspaugh]

Sure, makes sense! And thanks for verifying it's not an issue in the alpha!
I stated that backward compatibility wasn't a goal for the new version, but I can see a lot of pain refactoring existing projects, so maybe we should make an adapter for an easier upgrade.
Anyway, it makes sense to fix this in the current version, I agree. Would you like to give it a try?

[kai-shimada]

Since I will have to solve this issue for the app somehow, I will work on that for sure, but I'm quite unfamiliar with how wavesurfer.js is structured so it might take a while.
In which part of the code would you suggest to look?

Also, it would be better to have someone to look into the issue as well in parallel.

[katspaugh]

This would be the starting point: https://github.com/wavesurfer-js/wavesurfer.js/blob/master/src/drawer.multicanvas.js
It basically creates a bunch of 4000px-wide canvases and calculates the total width based on the duration of the audio and the minPxPerSec param. I didn't write that code, it was added later, so I'm also not super familiar. But hopefully this will get you started.

[kai-shimada]

thank you!🙏 I will give It a try!

[entonbiba]

@kai-shimada why is the responsive option 80?

[kai-shimada]

good question, I actually don't know why I wanted to respond 20ms faster than the default 100ms, but It doesn't correlate with the issue I had.