Spectrogram's canvas does not full fill the container of it

[KrazyPhish]

Bug description

I was doing a Vue2 to Vue3 project, found that spectrogram's canvas cannot full fill its parent element.
But it works well in my Vue2 project.
Infomation of the versions:
my Vue2 project: wavesurfer.js 6.2.0 (2022-05-16)
my Vue3 project: wavesurfer.js latest

Environment

• Dev: VSCode, TypeScript, Vue3
• Browser: Chrome - version 116.0.5845.97
• OS: windows 11

Minimal code snippet

In Vue2:
plugins.push(
spectrogram.create({
container: this.$refs.waveSpectrogramRef,
labels: true,
height: height * this.verticalZoom.value,
colorMap
})
)

In Vue3:
const spectrogram: SpectrogramPlugin = SpectrogramPlugin.create({
container: waveSpectrogramRef.value as HTMLElement,
labels: true,
height: height * state.verticalZoom,
colorMap
})

The value height equals its parent's clientHeight, it's a constant value, so is the verticalZoom value.

Expected result

Like wavesurfer works in my Vue2 project, spectrogram's canvas fully fill its parent element.

Obtained result

Same as Expected result

Screenshots

The parent element div.

The left side label canvas, this means spectrogram tried to fill the element, I guess.

The style attributes show that the canvas has fully filled its parent element, there must be some problems with canvas while the plugin working with canvas.

[katspaugh]

You might need to increase the sampleRate for it to have the data to fill the chart. Try passing 22050 or 44100 like here: https://wavesurfer-js.org/examples/?spectrogram.js

[KrazyPhish]

Attribute sampleRate 22050 works the same as my last try, 44100 makes a little diffrence but still didn't solve the problem, here's the pic in 44100 samepleRate, it seems that only expanded the label values:

[katspaugh]

I see, thanks for checking this. Looks like a regression in v7, since you said it worked well in v6. 🐞

[KrazyPhish]

Yep, the version of 6.2.0 worked well, but the problem above was found while using the version of 7.1.5. Hope this can help.

[Richard-2-4-2]

hi all, is there the same isuue?

[katspaugh]

Try decreasing your sample rate

[Richard-2-4-2]

thanks for your answer. no changes (on left). on right, image of audacity for comparison. seems that frequencies beyond 4000hz are not drawn . sorry i pasted wrong image

[KrazyPhish]

It looks like decreasing the sampleRate value solved your problem in some way? I've tried it too, but makes no diffrence in my case

[katspaugh]

Try also adjusting the min and max frequency accordingly.

https://wavesurfer.xyz/docs/types/plugins_spectrogram.SpectrogramPluginOptions

frequencyMax?: number
Max frequency to scale spectrogram. Set this to samplerate/2 to draw whole range of spectrogram.

[Richard-2-4-2]

my sample is 44100 hz. i can give a value up to 11050hz or i must use these value ?

[Richard-2-4-2]

It looks like decreasing the sampleRate value solved your problem in some way? I've tried it too, but makes no diffrence in my case
sorry, i copy only one layer of photoshop. the two graphes are for comparison to audacity ( i want to have similar appearence)

[katspaugh]

You can set any value down to 8000 for sampleRate. In Chrome down to 3000.

[Richard-2-4-2]

for spectrogram :
if i define height: 500 : 181 pixels drawn
height: 2000 : 185 pixels drawn
is it normal?
i dont understand the samplerate option. the value is given by the file, non ?
something special to chrome compared to others?

[KrazyPhish]

I am very glad to see this to solve my problem, temporarily. I guess that setting the sampleRate and frequencyMax may cut the canvas, however, didn't like the docs said to set the frequencyMax to sampleRate/2 but the sampleRate/4.

[Richard-2-4-2]

KrazyPhish, how is the samplerate of your audio file? wich values are you using for sampleRate and frequencyMax ?

[KrazyPhish]

I am not sure about my files sample rate range cause the file was somehow just use to test, 22050 for the sampleRate and 5512.5 for the frequencyMax are my settings.

[Richard-2-4-2]

my sample is Mono, 44100Hz, 32bits.
sorry, i was wrong tried to setting sampleRate: 44100 for spectrogram and not wave surfer.
in the previous version, it was not necessary to specify samplerate and i was confused because the wav file have is own samplerate. it works as expected, now :

next steps : zoom and scrolling according to waveform