wavesurfer.js icon indicating copy to clipboard operation
wavesurfer.js copied to clipboard

Normalize option not promoted over python normalizing?

Open happylinks opened this issue 3 years ago • 6 comments

Hey there,

I was just wondering if there is a reason why the "normalize=true" flag is not explained in the FAQ about "How to generate waveform data on the server?" instead of having to run the python script to normalize the json. It seems to do the same thing? Just a lot easier to not have to also run that script.

Maybe I'm missing something though. If not I can make a PR to the docs.

Thanks,

Michiel

happylinks avatar Sep 17 '21 08:09 happylinks

The reason why generating waveform data on the server is suggested is you can do it once and serve the small .json files, which takes much less time than it takes for the browser to render your waveforms.

Loading the audio and the waveform data from the server can be almost instant. Loading the audio and waiting for the browser to draw the waveform can take anything from 1 to 10+ seconds, depending on the size of the file. normalize is just an option for the browser drawing. If you choose to draw the waveforms on the server and cache them, then normalizing them is up to you.

sundayz avatar Sep 17 '21 10:09 sundayz

Hey @sundayz, thanks for the reply. I completely get why I’d want to use audiowaveform on the server. The part I didn’t get is the python normalize script vs the normalize=true option. So audiowaveform makes a json with -128 to 128 scale, and the python script makes this -1 to 1. But I think the normalize=true does the same thing, accepting the 128-scale and making it 1-scale. So wouldn’t it be easier to not use the python normalize but just the plain json coming from audiowaveform and enabling normalize=true on wavesurfer?

happylinks avatar Sep 17 '21 11:09 happylinks

I see what you mean now. Easiest way is to try it and see what it looks like :p

Here is where normalize is checked in the code. It looks like using that option might have the same effect as normalizing it yourself.

https://github.com/katspaugh/wavesurfer.js/blob/8ec83d2119a1c4ac27ae6a5f1e1ebbd5e67ba53f/src/drawer.multicanvas.js#L515-L521

sundayz avatar Sep 17 '21 11:09 sundayz

Yeah, I did try it, running in production since this morning😁 So will see if I run into any trouble. But yeah, if it’s the same we could maybe add it to the documentation, because right now that option isn’t easily found.

happylinks avatar Sep 17 '21 11:09 happylinks

For anyone else who doesn't necessarily want to use or is unable to install audiowaveform on their server, this solution works for me. I have a site where I need to load several wavesurfer-js canvases on a single page. So, the first time a waveform is generated by wavesurfer-js, I use an api route to send the waveform data to the database record for that file. The server script sends all the fields so if that field is no longer empty, it uses the data. That way, the waveform data only has to be processed by wavesurfer-js once per file. Here's a codepen - https://codepen.io/swampthang/pen/bGRzKKP

swampthang avatar Sep 29 '21 21:09 swampthang

But yeah, if it’s the same we could maybe add it to the documentation,

Can you create a pull request @happylinks?

thijstriemstra avatar Feb 20 '22 21:02 thijstriemstra