Spectrgram does not set to specified height. Also, the quality of spectrogram is poor

[puneet-yadav]

`import React, { useEffect, useRef } from "react";
import WaveSurfer from "wavesurfer.js";
import Spectrogram from "wavesurfer.js/dist/plugins/spectrogram.esm.js";

const Waveform = () => {
const waveformRef = useRef(null);

useEffect(() => {
const ws = WaveSurfer.create({
container: waveformRef.current,
waveColor: "rgb(200, 0, 200)",
barHeight: 20,
progressColor: "rgb(100, 0, 100)",
url: "/recording.wav",
sampleRate: 40000,
});

ws.registerPlugin(
  Spectrogram.create({
    labels: true,
    height: 256,
    splitChannels: true,
    frequencyMax: 20000,
  })
);

return () => {
  ws.destroy();
};

}, []);

return

;
};

export default Waveform;
`

Above is my code for the spectrgram. I am using "wavesurfer.js": "^7.8.3" in my react application. The spectrgram does not change height to the specified height in the options. It worked before now suddenly it stopped scaling to the specified height. Also, when I change the maxFrequency to 3000 HZ the spectrogram becomes blurry and not crisp and clear.

Below is the screenshot

[katspaugh]

@pengzhendong any ideas?

[katspaugh]

@puneet-yadav could you test if #3796 solves any of these issues?

[puneet-yadav]

@katspaugh It did not seem to solve the issue.

import Spectrogram from "wavesurfer.js/dist/plugins/spectrogram.esm.js";
I created a new class ( CustomSpectrogramRender ) which extends Spectrogram and changed the functions there as mentioned in the commit. Then in the wavesurfer plugin [] used this CustomSpectrogramRender.create() instead of Spectrogram.create().

One of the major issues / blockers in my app is that the quality of spectrogram is not as good as say Audacity for lower frequencies. the image kind of looked stretchy in y axis. Below is the image from my app. Any solutions for that.

For example : Below 1st image is from my app and the second image is from react plotly

[pengzhendong]

@puneet-yadav Could you provide the wave file?

[puneet-yadav]

@pengzhendong I cant provide the same file. But will use some other file and plot the spectrograms again. Will let you know.

[puneet-yadav]

First spectrogram is generated through wavesurfer.js and the second one through plotly. This is the link for the wav file -> https://www2.cs.uic.edu/~i101/SoundFiles/PinkPanther60.wav

[puneet-yadav]

@katspaugh @pengzhendong Issue fixed for the height after setting scale as "linear". For the quality I guess I need to change the gain and range. If you guys have other solutions / ideas. Please let me know

[puneet-yadav]

@katspaugh I am facing another issue
regions.on("region-clicked", (region, e) => {
region.remove();
regionColorHandler();
});

regions.on("region-created", (region, e) => {
region.remove();
});

On region click the region is removed from the list as well as UI but on region-created. The region is only remove from the list and the not UI.

[pengzhendong]

@puneet-yadav Thx, I will try to fix it. (Increasing the value of numMelFilters could imporve the quality of spectrogram)