Waveform hides when scrolling to the end on mediaElement loaded server generated waveform

Wavesurfer.js version(s):

“wavesurfer.js”: “^2.1.0”,

Browser version(s):

Version 71.0.3578.98

Code needed to reproduce the issue:

My audio element:

<audio id="audio"><source src={this.state.audioURL} type="audio/mp3"></source></audio>

I set the media element;

this.mediaElt = document.getElementById(‘audio’);

I am loading it like this:

 this.wavesurfer = WaveSurfer.create({
    container: '#waveform',
    waveColor: 'gray',
    progressColor: 'rgb(14, 204, 208)',
    barWidth: 3,
    partialRender: true,
    responsive: true,
    scrollParent: true,
    scrollSpeed: 3,
    scrollThreshold: 50,
    height: 60,
    normalize: true,
    backend: 'MediaElement'
   })

I generate waveform on server:

audiowaveform -i ${inputAudio} -o ${outputWaveform} -b 8 --height 25 --pixels-per-second 100

Once axios fetch returns, I am loading the generated waveform and audio file, and then calling this.mediaElt.load() to tell the media element that the audio source has been updated

this.wavesurfer.load(this.mediaElt, this.state.waveformURL.data);

Everything loads and plays nicely, though I am experiencing two key problems.

1. When I scroll left or right, the scroll bar unhides, however when I leave the waveform area, it never unhides again. Sometimes it does, other times it doesn’t. It is very random in that sense. This was still occurring when I was using webaudio and not the mediaElement.

2. More importantly, when I scroll to the end of the waveform, it disappears completely and doesn’t return. I believe this is an issue with the length of the audio/waveform that is being loaded.

e.target.scrollWidth (scroll width of the container) 34762

scrollWaveLeft (position at the end once I have completed scrolling) 33904

difference 858

So I can’t scroll anymore, though it is saying that I still have 858 to scroll. At this point, the waveform completely disappears and I cannot see anything, though the audio still plays all the way to the end. On that note, the waveform does not sit flush with the left hand side of the screen, there is a 155px margin on the left. So I am unsure whether this has anything to do with this issue.

Any suggestions greatly appreciated.

[rockyhuber]

Hi, sorry for the delay mate. Don’t receive github notifications in email for some reason. I have done some custom work to wavesurfer, so will need to merge the code bases. Will let you know if the 2.2.0 fixes work in due course.

[thijstriemstra]

no feedback, closing.