Show content while loading

[jrief]

When loading large audio contents, it may take a few seconds until they are loaded into the WaveSurfer module. During this period the provided area is just blank and some unpatient users may leave the site.

Is there a way to add a placeholder to that area so that I can inform users that the content currently is loading?

[katspaugh]

This has been recently asked here:
#3871 (comment)

You can also subscribe to the loading event and show a custom loader in your app.

[Ben-Brady]

@katspaugh I really think it would be a nice feature to provide a default waveform to render whilst the audio is loading and being processed. I've gotten around this on a project I've been working on I've had to use two different wavesurfer instances, one to generate the waveforms and one to show some default waveforms and be recreated when it loads.

I'm looking at contributing this feature, do you recon you'd be in favour of it?

[katspaugh]

I’m not against it, makes sense to display something while loading. What do you envision this default waveform to look like?

[jrief]

@katspaugh an animated SVG maybe? I could provide something like this.

For technical reasons, is it possible to load the first x seconds and then proceed with the remaining file?

[katspaugh]

No.

[Ben-Brady]

I’m not against it, makes sense to display something while loading. What do you envision this default waveform to look like?

I was thinking just a parameter called fallbackPeaks which is used until the actual peaks are used. Or maybe an option like fallbackMode="empty" | "peaks" that still tries to generate the peaks, even if peaks are provided

[Ben-Brady]

• fallbackMode
  • `"empty" (default): Current behaviour, show nothing
  • "peaks": Use provided peaks, recacluate them when loaded
    // Possible shorthands
  • "low": shorthand for peaks with an array of [[0], [0], ...] provided
  • "medium": shorthand for peaks with an array of [[0.5], [0.5], ...] provided
  • "high": shorthand for peaks with an array of [[1], [1], ...] provided

[jrief]

@Ben-Brady I'm currently adding a <div>Initializing audio player, please wait ...</div>-element at the position where the WaveSurfer-element will appear. In the onReady-function I then remove that div and set the height of the WaveSurfer-element to 128. Remember to initialize it with a height of 0.

[Ben-Brady]

The problem is, we're using waveplayer for 50min long videos meaning that the waveform takes around 30 seconds to generate.