version 4.0.0

[hvianna]

What's new:

🚨 BREAKING CHANGES:

• Removed deprecated properties:

  • energy - use getEnergy() instead
  • isLedDisplay - use isLedBars instead
  • peakEnergy - use getEnergy('peak') instead
  • showLeds - use ledBars instead

• getBars() now includes an additional freq property for each element, representing the center frequency of the band.
  In addition, the range of each band has been adjusted so that frequencies that were previously at the lower edge (freqLo) are now located at the center of the band.

• stereo has been DEPRECATED and will be removed in version 5 - use channelLayout instead.

Added:

• ansiBands - use ANSI/IEC preferred frequencies for the octave bands;
• channelLayout - adds option for dual channel combined spectrum, with both channel graphs overlaid;
• frequencyScale - adds linear and perceptual (Bark/Mel) frequency scales;
• gradientLeft and gradientRight - allow to select different gradients for each channel;
• isBandsMode read-only property;
• linearAmplitude - use linear values instead of dB for spectrum amplitudes;
• linearBoost - amplify low energy values when using linear amplitude;
• noteLabels - display musical note labels instead of frequency values on the X-axis;
• weightingFilter - select from five different weighting filters for improved spectrum visualization;
• Two new built-in gradients: orangered and steelblue.

Thank you @jonathan-annett (#28) and @TF3RDL (#30 and #38) for the suggestions that led to the implementation of several of these new features.

Fixed:

• LED peaks showing below zero level when reflexRatio > 0.

Changed and improved:

• Optimized generation of octave bands, with more accurate ranges and center frequencies;
• Frequency labels on the X-axis now show different values depending on the value of ansiBands, to properly match the bands' center frequencies;
• The onCanvasDraw callback is now passed an additional object with timestamp and gradients information;
• The prism and rainbow gradients were recreated using the beautiful 12-bit rainbow palette by Kate Morley - If you need the old colors check this post;
• Custom gradients can now register a single color;
• splitGradient now works for horizontal gradients in radial visualization;
• maxFreq is now capped to half the AudioContext's sample rate (Nyquist frequency);
• Export additional types and interfaces in the TypeScript definition file;
• Code optimizations, minor fixes and clean-up;
• Revised and improved demos and documentation.

---

This discussion was created from the release version 4.0.0.

[evoyy]

Congratulations on the new release! I upgraded to v4 with no issues.

I tried the new option channelLayout set to dual-combined. I think it's an interesting idea, though it is not very visually effective since both channels blend together. I wonder if any of the canvas composite operations would help here. Maybe you tried that?

Also, I prefer the old rainbow gradient; it's more colorful and the new one seems a bit dull. Maybe that's just what I'm used to. Thanks for showing how to keep it, that was useful.

[hvianna]

Thanks @evoyy! 🙌

Indeed, the dual-combined layout currently works best with fillAlpha < 1 (on Graph mode or using outlineBars) so you can see both channels.

I did some initial testing with an option to control the globalCompositeOperation, but it needs more work. It's on my to-do list for future releases though.

Thanks again for the feedback!

[evoyy]

fillAlpha does help a bit. I guess it also depends on the audio as well, the difference in L/R channels is often very subtle. A crazy idea would be to give the analyzer a z-plane and put one channel slightly behind the other...

I have added audioMotion-analyzer to BAT.directory, which is a directory/database of Brave verified content creators I am developing.