- 'dual-horizontal' option for
channelLayout
;
- Fixed opacity for reflex effect on dual-combined channel layout.
- Improved
maxFPS
frame rate throttling.
- new
stopTracks
argument todisconnectInput()
- 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 Graphmode
;start()
andstop()
methods.
- Corrected ESM exports in
package.json
- thanks @cprussin (#54).
- 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.
- Fix a rendering bug when
roundBars
is combined withmirror
andradial
; - Add a polyfill for
Array.findLastIndex()
to restore compatibility with not-so-recent browsers.
colorMode
- additional options for coloring analyzer bars: by bar amplitude (level) or bar position (index);roundBars
- rounded corner analyzer bars;isRoundBars
read-only property;trueLeds
- your LED bars now more vintage than ever!- New
level
property for registered gradients
- Avoid drawing the Y-axis scale and unlit LEDs twice, in 'dual-combined' channel layout.
- Improved frequency scales labeling (especially for
noteLabels
) - label sizes were slightly reduced in fullscreen; - Code cleanup and optimizations.
-
Removed deprecated properties:
- useenergy
getEnergy()
instead- useisLedDisplay
isLedBars
instead- usepeakEnergy
getEnergy('peak')
instead- useshowLeds
ledBars
instead
-
getBars()
now includes an additionalfreq
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 - usechannelLayout
instead.
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
andgradientRight
- 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.
- LED peaks showing below zero level when
reflexRatio
> 0.
- 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 inradial
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.
- Minor update to fix wrong property names in the
LedParameters
interface in the TS definition file; - Improved documentation of
registerGradient()
usage in TypeScript projects (#37).
alphaBars
effect, which is similar tolumiBars
but preserves bars' amplitudes and also works on discrete frequencies mode and radial visualization;outlineBars
effect, which extends the usage oflineWidth
andfillAlpha
to octave bands modes;isAlphaBars
andisOutlineBars
read-only properties.
showLeds
andisLedDisplay
have been deprecated in favor ofledBars
andisLedBars
, for consistent naming of effects.
getEnergy()
would not accept a fractionary initial frequency.
- Regenerate the current gradient if/when it is re-registered (#21);
- The fluid demo now shows the status of read-only flags, for better visualization of interactions between different properties.
- Removed named tuples from the TS type definitions file, for improved compatibility (#20).
getBars()
method, which provides real-time analyzer data;useCanvas
property to disable rendering to the canvas - thanks @davay42 for suggesting this feature;- A tool to view/debug the generated octave bands - see the
/tools
folder.
- Fine-tuned generation of octave bands;
- Improved FFT data interpolation;
- Improved peak rendering when changing visualization modes;
- Added a simple piano keyboard to the test tones section of the "fluid" demo;
- Added search funcionality to the documentation website.
fsElement
constructor option, for easily handling fullscreen on any element.
- Fixed radial analyzer too wide in vertical containers;
- Fixed out of bounds bar in mode 0 (discrete frequencies) with
mirror
set to -1; - Improved fullscreen rendering in portrait orientation displays;
- Improved font size adjustment for scale labels and FPS display on vertical containers.
- New horizontal mirroring effect; see
mirror
property - thanks @lexterror for suggesting this feature.
- Fixes an undefined property error.
getEnergy()
method - see it in action on this pen - thanks @Staijn1 for suggesting this feature;setLedParams()
method, which allows you to customize the look of the LEDs - you can try it in the fluid demo;connectSpeakers
constructor option - thanks @evoyy for the suggestion;connectedTo
read only property.
- When passing an AudioNode in the
source
property of constructor, it's no longer necessary to explicitly provide theaudioCtx
, as it will be inferred from the source node - thanks @evoyy for this idea; - Disconnecting the output from the speakers no longer prevents the analyzer from working on Chromium-based browsers;
- Expose the
GradientOptions
TypeScript interface for user scripts (props to @Staijn1); - Improved the look of the LEDs effect in very small containers (like in the multi-instance demo), especially when
loRes
is active; - Refactored some code for improved legibility, performance and file size (still below 20kB minified! 😎);
- Added compatibility with standardized-audio-context library - thanks @richclingman for reporting this issue.
energy
andpeakEnergy
properties have been deprecated and will be removed in the next major release - usegetEnergy()
andgetEnergy('peak')
instead;- FPS display font size is now scaled relatively to the canvas height;
pixelRatio
is now correctly reported for HiDPI devices with screen height <= 1080px.
- TypeScript definition file (props to @alex-greff).
- Generate only the currently selected gradient on mode/gradient changes.
- The
analyzer
object is no longer exposed - use the newconnectInput()
method to connect all audio sources andconnectOutput()
to connect the analyzer output to other nodes; audioSource
property has been renamed toconnectedSources
, which now returns an array of all connected audio sources;binToFreq()
andfreqToBin()
methods have been removed;connectAudio()
method has been replaced byconnectInput()
, which now accepts either an HTML media element or any instance of AudioNode;dataArray
property is no longer exposed;showScale
property has been renamed toshowScaleX
;version
is now a static property and should always be accessed asAudioMotionAnalyzer.version
.
- Dual channel (stereo) analyzer option;
- Built-in volume control;
- New methods for easy connection/disconnection of input and output nodes:
- New properties:
isOctaveBands
(read only)isLedDisplay
(read only)isLumiBars
(read only)stereo
splitGradient
volume
- Automatically unlock/resume the AudioContext on first user click, so you don't need to handle this in your code anymore;
- Improved FFT data interpolation on low frequencies (especially noticeable in 1/12th and 1/24th octave bands);
- Corrected initial amplitude of line / area graph.
- A compatibility issue that could cause
reflexRatio
not to work in some environments.
- Behavior of the
onCanvasResize
callback is now consistent across different browsers. Changes worth of note:- on fullscreen changes, only a
'fschange'
reason will be reported to the callback function - no more redundant'resize'
calls; - the callback function is now executed only when canvas dimensions effectively change from the previous state - for example,
setting
loRes
orwidth
to the same value they already have won't trigger a callback;
- on fullscreen changes, only a
- Canvas dimensions are now properly updated whenever the container element is resized, not only on window resize;
audioSource
now returns the first audio source connected viaconnectAudio()
method, if no source was provided during instantiation;- Size of scale labels on both axes is now scaled relatively to the canvas height;
- Added a new demo with only the minimal code required to use audioMotion-analyzer;
- Demo scripts are now loaded as native ES6 modules and no longer require bundling. See the README file for instructions on running the demos locally.
- New Radial visualization - see
radial
andspinSpeed
properties and try them in the demos! - thanks @inglesuniversal for suggesting this feature; showScaleY
property for displaying the level (dB) scale on the analyzer's vertical axis;energy
andpeakEnergy
read-only properties;- Known issues section added to the documentation.
setOptions()
called with no argument now resets all configuration options to their default values (it used to raise an error);- The LED effect code has been refactored to improve appearance and compatibility with other (future) effects;
- "Unlit" LEDs are no longer displayed in overlay mode - see the notice in
showBgColor
documentation; - Canvas
fillStyle
andstrokeStyle
properties are now set with the current gradient before calling theonCanvasDraw
callback function; - Updated all demos with more straightforward access to configuration options.
binToFreq()
andfreqToBin()
methods;reflexBright
property, which allows to adjust the brightness of the reflected image.
- Reverted the change to
reflexAlpha
introduced in v2.2.1 - Removed the forced black layer off the reflection background.
-
Improved the Reflex effect in(reverted in v2.3.0);overlay
mode - thereflexAlpha
property is now used to adjust the opacity of a dark layer applied over the reflection area, which prevents undesired transparency of the reflection itself and creates a consistent effect, whether overlay mode is on or off -
The package source code has been moved from the
dist
to thesrc
folder.
- Prevent showing leds below the 0 level, when both reflex and overlay are active.
- New
overlay
andbgAlpha
properties allow displaying the analyzer over other contents. Check out the new demo!
- Corrected the documentation for the
registerGradient()
method, which stated thebgColor
property was required (it has always been optional).
- Customizable Reflex effect - see
reflexRatio
and try it in the demo.
- New
lineWidth
andfillAlpha
properties for mode 10 customization, so it can now work as an area graph (default), a line graph or a combination of both; - New
barSpace
property for customizable bar spacing in octave bands modes; - You can now provide an external AudioContext via
audioCtx
property in the constructor'soptions
, allowing you to share the same context among different instances; - Custom error codes;
- New
version
property;
- Increased default spacing between bars in octave bands modes - to get the previous look, set
barSpace
to 1; - Improved accuracy when positioning the X-axis scale labels in octave bands modes;
- Slightly improved vertical usage of canvas when the LED effect is active (removed the black line at the bottom of the screen);
- Canvas context is now saved before calling the user callback function and restored afterwards, to avoid undesirable changes;
- Several functions were refactored for improved legibility, memory usage and performance;
- Improved documentation and demos;
- The multi-instance demo should now work on browsers other than Firefox (it now uses a shared audio context);
isFullscreen
property now correctly readsfalse
(instead ofundefined
) when the analyzer is not in fullscreen (potentially breaking change);- Setting one of the callback functions to
undefined
withsetOptions()
now properly unregisters the callback (potentially breaking change);
audioCtx
,analyzer
,canvas
andcanvasCtx
objects are now read-only (canvasCtx
properties may be safely modified while inside the callback foronCanvasDraw
);frame
andtime
properties are not exposed anymore, as they are intended for internal use only;registerGradient()
method now enforces thename
argument being a non-emptystring
(throws an error otherwise);- Errors now return a custom object and some error messages have changed - use the new
code
property to identify errors in a reliable way.
- Improves the look of bars at lower frequencies in octave bands modes (especially 1/12th and 1/24th);
- Minor tweak to the "Rainbow" gradient to make cyan and blue shades a little more balanced.
- New Area fill visualization mode (
mode: 10
), which uses the same full-frequency data of the discrete frequencies mode, but generates a brighter filled shape; - New Luminance Bars option (
lumiBars: <boolean>
) for octave bands modes, which displays analyzer bars always at full-height, with varying luminance instead.
- Minor cleanup to optimize npm package size.
- First stable release.