How to re-render spectrogram when wavesurfer zoom change

[zhangqing12345678]

Dear, I am using wavesurfer to generate audiogram and spectrogram, now i have a problem, if I change wavesurfer zoom(for exmaple, from 100 to 50), audiogram will be re-render, but spectrogram has no changes. I want the spectrogram to change accordingly. Could you help to give me some advices for this problem? Thanks

[entonbiba]

do you a link to see where you are using the spectrogram plugin?

[zhangqing12345678]

@entonbiba

I used it in Vue project, you can refer sample code as below

import WaveSurfer from 'wavesurfer.js' import SpectrogramPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.spectrogram' import Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline' import Region from 'wavesurfer.js/dist/plugin/wavesurfer.regions' import Cursor from 'wavesurfer.js/dist/plugin/wavesurfer.cursor' import { randomRegionId, randomColor } from '../../../views/dataMgmt/dataMgmt'

initAudio(status = 0, url = '', data = []) {
  const _this = this
  // const audioCtx  = new AudioContext({sampleRate: 22000})
  _this.isWholeAnnotate = _this.wholeAnnotate
  if (_this.wavesurfer) {
    _this.wavesurfer.destroy()
    _this.wavesurfer = ''
  }
  _this.$nextTick(() => {
    _this.loading = true
    _this.wavesurfer = WaveSurfer.create({
      container: _this.$refs.waveform,
      interact: false,
      audioRate: 1,
      audioContext: '加载中...',
      forceDecode: true,
      minPxPerSec: 100,
      scrollParent: true,
      //barGap: 3,
      // normalize: true,
      waveColor: '#656565',
      cursorColor:'#0353e9',
      cursorWidth:'1px',
      progressColor:'#0353e9',
      backend: 'MediaElement',
      hideScrollbar: false,
      partialRender: false,
      responsive: true,
      pixelRatio: 1.25, // Can be set to 1 for faster rendering
      plugins: [
        Region.create({
          regions: [],
          dragSelection: {
            slop: 2
          }
        }),
        Timeline.create({
          container: _this.$refs.timeline,
          secondaryColor: '#FF0000', // 红色
          secondaryFontColor: '#FF0000',
          secondaryLabelInterval: _this._secondaryLabelInterval,

          primaryColor: '#3498DB', // 蓝色
          primaryFontColor: '#D3498DB',
          primaryLabelInterval: _this._primaryLabelInterval,
          formatTimeCallback: _this._formatTimeCallback,
          timeInterval: _this._timeInterval,
          labelPadding: 2
        }),
        Cursor.create({
          showTime: true,
          height: '50px',
          opacity: 1,
          customShowTimeStyle: {
            'background-color': '#000',
            color: '#fff',
            padding: '2px',
            'font-size': '10px'
          }
        }),
        SpectrogramPlugin.create({
          wavesurfer: _this.wavesurfer,
          container: _this.$refs.spectrogram,
          fftSamples: 512,
          labels: true,
          colorMap: _this.colorMap,
          deferInit: true
        })
      ]
    })                  
  })
},

[entonbiba]

wavesurfer.spectrogram.render() should update the spectrogram , if it's within a scrollable element then you can also do wavesurfer.spectrogram.updateScroll(element) to update the scroll position

[zhangqing12345678]

@entonbiba I had a test follow your suggestion I called wavesurfer.spectrogram.render() after zoom value change, Seems only spectrogram canvas height and width updated, but spectrogram graph has no change .

[gholzmann]

I am experiencing the same problem: zoom works in the waveform, but not in the spectrogram. Also tried manually calling wavesurfer.spectrogram.render() and wavesurfer.spectrogram.updateScroll(element) ...

@entonbiba were you able to resolve the issue?

[SvenFranz]

The width of the spectrogram canvas will not be updated after zooming. My solution: wavesurfer.spectrogram.canvas.style.width = Math.max(wavesurfer.drawer.getWidth(), Math.round(wavesurfer.getDuration() * wavesurfer.params.minPxPerSec * wavesurfer.params.pixelRatio)) + "px"

[munenari]

Thanks for the answers so far! Using the answers above, I solved the problem with the following code

wavesurfer.zoom( your_zoom_value )
wavesurfer.spectrogram.init()

[flagg2]

This worked for me:

      waveSurfer.zoom(zoom);
      waveSurfer.spectrogram.init();
      $("spectrogram > canvas").css("width", `${waveSurfer.drawer.width / waveSurfer.params.pixelRatio}px`);