Unable to plot the spectrogram in the specified div container

[EugenLu]

I want to draw the waveform and spectrogram of an audio clip using two different divs (#waveform and #spectrogram). However, in practice, through the browser's inspection feature, I found that both the waveform and the spectrogram were drawn in #waveform, while #spectrogram is empty.


The code I used:

import WaveSurfer from '../node_modules/wavesurfer.js/dist/wavesurfer.js'
import Spectrogram from '../node_modules/wavesurfer.js/dist/plugins/spectrogram.esm.js'
const ws = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'rgb(200, 0, 200)',
  progressColor: 'rgb(100, 0, 100)',
  url: 'lang_test.wav',
  sampleRate: 44100,
  minPxPerSec:100
})
ws.registerPlugin(
  Spectrogram.create({
    container: '#spectrogram',
    labels: true,
    splitChannels: true,
    scale: 'mel', 
    frequencyMax: 8000,
    frequencyMin: 0,
    fftSamples: 1024,
    labelsBackground: 'rgba(0, 0, 0, 0.1)',
  }),
)

//<div id="waveform" class="waveform" style="height: 200px;"></div>
//<div id="spectrogram" class="spectrogram" style="height: 400px;"></div>
//<button id="play">play</button>