Optimize the code for calculating the size of overlapping sections during spectrum resampling

[shellRaining]

https://github.com/katspaugh/wavesurfer.js/blob/main/src/plugins/spectrogram.ts#L732-L736

The code in these lines seems to have some redundant calculations that can be simplified

const overlap = Math.max(0, Math.min(oldEnd, newEnd) - Math.max(oldStart, newStart));

[katspaugh]

Pull requests are welcome.

[shellRaining]

OK, And I have some additional questions.

When drawing a spectrogram of a relatively long audio, the calculation speed becomes very slow. If the zoom plugin is used in combination, the perception of this becomes even more apparent.

I looked at the source code and found that the resampling process takes up too much time. Therefore, I wonder if it's possible to abandon the resampling process and instead use the browser's built-in zoom to achieve this. I made a small demo and the effect seems to be quite good.

    for (let c = 0; c < frequenciesData.length; c++) {
      const freqData = frequenciesData[c]
      const imageData = new ImageData(freqData.length, height)
      const imgWidth = imageData.width
      const imgHeight = imageData.height
      for (let i = 0; i < imgWidth; i++) {
        for (let j = 0; j < imgHeight; j++) {
          const colorMap = this.colorMap[freqData[i][j]] as number[]
          const redIndex = ((imgHeight - j) * imgWidth + i) * 4
          imageData.data[redIndex] = colorMap[0] * 255
          imageData.data[redIndex + 1] = colorMap[1] * 255
          imageData.data[redIndex + 2] = colorMap[2] * 255
          imageData.data[redIndex + 3] = colorMap[3] * 255
        }
      }

      createImageBitmap(imageData).then((renderer) => {
        spectrCc.drawImage(
          renderer,
          0,
          height * c, // destination x, y
          width,
          height, // destination width, height
        )
      })
    }

https://html.spec.whatwg.org/multipage/canvas.html#drawing-images

I have not studied the course on Signals and Systems, so my understanding may be superficial. If there are any inaccuracies, please feel free to correct me.

[katspaugh]

Sure, if it's faster and the image is sharp enough, sounds like a good idea!

[shellRaining]

The first spectrogram in all the examples below is the original, and the second spectrogram is the one I rendered after removing the resample

mono.mp3:

after expand to 8x

Colorful Clouds Chasing the Moon:

after expand to 8x

config below

  const spectrogram = Spectrogram.create({
    labels: true,
    scale: "linear",
  });

origin code can be found in my repo

[katspaugh]

Looks great! If you want to retain the pixelated look: canvas.style.imageRendering = 'pixelated'.