Feat: [Spectrogram] add gain, range and scale options

[pengzhendong]

Short description

Resolves #1648

Based on:

• https://manual.audacityteam.org/man/spectrogram_settings.html
• https://manual.audacityteam.org/man/spectrogram_view.html

1. add options gainDB and rangeDB

• Gain (dB): Increases / decreases the brightness of the display. For small signals where the display is mostly "blue" (dark) you can increase this value to see brighter colors and give more detail. If the display has too much "white", decrease this value. The default is 20dB and corresponds to a -20 dB signal at a particular frequency being displayed as "white".
• Range (dB): Affects the range of signal sizes that will be displayed as colors. The default is 80 dB and means that you will not see anything for signals 80 dB below the value set for "Gain".

2. add Mel scale
3. add colormap roseus: https://github.com/dofuuz/roseus/blob/main/roseus/cmap/roseus.py

Screenshots

Checklist

• This PR is covered by e2e tests
• It introduces no breaking API changes

[katspaugh]

Awesome, thank you!

[pengzhendong]

@katspaugh Could you help me to fix the e2e test errors? I'm not familiar with the cypress.

It's covered by e2e tests in my local computer, but it's failed in github actions.

local:

github actions:

[katspaugh]

Strange, the images look the same. I’ll check.

[katspaugh]

On my local machine, the tests are also passing. 🤷 Anyway, merged the PR.

Thanks a lot! ❤️

[pablodz]

Awesome work, just using it

[puneet-yadav]

@pablodz Are you not having issues with height of the spectrogram? can you please provide the code.

[pablodz]

fixed with linear property @puneet-yadav

import WaveSurfer from 'wavesurfer.js';
import Spectrogram from 'wavesurfer.js/dist/plugins/spectrogram.esm.js';


...
const ws = WaveSurfer.create({
  container: `#waveform-${this.uniqueId}`,
  waveColor: '#7F5FC0',
  progressColor: '#5A3A7E',
  mediaControls: true,
  height: 100,
  plugins: [
    Spectrogram.create({
      scale: 'linear',
      height: 100,
      labels: true,
      container: `#spectrogram-${this.uniqueId}`,
    }),
  ],
});