[Feature Request] Dynamic gradients, spectrogram display, and combined channel spectrum

[TF3RDL]

A dynamic gradient like in WhiteCap visualizer (like changing colors based on magnitude of the FFT, the current time, the center frequency for each band, or even stereo differences) would be cool (especially on spectrogram displays), but here's a caveat, setting colors for each frequency band can only apply to frequency bars display, but it can be easily done using color gradients that change over time, which works best on linear spectrum.

As for the spectrogram display, I prefer the showcqt-style spectrum/spectrogram display (where the top is the spectrum and the bottom is spectrogram) and I think it pairs well with dynamic gradients.

I'd like to see combined channel spectrum display, because I think it is easier to see stereo differences simply based on different colors for each channel.

[hvianna]

Oh I like these!

I'd like to see combined channel spectrum display, because I think it is easier to see stereo differences simply based on different colors for each channel.

How do you imagine this one? Overlayed channels with the top one using semi-transparent fill?

[TF3RDL]

For the combined channel/overlayed spectrum, this can be easily done using semi-transparent fill and more advanced ones can be done using globalCompositeOperation.

[TF3RDL]

Oh, I forgot to mention that adding dynamic gradients, different colors/gradients for base spectrum and peaks (to allow replicating the appearance of Bars and Waves visualization from Windows Media Player), overlayed channel spectrum requires refactoring how color gradients currently work, which probably involves breaking changes or is it?

[hvianna]

Yes, instead of a single gradient I suppose we would need a more detailed color scheme definition. Breaking changes are not a problem, since version 4 will already have some.

By the way, I forgot to mention that changing the gradient based on current time can already be done by simply re-registering the same gradient with different colorstops/offsets - https://codepen.io/hvianna/pen/KKqbeLN - not super elegant though 😅 maybe I could add an option to the gradient definition, so the module can manage it internally.

[TF3RDL]

Definitely, currently yes but not without caveats for dynamic gradients as re-registering the same gradient with different colorstops isn't elegant nor having best performance.

BTW, I coded the showcase of overlayed channel spectrum
and here's the screenshot for this:

[hvianna]

4.0.0-beta.4 is up with combined dual channel.

See #42

[TF3RDL]

Definitely cooler than having separate rows/columns for each channels (actually, it is subjective anyway besides seeing channel differences easier with all channels displayed on the same display)

BTW, I coded a spectrogram visualization that displays both magnitude and phase where luminance represents the first and hue represents latter (however, the built-in FFT on AnalyserNode doesn't provide phase information per #30)

[TF3RDL]

I haven't been posting in a while, but colorMode and channelLayout = 'dual-combined' has already been implemented in newer versions but what about combined spectrum/spectrogram visualization like this below? Which is something I've wanted for an upcoming new version of Enhanced Spectrum analyzer (foo_enhanced_spectrum_analyzer) component for foobar2000