Load audio waveform, but load the audio file ONLY when the user clicks 'Play' button?

[danielmat3]

Hello!

How do I load just the audio waveform and make it so the audio file downloads only when the user clicks 'Play'? I'm not sure how to set the 'Preload' option to "none".

I've researched online on many forums from other people, but there's no explanation for that... ?

Specifically I'm looking how to set the audio settings to preload="none".

Similar discussions:

1. Pre-rendered PCM data does not work as expected #2752
2. FR: Prevent HTML Audio Tag Injection (lazyload option) #1237
3. (Take a look at this one):
   https://stackoverflow.com/questions/38918909/how-can-i-load-only-waveform-and-wait-to-user-click-play-to-download-the-audio

My website where I want to solve the problem:
https://unwav.com/product/groove-premium-tech-house-sample-pack/

I have integrated WaveSurfer-WP plugin from X-Raym:
https://wordpress.org/plugins/wavesurfer-wp/

The following plugin uses your WaveSurfer.js script but from how much I can see it is "outdated". I reached out to X-Raym (plugin creator) and he told me that I need to edit the wavesurfer.js parameters to achieve the result.

=========

There's a similar website that uses the same WaveSurfer-WP plugin like me and integrated CDN for the audio files, but if you compare his wavesurfer.js & wavesurfer-wp.js files the code is nothing similar to mine.

Please see: https://stickz.co/sentio/

On this website above ^ he managed to make this work and the audio is set to - preload="none"

Since you are the "god" of wavesurfer and you know what you are doing, I am reaching out to you for a solution for this...

[katspaugh]

Wavesurfer needs to download the entire audio to render the waveform. It then also uses the downloaded blob for playback. The only way to avoid loading the audio is to pre-decode peaks:

const media = new Audio()
media.preload = 'none'

const wavesurfer = WaveSurfer.create({
  container: '..,',
  media,
  peaks: [ 0.1, 0.2, 0.3 ],
  duration: 123,
})

[danielmat3]

Do you have any recommendations how can I implement wavesurfer on wordpress?

[katspaugh]

You can use this plugin: https://gist.github.com/katspaugh/5644c7bcf8974ab2e55fb4d7c4f41437
Modify the wavesurfer options directly in the code. Use like this:

[wavesurfer url="..."]

[danielmat3]

That does not seem to work for me, look at the screenshot

[wavesurfer url="https://unwav.b-cdn.net/GROOVE_Samples/Unwav_Groove_Top_Loop_10_124BPM.mp3"]

Website page:
https://stg-unwavcom-staging.kinsta.cloud/product/groove-premium-tech-house-sample-pack/

[katspaugh]

The shortcode should be inside a blog post, as a part of the content.

[danielmat3]

Yes, but it would be better to have Wavesurfer audio on my product pages. Since my products are related to music production, having audio demos directly on the product pages would offer customers a clearer preview of what they can expect.

Here's an example from a different website:
https://cymatics.fm/collections/store/products/mythic-hyperpop-melody-collection

[theDanielJLewis]

Is it possible to replace the prerendered peaks when the audio file does download?

[katspaugh]

You’d have to call load twice in that case. First with peaks passed and a second time without.