Upgrading from an earlier version to V7

[peter-harvest]

Hi all

Hoping someone can help, as I'm really scratching my head on this.

I recently ran into an issue where my WaveSurferJS implementation stopped working on the latest version of iOS. After digging in, it turned out that the WaveSurfer "ready" event was not being triggered. I was on an earlier version of WaveSurfer so I embarked upon an upgrade to V7.

This upgrade was all fairly painless. A few methods and properties that needed to be replaced etc, but there has been one issue that I cannot seem to solve. In my previous version, the ready event would get triggered as soon as the audio began to download/load and therefore it allowed the audio to begin playing while the rest was still downloading. In V7, the ready event seems to require the audio file to be downloaded in full before it begins. Is there a way around this like this was in earlier versions?

Here is a sample of what I was using previously:
wavesurfer_v6_example.txt

• Note: I have this labelled as V6... but its actually V2.0.5 that we were using prior

Here is a sample of what I am using with V7:
wavesurfer_v7_example.txt

Some other useful notes:

1. this.TrackDetails.waveFormUrl is a url to a JSON precoded peaks file from Amazon S3
2. this.TrackDetails.sampleUrl is a url to a mp3 file from Amazon S3

Any thoughts on what I'm missing, or how I need to tackle this in V7 would be very much appreciated

Thanks in advance
Peter

[katspaugh]

You should do something like this:

$.getJSON(this.TrackDetails.waveFormJSONUrl, (data) => {
  this.Player.load(this.TrackDetails.sampleUrl, data.data, waveSurferCoreReference.GetDuration())
})

[peter-harvest]

That seems to work! Thank you

One thing though - it is doing something odd on the very first audio file that I play.

In the network tab I see it loading the same audio file multiple times, but never in full.

If I pause and then play it loads one final time (see the very last network request) and then its ok. Even playing other audio straight after its completely fine. It's just that very first audio that gets played. Very weird!

Just to be clear - this didn't happen until I moved the load() inside the waveform per your example.

Any ideas?

[katspaugh]

It's normal, it's fetching chunks of audio as it plays it (aka streaming), see https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/206

[peter-harvest]

Thanks - what was throwing me off is that the very first audio file that gets played shows up as multiple (separate) network requests for each chunk - it does not group them into a single request. But any subsequent audio that is played will show as a single network request. Seems like slightly different behaviour going on. I'll spend some time on this today to see if I can work out what the difference is.

Cheers

[peter-harvest]

Ok I worked this out. The very first audio that is played after WaveSurfer.create() was not able to get it's duration determined by WaveSurfer and so had a duration of 0 - which ended up sending mixed content-ranges in the request. Adding to that was my fallback to my own duration was not working correctly. All subsequent audio requests after the first could get their duration determined by WaveSurfer no issue - it was just the initial audio file that was loaded immediately after WaveSurfer was created.

Either way, I've worked this out now. Thanks for your help and speedy replies in getting down the right path - much appreciated.