Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix: [Spectrogram] fix cropping and scaling issues #3796

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Fix: [Spectrogram] fix cropping and scaling issues #3796

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 19 additions & 11 deletions src/plugins/spectrogram.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -484,12 +484,13 @@ class SpectrogramPlugin extends BasePlugin<SpectrogramPluginEvents, SpectrogramP
for (let c = 0; c < frequenciesData.length; c++) {
// for each channel
const pixels = this.resample(frequenciesData[c])
const bitmapHeight = pixels[0].length
const imageData = new ImageData(width, height)

for (let i = 0; i < pixels.length; i++) {
for (let j = 0; j < pixels[i].length; j++) {
const colorMap = this.colorMap[pixels[i][j]]
const redIndex = ((height - j) * width + i) * 4
const redIndex = ((bitmapHeight / 2 - j) * width + i) * 4
imageData.data[redIndex] = colorMap[0] * 255
imageData.data[redIndex + 1] = colorMap[1] * 255
imageData.data[redIndex + 2] = colorMap[2] * 255
Expand All @@ -498,17 +499,18 @@ class SpectrogramPlugin extends BasePlugin<SpectrogramPluginEvents, SpectrogramP
}

// scale and stack spectrograms
createImageBitmap(imageData).then((renderer) => {
createImageBitmap(imageData,
0,
Math.round(bitmapHeight - bitmapHeight * (freqMax / freqFrom)) / 2,
width,
Math.round(bitmapHeight * ((freqMax - freqMin) / freqFrom))
).then((bitmap) => {
spectrCc.drawImage(
renderer,
bitmap,
0,
height * (1 - freqMax / freqFrom), // source x, y
height * c,
width,
(height * (freqMax - freqMin)) / freqFrom, // source width, height
0,
height * c, // destination x, y
width,
height, // destination width, height
height * 2,
)
})
}
Expand Down Expand Up @@ -566,11 +568,17 @@ class SpectrogramPlugin extends BasePlugin<SpectrogramPluginEvents, SpectrogramP
return melSpectrum
}

private getWidth() {
// ToDo: Allow custom or max width to reduce rendering time.
// Note: not hi-dpi, but height behaves the same way (different for labels canvas though).
return this.wavesurfer.getWrapper().offsetWidth;
}

private getFrequencies(buffer: AudioBuffer): number[] {
const fftSamples = this.fftSamples
const channels = this.options.splitChannels ?? this.wavesurfer?.options.splitChannels ? buffer.numberOfChannels : 1

this.frequencyMax = this.frequencyMax || buffer.sampleRate / 2
this.frequencyMax = this.frequencyMax || buffer.sampleRate / 4

if (!buffer) return

Expand Down Expand Up @@ -712,7 +720,7 @@ class SpectrogramPlugin extends BasePlugin<SpectrogramPluginEvents, SpectrogramP
}

private resample(oldMatrix) {
const columnsNumber = this.width
const columnsNumber = this.getWidth()
const newMatrix = []

const oldPiece = 1 / oldMatrix.length
Expand Down
Loading