Save wavesurfer state and preload on reload

Wavesurfer.js version(s):

2.0.2

Browser version(s):

Google Chrome Version 63.0.3239.132 (Official Build) (64-bit)

Problem

Hey there! I have a popup where I load an audio using the wavesurfer, the audio is about 20 minutes long so it takes some time for it to fully load.

I’m trying to achieve that when the wavesurfer finishes loading for the first time it saves the state so if you close the popup and open it back again it will just use the saved data.

I read all the documentation, issues and the code but I’m still not being able to achieve this even though it seems simple.

I suppose the code should be something like this, but actually the method “preload” doesn’t exist and I don’t find the way to preload the OfflineAudioContext

Any ideas?

this.waveSurfer = WaveSurfer.create({
	container: $waveForm,
	waveColor: 'purple',
	renderer: 'MultiCanvas',
	height: 80
});

this.waveSurfer.on('ready', () => {
	window.savedWavesurfer = this.waveSurfer.WebAudio.getOfflineAudioContext();
});

if (window.savedWavesurfer) {
	this.waveSurfer.preload(window.savedWavesurfer);
} else {
	this.waveSurfer.load('//example.com/audio.mp3');
}

[oxmanroman]

That event doesn’t trigger as I’m using webaudio. I read in the documentation that:

waveform-ready – Fires after the waveform is drawn when using the MediaElement backend. If you’re using the WebAudio backend, you can use ready.

[entonbiba]

@oxmanroman why don’t you use window.sessionStorage instead and just load it from there? Even better use window.localStorage so when the user closes and opens the browser again it remembers.