Pre-rendered PCM data does not work as expected

[robots4life]

I have created the PCM data correctly per https://wavesurfer-js.org/api/class/src/wavesurfer.js~WaveSurfer.html#instance-method-exportPCM and also checked this issue https://github.com/wavesurfer-js/wavesurfer.js/issues/2439 as well as this comment https://github.com/wavesurfer-js/wavesurfer.js/issues/2557#issuecomment-1199946658.

This PCM data is then stored in an array. Here is a REPL of how I create the PCM data.
https://svelte.dev/repl/f4be2c6a630a4b66833c8fe8b06ab9e5?version=3.57.0

wavesurfer.js version(s):

"wavesurfer.js": "^6.6.2"

Browser and operating system version(s):

Firefox 111.0.1 (64-bit), Linux

Code needed to reproduce the issue:

https://svelte.dev/repl/7cee1ab9dce6422eb7b3059433948745?version=3.57.0

(Optional) Steps in the UI to reproduce the issue:

Once the REPL loads there are 2 ways to see that the pre-rendered PCM data does not seem to work with wavesurfer.

1. After the REPL loads click "+ 5 Seconds" and see the cursor jump to the end of the track. This means that the PCM data for the track was somehow not loaded correctly.

2. Reload the REPL, this time click "PLAY", you will notice a considerable delay before the track is played. I assume this delay comes from re-loading the PCM data. When I load longer tracks the delay before playing the track becomes 4+ seconds or more.

I would love to be able to use the generated PCM data and load it into wavesurfer correctly. Unfortunately there is no error message that comes up, wavesurfer.load(audio, peaks); seems to work. Kindly please do let me know if I have missed something perhaps, thank you.

[prakharpbuf]

@katspaugh I have been looking into this and it seems like just calling load() instead of this.tmpEvents.push(this.once('interaction', load)); at wavesurfer.js:1503 fixes this because this.buffer is empty when we provide the peaks array with WebAudio backend.

This thing works fine with MediaElement.

[robots4life]

@prakharpbuf @katspaugh Would you know how I can get rid of these warnings ?

webaudio.js:76 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu

webaudio.js:238 [Deprecation] The ScriptProcessorNode is deprecated. Use AudioWorkletNode instead. (https://bit.ly/audio-worklet)

[prakharpbuf]

1. Resume context in Chrome >= 71 #1531
2. Replace the deprecated ScriptProcessorNode with AudioWorkletNode #1281

[katspaugh]

Thanks @robots4life and @prakharpbuf!
I've reopened the issue about the audio context, and we need to make a new release with the script node fix.

[robots4life]

The preload parameter is something that wavesurfer passes to the HTMLMediaElement. It's not really a wavesurfer parameter. Read more about the preload option here. This link explains the preload option for HTML video element, but similar concepts apply to the audio element too.

Rendering the waveform with PCM data is already optimized. Notice how when you refresh the REPL the waveform with PCM data loads much faster than the one without it. This is also partly the reason why the waveforms for PCM data and load somewhat differ.

#2752 (reply in thread)

@prakharpbuf Passing the preload attribute "none" in my case increased web performance incredibly to pass PageSpeed 100/100 mobile & desktop for a page with 9 huge audio files on them, highly invaluable article and info you linked to, thanks so much.

[danielmat3]

@robots4life Hi Robert, how can I contact you? I need your help

[robots4life]

@robots4life Hi Robert, how can I contact you? I need your help

Sure, how could I help you ?

[danielmat3]

Hey Robert!

I'm searching for a developer who can help me with WaveSurfer integration on my product pages for MP3 audio files. I want to optimize performance by setting the preload attribute to "none" for better PageSpeed scores and smoother customer experience.

I'm currently using the Wavesurfer WP plugin, but it doesn't allow me to set up preload options along with peaks.
https://wordpress.com/plugins/wavesurfer-wp

If you can assist with this, drop your email below so we can chat!

Thanks a bunch!

[robots4life]

Hey Robert!

I'm searching for a developer who can help me with WaveSurfer integration on my product pages for MP3 audio files. I want to optimize performance by setting the preload attribute to "none" for better PageSpeed scores and smoother customer experience.

Check out my website: unwav.com/product/groove-premium-tech-house-sample-pack/

I'm currently using the Wavesurfer WP plugin, but it doesn't allow me to set up preload options along with peaks. https://wordpress.com/plugins/wavesurfer-wp

If you can assist with this, drop your email below so we can chat!

Thanks a bunch!

How can I contact you, let me know a suited email for your business, I could then be in touch, thank you.

[danielmat3]

You can contact me here:
[email protected]

[danielmat3]

Hi Robert,
Could you please check if you received my emails? I haven't heard back from you since 4 days ago.

[robots4life]

Hi Robert, Could you please check if you received my emails? I haven't heard back from you since 4 days ago.

I sent you a message as a reply to your message from Fr 8th of March 24, since then I have not received any of your messages. I have just emailed you again, should work.

Regards
Robert

[danielmat3]

That's weird, Robert. I believe you missed my previous five emails that I've sent you. I noticed that something was off.

Is there any other email address, like Google Mail, that I can use to contact you?

I'm not sure why you didn't receive my emails. I checked my emailing system, and everything seems fine on my end.