If spectrogram uses a different container to wavesurfer, spectrogram will not zoom #4023

Mattk70 · 2025-02-10T23:06:46Z

Minimal code snippet

// Spectrogram plugin

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

// Create an instance of WaveSurfer
const ws = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'rgb(200, 0, 200)',
  progressColor: 'rgb(100, 0, 100)',
  url: '/examples/audio/audio.wav',
  sampleRate: 44100,
  minPxPerSec:100
})

// Initialize the Spectrogram plugin
ws.registerPlugin(
  Spectrogram.create({
    container: '#spectrogram',
    labels: true,
    height: 200,
    splitChannels: true,
    scale: 'mel', // or 'linear', 'logarithmic', 'bark', 'erb'
    frequencyMax: 8000,
    frequencyMin: 0,
    fftSamples: 1024,
    labelsBackground: 'rgba(0, 0, 0, 0.1)',
  }),
)

// Play on click
ws.on('interaction', () => {
  ws.playPause()
})


// Zoom on dblclick
ws.on('dblclick', () => {
  ws.options.minPxPerSec*=2
  ws.zoom(ws.options.minPxPerSec)
})

/*
<html>
  <div id="waveform"></div>
  <div id="spectrogram"></div>
  <p>
    📖 <a href="https://wavesurfer.xyz/docs/modules/plugins_spectrogram">Spectrogram plugin docs</a>
  </p>
</html>
*/

Expected result

Spec stays in sync with waveform

Obtained result

Waveform zooms, spec doesn't

Additional context

I'm not interested in the waveform, I would just like to render the spec. Currently (i.e. wavesurfer v6) I use display: none for the waveform div.

The workaround I have come up with for wavesurfer v7 is to have them use the same container, set both ws and spectrogram heights to 256, and apply the following css:

#waveform{
        height = '256px';
        display = 'flex';
        flexDirection = 'column';
        justifyContent = 'flex-end';
}

Mattk70 added the bug label Feb 10, 2025

katspaugh added the spectrogram label Feb 11, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

If spectrogram uses a different container to wavesurfer, spectrogram will not zoom #4023

If spectrogram uses a different container to wavesurfer, spectrogram will not zoom #4023

Mattk70 commented Feb 10, 2025 •

edited

Loading

If spectrogram uses a different container to wavesurfer, spectrogram will not zoom #4023

If spectrogram uses a different container to wavesurfer, spectrogram will not zoom #4023

Comments

Mattk70 commented Feb 10, 2025 • edited Loading

Minimal code snippet

Expected result

Obtained result

Additional context

Mattk70 commented Feb 10, 2025 •

edited

Loading