feat(spectrogram): add logarithmic, bark and erb scales #3976
Conversation
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
examples/spectrogram.jsOops! Something went wrong! :( ESLint: 9.17.0 ESLint couldn't find an eslint.config.(js|mjs|cjs) file. From ESLint v9.0.0, the default configuration file is now eslint.config.js. https://eslint.org/docs/latest/use/configure/migration-guide If you still have problems after following the migration guide, please stop by WalkthroughThe pull request enhances the Spectrogram plugin in wavesurfer.js by expanding frequency scaling options. The changes introduce support for multiple frequency scales including linear, logarithmic, Mel, Bark, and ERB scales. This modification allows more flexible audio frequency visualization by adding new methods for filter bank creation and scale conversions in the Changes
Sequence DiagramsequenceDiagram
participant User
participant SpectrogramPlugin
participant FFT
User->>SpectrogramPlugin: Configure with scale option
SpectrogramPlugin->>FFT: Calculate Spectrum
SpectrogramPlugin->>SpectrogramPlugin: Create Filter Bank
SpectrogramPlugin->>SpectrogramPlugin: Convert Frequencies
SpectrogramPlugin->>User: Render Spectrogram
Assessment against linked issues
Poem
Tip CodeRabbit's docstrings feature is now available as part of our Early Access Program! Simply use the command Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
src/plugins/spectrogram.ts (3)
559-579: Efficiently constructed filter bank.
UsingcreateFilterBankwith parameterized functions (hzToScale,scaleToHz) is a neat approach, reducing repetitive code for different scales. Watch out for fractional indexing around line 570 to avoid out-of-bounds array writes onj+1.
597-607: Bark scale formula.
Modifyingbarkinline to adjust for the under/over edges is functional but slightly obscures the original parameter. Consider using an intermediate variable to avoid rewriting the function argument in place.
Line range hint
653-714: Potential memory overhead with repeated slicing.
In thegetFrequenciesmethod, repeatedly slicing largechannelDataarrays in a loop may incur performance overhead. Consider reusing a typed array buffer to avoid generating new slices each iteration.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
examples/spectrogram.js(1 hunks)src/plugins/spectrogram.ts(12 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
src/plugins/spectrogram.ts
[error] 215-215: Shouldn't redeclare 'FFT'. Consider to delete it or rename it.
'FFT' is defined here:
(lint/suspicious/noRedeclare)
🔇 Additional comments (7)
src/plugins/spectrogram.ts (6)
124-124: Consider verifying window function usage and FFT correctness.
The new calculateSpectrum method includes windowing and FFT logic. Ensure that the supplied window function and buffer sizes align correctly with project requirements, as subtle off-by-one or overlap issues may introduce artifacts in the spectrogram.
263-268: Good documentation on scale types.
The added comments describing logarithmic, bark, and ERB scales provide clarity and align with psychoacoustical concepts. This helps users understand the new frequency scaling capabilities.
302-323: Private fields look appropriate for plugin state.
These new private fields (e.g., frequenciesDataUrl, canvas, spectrCc, etc.) centralize the plugin’s configuration and rendering references. This organization should improve maintainability.
386-388: Filter bank allocation per scale.
Declaring distinct numbers of filters (numLogFilters, numBarkFilters, numErbFilters) provides flexibility across scales. Validate these defaults in practice to ensure they produce insightful spectrogram data.
489-489: Updated drawSpectrogram signature.
Switching to a more explicit drawSpectrogram(frequenciesData: Uint8Array[][]): void clarifies expected data structures. This will help consumers of this method understand the correct input format.
798-813: Labeling partial scales.
The switch statement for the scale-based frequency labeling is comprehensive. Confirm that the computed label frequencies match user expectations (e.g., the bark or ERB scale range).
examples/spectrogram.js (1)
21-21: Inform users of newly supported scales.
Adding 'logarithmic', 'bark', and 'erb' options in the comment is helpful. This ensures that developers experimenting with the spectrogram example can quickly switch scales without referencing documentation elsewhere.
Short description
This PR is my attempt to add support for more Y scales when rendering spectrograms. To reach feature parity with Audacity, only the Period scale is missing, but I couldn't find much information on it, so I left it out for now.
Resolves #1648
Implementation details
I made the function used to create the Mel filter bank generic to make it usable also for different scales and I added all the other common spectrogram scales. The output is not perfect, but I think it's not too bad either. Any suggestion to improve it is more than welcome. I also added some typings to make it easier to work with the plugin (types only, no breaking changes)
How to test it
Run
yarn start, go to the "Spectrogram" example and change thescaleproperty frommeltologarithmic,bark, orerb.Screenshots
Logarithmic
Bark
ERB
Checklist
Summary by CodeRabbit
New Features
Bug Fixes