version 5.0.0-alpha.1

• Fixed: rendering of vintage LEDs for big LED elements and/or themes with several colorStops;
• Incorporates fixes from stable version 4.5.4.

See the v5.0.0-alpha.0 release for the complete list of changes in version 5!

For bug reports and suggestions, please use the version 5 Discussion.

version 4.5.4

Minor bugfix release

• Fixes peaks not fading out in radial graph mode when fadePeaks enabled;
• Updated dev npm packages to address vulnerability reports;
• Updated the suggested CDN in the Usage section to jsDelivr, which can provide minified versions of both the ESM and UMD modules.

NOTE: If you're using this package from a CDN, make sure to pin the version to v4 (by adding @4 after the package name) to prevent breaking changes when stable v5 is released!

version 5.0.0-alpha.0

What's new

WARNING: code in alpha stage is subject to major, drastic changes! DO NOT USE THIS VERSION IN PRODUCTION!

Source code is in the version5 branch.

Demo is available at https://audiomotion.dev/demo/alpha/

Version overview:

• Expect LOTS of breaking changes 😅 - I'm taking this opportunity to consolidate related properties and make some long-overdue changes;
• Gradients are now called Themes - added new peakColor property in registerTheme() and on-the-fly horizontal and reverse gradient generation;
• LED bars look better and are easier to customize - see showLedMask and setLeds();
• X- and Y-axis scales are now customizable - setXAxis() and setYAxis();
• The analyzer canvas is now always transparent, so all background-related properties are gone, including bgColor in the theme definition;
• No more errors thrown for non-critical issues, like invalid option values;
• The onCanvasDraw callback is now passed all color information from the currently active themes (fillStyle and strokeStyle are no longer explicitly set).

🚨 BREAKING CHANGES:

Modified properties	Changes made
alphaBars	value type changed to string
ledBars	value type changed to string
mode	value type changed to string
peakLine	value type changed to number
radial	value type changed to number

Removed methods and properties	Use this instead
bgAlpha	set desired opacity via CSS
fadePeaks	peaks = "fade"
gradient	setTheme() / getTheme()
gradientLeft	setTheme(name, 0) / getTheme(0)
gradientRight	setTheme(name, 1) / getTheme(1)
gravity	peakDecayTime — use the peak drop analysis tool to compare/migrate previous customizations
isLumiBars	isAlphaBars
lumiBars	alphaBars = "full"
peakFadeTime	peakDecayTime
radialInvert	radial = -1
registerGradient()	registerTheme()
setLedParams()	setLeds()
showBgColor	set desired background color via CSS
showPeaks	peaks
splitGradient	spreadGradient
stereo	channelLayout
trueLeds	ledBars = "vintage"
overlay	always transparent now (equivalent to overlay: true) — if desired, set an opaque background color via CSS

Added:

• bandResolution property;
• getThemeData() and getThemeList() mehods;
• peakColor property in theme definition - see registerTheme();
• peaks property;
• registerTheme() and unregisterTheme() methods;
• setTheme() and getTheme() methods;
• setThemeModifiers() and getThemeModifiers() methods;
• setXAxis() and setYAxis() methods;
• showLedMask property;
• Exported constants.

Changed:

• New default value for fillAlpha: 0.5 (previously 1);
• New default value for lineWidth: 1 (previously 0);
• New default value for radius: 0.5 (previously 0.3);
• Minor color offset adjustments in the "classic" theme - the old values can be found in this Discussions post;
• The "fschange" value for reason in the onCanvasResize callback has been changed to "fullscreenchange". You can use the new constants exported by the module for future-proof checks.

Improved:

• Full-height alphaBars (former lumiBars) have been extended to work with radial and FFT bandResolution (former mode 0);
• Y-axis labels are no longer mirrored when mirror is active.

version 4.5.3

Minor bugfix release

• Fixes peaks not being displayed in radial graph mode with radialInvert enabled.

version 4.5.2

Minor bugfix release

• Fixes visual glitches in radial mode, when radialInvert and showPeaks are enabled.

version 4.5.1

Minor bugfix release

• Fixes audio context not being properly started in some cases, e.g., when a click event is programmatically triggered before an actual user click;
• Fixes optional bgColor property in the GradientOptions type definition - thanks jgabriel98 for reporting it (#82);
• Adds a demo file for the UMD module.

version 4.5.0

What's new

Added:

• fadePeaks - peaks fade out instead of falling down - thanks @TF3RDL for this idea;
• gravity - customize peak drop acceleration;
• peakFadeTime - customize peak fade-out time;
• peakHoldTime - customize peak hold time;
• UMD module export - allows using the module via require() and provides a global variable for easier usage in the browser - thanks @shahkashani for the suggestion (#71 and #72); see the Usage section for more details.

The new gravity equation restores the original peak drop behavior and decay curve (using the default value) of versions 1.0.0 through 3.4.0.
Check out the peak drop analysis tool for more information on the evolution of the equation and to compare different values of gravity.

As usual, you can interact with all the new properties in the fluid demo.

version 4.4.0

What's new

Added:

• canvas property in the constructor options to use your own canvas - thanks @orangecoding for the suggestion;
• getOptions() - retrieve all analyzer settings as an options object. Also added a getOptions() button to fluid and multi demos to copy the current settings to the clipboard - thanks @biigpongsatorn for the suggestion;
• radialInvert - render radial spectrum bars towards the center of the screen;
• radius - customize the size of the radial spectrum - thanks @orangecoding for the suggestion.

Changed & improved:

• The constructor can now take the options object as the first argument if you don't need to define the container;
• start has been explicitly marked as a constructor-specific property in the Options object description and will no longer work with setOptions() as of the next major release.

Fixed:

• Bug preventing radial mode from working when set in the constructor options - thanks @lexterror and @ianrothmann for reporting it;
• Reverted an unintended property name change in the object passed to the onCanvasDraw callback, introduced in v4.2.0.

version 4.3.0

What's new

Added:

• 'dual-horizontal' option for channelLayout;

Fixed:

• Fixed opacity for reflex effect on dual-combined channel layout.

Improved:

• Improved maxFPS frame rate throttling.

version 4.2.0

What's new

Added:

• new stopTracks argument to disconnectInput() - thanks @hookedupjoe (#52);
• destroy() - thanks @lucienimmink for the suggestion;
• maxFPS - set the maximum desired animation frame rate;
• peakLine - show peaks as a continuous line for Graph mode;
• start() and stop() methods.

Fixed:

• Corrected ESM exports in package.json - thanks @cprussin (#54).

Improved:

• Peak hold and decay times and radial spin speed should now remain consistent on any frame rate;
• showPeaks now works for Graph mode in radial view;
• Code quality and documentation improvements - also thanks @Staijn1 for #55.