audiomotion-analyzer 3.6.0-beta.0 → 3.6.1

package/README.md

@@ -45,12 +45,11 @@ What users are saying:
 ## Live code examples
 
 - [Quick and easy spectrum analyzer](https://codepen.io/hvianna/pen/pobMLNL)
-- [Complete visualization options](https://codepen.io/hvianna/pen/LYREBYQ)
 - [Using microphone input](https://codepen.io/hvianna/pen/VwKZgEE)
-- [Custom callback function](https://codepen.io/hvianna/pen/LYZwdvG)
 - [Creating additional effects with `getEnergy()`](https://codepen.io/hvianna/pen/poNmVYo)
 - [No canvas example](https://codepen.io/hvianna/pen/ZEKWWJb) (create your own visualization using analyzer data)
 - [Integration with Pizzicato library](https://codesandbox.io/s/9y6qb) - see [this discussion](https://github.com/hvianna/audioMotion-analyzer/issues/10) for more info
+- [See more code examples on CodePen](https://codepen.io/collection/ABbbKr)
 
 ## Usage
 
@@ -111,6 +110,7 @@ Valid properties and default values are shown below.
 Properties marked as *constructor only* can only be set by the constructor call, the others can also be set anytime via [`setOptions()`](#setoptions-options-) method.
 
 options = {<br>
+&emsp;&emsp;[alphaBars](#alphabars-boolean): **false**,<br>
 &emsp;&emsp;[audioCtx](#audioctx-audiocontext-object): *undefined*, // constructor only<br>
 &emsp;&emsp;[barSpace](#barspace-number): **0.1**,<br>
 &emsp;&emsp;[bgAlpha](#bgalpha-number): **0.7**,<br>
@@ -120,6 +120,7 @@ options = {<br>
 &emsp;&emsp;[fsElement](#fselement-htmlelement-object): *undefined*, // constructor only<br>
 &emsp;&emsp;[gradient](#gradient-string): **'classic'**,<br>
 &emsp;&emsp;[height](#height-number): *undefined*,<br>
+&emsp;&emsp;[ledBars](#ledbars-boolean): **false**,<br>
 &emsp;&emsp;[lineWidth](#linewidth-number): **0**,<br>
 &emsp;&emsp;[loRes](#lores-boolean): **false**,<br>
 &emsp;&emsp;[lumiBars](#lumibars-boolean): **false**,<br>
@@ -131,6 +132,7 @@ options = {<br>
 &emsp;&emsp;[mode](#mode-number): **0**,<br>
 &emsp;&emsp;[onCanvasDraw](#oncanvasdraw-function): *undefined*,<br>
 &emsp;&emsp;[onCanvasResize](#oncanvasresize-function): *undefined*,<br>
+&emsp;&emsp;[outlineBars](#outlinebars-boolean): **false**,<br>
 &emsp;&emsp;[overlay](#overlay-boolean): **false**,<br>
 &emsp;&emsp;[radial](#radial-boolean): **false**,<br>
 &emsp;&emsp;[reflexAlpha](#reflexalpha-number): **0.15**,<br>
@@ -139,7 +141,7 @@ options = {<br>
 &emsp;&emsp;[reflexRatio](#reflexratio-number): **0**,<br>
 &emsp;&emsp;[showBgColor](#showbgcolor-boolean): **true**,<br>
 &emsp;&emsp;[showFPS](#showfps-boolean): **false**,<br>
-&emsp;&emsp;[showLeds](#showleds-boolean): **false**,<br>
+&emsp;&emsp;[showLeds](#showleds-deprecated): **false**, // DEPRECATED - use ledBars instead<br>
 &emsp;&emsp;[showPeaks](#showpeaks-boolean): **true**,<br>
 &emsp;&emsp;[showScaleX](#showscalex-boolean): **true**,<br>
 &emsp;&emsp;[showScaleY](#showscaley-boolean): **false**,<br>
@@ -216,6 +218,20 @@ Defaults to **true**, so the analyzer will start running right after initializat
 
 ## Properties
 
+### `alphaBars` *boolean*
+
+*Available since v3.6.0*
+
+When set to *true* each bar's amplitude affects its opacity, i.e., higher bars are rendered more opaque while shorter bars are more transparent.
+
+This is similar to the [`lumiBars`](#lumibars-boolean) effect, but bars' amplitudes are preserved and it also works on **Discrete** [mode](#mode-number) and [radial](#radial-boolean) visualization.
+
+For effect priority when combined with other settings, see [`isAlphaBars`](#isalphabars-boolean-read-only).
+
+Defaults to **false**.
+
+!> [See related known issue](#alphabars-and-fillalpha-wont-work-with-radial-on-firefox)
+
 ### `audioCtx` *AudioContext object* *(Read only)*
 
 [*AudioContext*](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext) used by **audioMotion-analyzer**.
@@ -247,7 +263,7 @@ See also the [fluid demo](/demo/fluid.html) and the [multi-instance demo](/demo/
 
 *Available since v2.0.0*
 
-Customize the spacing between bars in [octave bands modes](#mode-number).
+Customize the spacing between bars in **octave bands** [modes](#mode-number).
 
 Use a value between 0 and 1 for spacing proportional to the band width. Values >= 1 will be considered as a literal number of pixels.
 
@@ -255,7 +271,7 @@ For example, `barSpace = 0.5` will use half the width available to each band for
 On the other hand, `barSpace = 2` will set a fixed spacing of 2 pixels, independent of the width of bars.
 Prefer proportional spacing to obtain consistent results among different resolutions and screen sizes.
 
-`barSpace = 0` will effectively show contiguous bars, except when [`showLeds`](#showleds-boolean) is *true*, in which case a minimum spacing is enforced
+`barSpace = 0` will effectively show contiguous bars, except when [`ledBars`](#ledbars-boolean) is *true*, in which case a minimum spacing is enforced
 (this can be customized via [`setLedParams()`](#setledparams-params-) method).
 
 Defaults to **0.1**.
@@ -296,9 +312,7 @@ See also [`connectOutput()`](#connectoutput-node-).
 
 ### `energy` **(DEPRECATED)**
 
-**This property will be removed in version 4.0.0**
-
-Use [`getEnergy()`](#getenergy-preset-startfreq-endfreq-) instead.
+**This property will be removed in version 4.0.0** - Use [`getEnergy()`](#getenergy-preset-startfreq-endfreq-) instead.
 
 ### `fftSize` *number*
 
@@ -313,15 +327,17 @@ Defaults to **8192**.
 
 *Available since v2.0.0*
 
-Opacity of the area fill in **Line / Area graph** visualization ([`mode`](#mode-number) 10).
+Opacity of the area fill in **Graph** [mode](#mode-number), or inner fill of bars in **octave bands** modes when [`outlineBars`](#outlinebars-boolean) is *true*.
 
 It must be a number between 0 (completely transparent) and 1 (completely opaque).
 
-Please note that this affects only the area fill. The line (when [`lineWidth`](#linewidth-number) > 0) is always drawn at full opacity.
+Please note that the line stroke (when [`lineWidth`](#linewidth-number) > 0) is always drawn at full opacity, regardless of the `fillAlpha` value.
+
+Also, for octave bands modes, [`alphaBars`](#alphabars-boolean) set to *true* takes precedence over `fillAlpha`.
 
 Defaults to **1**.
 
-!> [See related known issue](#fillalpha-and-radial-mode-on-firefox)
+!> [See related known issue](#alphabars-and-fillalpha-wont-work-with-radial-on-firefox)
 
 ### `fps` *number* *(Read only)*
 
@@ -355,47 +371,77 @@ Nominal dimensions of the analyzer.
 
 If one or both of these are `undefined`, the analyzer will try to adjust to the container's width and/or height.
 If the container's width and/or height are 0 (inline elements), a reference size of **640 x 270 pixels** will be used to replace the missing dimension(s).
-This should be considered the minimum dimensions for proper visualization of all available modes with the [LED effect](#showleds-boolean) on.
+This should be considered the minimum dimensions for proper visualization of all available modes with the [LED effect](#ledbars-boolean) on.
 
 You can set both values at once using the [`setCanvasSize()`](#setcanvassize-width-height-) method.
 
 ?> You can read the actual canvas dimensions at any time directly from the [`canvas`](#canvas-htmlcanvaselement-object-read-only) object.
 
+### `isAlphaBars` *boolean* *(Read only)*
+
+*Available since v3.6.0*
+
+***true*** when alpha bars are effectively being displayed, i.e., [`alphaBars`](#alphabars-boolean) is set to *true* and [`mode`](#mode-number) is set to discrete frequencies
+or one of the octave bands modes, in which case [`lumiBars`](#lumibars-boolean) must be set to *false* or [`radial`](#radial-boolean) must be set to *true*.
+
 ### `isFullscreen` *boolean* *(Read only)*
 
-*true* when the analyzer is being displayed in fullscreen, or *false* otherwise.
+***true*** when the analyzer is being displayed in fullscreen, or ***false*** otherwise.
 
 See [`toggleFullscreen()`](#togglefullscreen).
 
-### `isLedDisplay` *boolean* *(Read only)*
+### `isLedBars` *boolean* *(Read only)*
 
-*Available since v3.0.0*
+*Available since v3.6.0* (formerly `isLedDisplay`)
+
+***true*** when LED bars are effectively being displayed, i.e., [`ledBars`](#ledBars-boolean) is set to *true* and [`mode`](#mode-number) is set to an octave bands mode and [`radial`](#radial-boolean) is *false*.
 
-*true* when the LED effect is effectively being displayed, i.e., [`showLeds`](#showleds-boolean) is set to *true* and [`mode`](#mode-number) is set to one of the octave bands modes and [`radial`](#radial-boolean) is *false*.
+### `isLedDisplay` **(DEPRECATED)**
+
+**This property will be removed in version 4.0.0** - Use [`isLedBars`](#isledbars-boolean-read-only) instead.
 
 ### `isLumiBars` *boolean* *(Read only)*
 
 *Available since v3.0.0*
 
-*true* when the luminance bars effect is effectively being displayed, i.e., [`lumiBars`](#lumibars-boolean) is set to *true* and [`mode`](#mode-number) is set to one of the octave bands modes and [`radial`](#radial-boolean) is *false*.
+***true*** when luminance bars are effectively being displayed, i.e., [`lumiBars`](#lumibars-boolean) is set to *true* and [`mode`](#mode-number) is set to an octave bands mode and [`radial`](#radial-boolean) is *false*.
 
 ### `isOctaveBands` *boolean* *(Read only)*
 
 *Available since v3.0.0*
 
-*true* when [`mode`](#mode-number) is set to one of the octave bands modes.
+***true*** when [`mode`](#mode-number) is set to one of the octave bands modes.
 
 ### `isOn` *boolean* *(Read only)*
 
-*true* if the analyzer process is running, or *false* if it's stopped.
+***true*** if the analyzer process is running, or *false* if it's stopped.
 
 See [`toggleAnalyzer()`](#toggleanalyzer-boolean-).
 
+### `isOutlineBars` *boolean* *(Read only)*
+
+*Available since v3.6.0*
+
+***true*** when outlined bars are effectively being displayed, i.e., [`outlineBars`](#outlinebars-boolean) is set to *true*, [`mode`](#mode-number) is set to
+one of the octave bands modes and both [`ledBars`](#ledbars-boolean) and [`lumiBars`](#lumibars-boolean) are set to *false*, or [`radial`](#radial-boolean) is set to *true*.
+
+### `ledBars` *boolean*
+
+*Available since v3.6.0* (formerly `showLeds`)
+
+*true* to activate a vintage LEDs display effect. Only effective for **octave bands** [modes](#mode-number).
+
+This effect can be customized via [`setLedParams()`](#setledparams-params-) method.
+
+For effect priority when combined with other settings, see [`isLedBars`](#isledbars-boolean-read-only).
+
+Defaults to **false**.
+
 ### `lineWidth` *number*
 
 *Available since v2.0.0*
 
-Line width for the **Line / Area graph** visualization ([`mode`](#mode-number) 10).
+Line width for **Graph** [mode](#mode-number), or outline stroke in **octave bands** modes when [`outlineBars`](#outlinebars-boolean) is *true*.
 
 For the line to be distinguishable, set also [`fillAlpha`](#fillalpha-number) < 1.
 
@@ -422,10 +468,14 @@ This will prevent the canvas size from changing, when switching the low resoluti
 
 *Available since v1.1.0*
 
-This is only effective for [visualization modes](#mode-number) 1 to 8 (octave bands).
+This is only effective for **octave bands** [modes](#mode-number).
 
 When set to *true* all analyzer bars will be displayed at full height with varying luminance (opacity, actually) instead.
 
+`lumiBars` takes precedence over [`alphaBars`](#alphabars-boolean) and [`outlineBars`](#outlinebars-boolean), except in [`radial`](#radial-boolean) visualization.
+
+For effect priority when combined with other settings, see [`isLumiBars`](#islumibars-boolean-read-only).
+
 Defaults to **false**.
 
 ### `maxDecibels` *number*
@@ -472,9 +522,9 @@ Defaults to **0**.
 
 Current visualization mode.
 
-+ **Discrete frequencies** mode provides the highest resolution, allowing you to visualize individual frequencies provided by the [FFT](https://en.wikipedia.org/wiki/Fast_Fourier_transform);
++ **Discrete** mode provides the highest resolution, allowing you to visualize individual frequencies amplitudes as provided by the [FFT](https://en.wikipedia.org/wiki/Fast_Fourier_transform) computation;
 + **Octave bands** modes display wider vertical bars, each one representing the *n*th part of an octave, based on a [24-tone equal tempered scale](https://en.wikipedia.org/wiki/Quarter_tone);
-+ **Line / Area graph** mode uses the discrete frequencies data to draw a filled shape and/or a continuous line (see [`fillAlpha`](#fillalpha-number) and [`lineWidth`](#linewidth-number) properties).
++ **Graph** mode uses the discrete data points to draw a continuous line and/or filled area graph (see [`fillAlpha`](#fillalpha-number) and [`lineWidth`](#linewidth-number) properties).
 
 mode | description | notes
 ------:|:-------------:|------
@@ -488,10 +538,20 @@ mode | description | notes
 7 | Half octave bands |
 8 | Full octave bands |
 9 | *(not valid)* | *reserved*
-10 | Line / Area graph | *added in v1.1.0*
+10 | Graph | *added in v1.1.0*
 
 Defaults to **0**.
 
+### `outlineBars` *boolean*
+
+*Available since v3.6.0*
+
+When *true* and [`mode`](#mode-number) is set to one of the **octave bands** modes, draws outlined bars with customizable [`fillAlpha`](#fillalpha-number) and [`lineWidth`](#linewidth-number).
+
+For effect priority when combined with other settings, see [`isOutlineBars`](#isoutlinebars-boolean-read-only).
+
+Defaults to **false**.
+
 ### `overlay` *boolean*
 
 *Available since v2.2.0*
@@ -506,9 +566,7 @@ Defaults to **false**.
 
 ### `peakEnergy` **(DEPRECATED)**
 
-**This property will be removed in version 4.0.0**
-
-Use [`getEnergy('peak')`](#getenergy-preset-startfreq-endfreq-) instead.
+**This property will be removed in version 4.0.0** - Use [`getEnergy('peak')`](#getenergy-preset-startfreq-endfreq-) instead.
 
 ### `pixelRatio` *number* *(Read only)*
 
@@ -525,14 +583,14 @@ When [`loRes`](#lores-boolean) is *true* `pixelRatio` is halved, i.e. **0.5** fo
 
 When *true*, the spectrum analyzer is rendered as a circle, with radial frequency bars spreading from the center of the canvas.
 
-When radial mode is active, [`lumiBars`](#lumibars-boolean) and [`showLeds`](#showleds-boolean) have no effect, and
-also [`showPeaks`](#showpeaks-boolean) has no effect in **Line / Area graph** mode.
+When radial mode is active, [`ledBars`](#ledbars-boolean) and [`lumiBars`](#lumibars-boolean) have no effect, and
+also [`showPeaks`](#showpeaks-boolean) has no effect in radial **Graph** mode.
 
 See also [`spinSpeed`](#spinspeed-number).
 
 Defaults to **false**.
 
-!> [See related known issue](#fillalpha-and-radial-mode-on-firefox)
+!> [See related known issue](#alphabars-and-fillalpha-wont-work-with-radial-on-firefox)
 
 ### `reflexAlpha` *number*
 
@@ -589,20 +647,16 @@ or transparent when [`overlay`](#overlay-boolean) is ***true***.
 
 Defaults to **true**.
 
-?> Please note that when [`overlay`](#overlay-boolean) is ***false*** and [`showLeds`](#showleds-boolean) is ***true***, the background color will always be black,
+?> Please note that when [`overlay`](#overlay-boolean) is ***false*** and [`ledBars`](#ledbars-boolean) is ***true***, the background color will always be black,
 and setting `showBgColor` to ***true*** will make the "unlit" LEDs visible instead.
 
 ### `showFPS` *boolean*
 
 *true* to display the current frame rate. Defaults to **false**.
 
-### `showLeds` *boolean*
-
-*true* to activate a vintage LEDs display effect. Only effective for [visualization modes](#mode-number) 1 to 8 (octave bands).
+### `showLeds` **(DEPRECATED)**
 
-This effect can be customized via [`setLedParams()`](#setledparams-params-) method.
-
-Defaults to **false**.
+**This property will be removed in version 4.0.0** - Use [`ledBars`](#ledbars-boolean) instead.
 
 ### `showPeaks` *boolean*
 
@@ -885,7 +939,8 @@ Use this method inside your callback function to create additional visual effect
 
 Registers a custom color gradient.
 
-`name` must be a non-empty *string* that will be used when setting the [`gradient`](#gradient-string) property. `options` must be an object as shown below:
+`name` must be a non-empty *string* that will be used to select this gradient, via the [`gradient`](#gradient-string) property.
+`options` must be an object as shown below:
 
 ```js
 const options = {
@@ -893,12 +948,21 @@ const options = {
     dir: 'h',           // add this property to create a horizontal gradient (optional)
     colorStops: [       // list your gradient colors in this array (at least 2 entries are required)
         'red',                      // colors may be defined in any valid CSS format
-        { pos: .6, color: '#ff0' }, // use an object to adjust the position (0 to 1) of a color
+        { pos: .6, color: '#ff0' }, // use an object to adjust the offset (0 to 1) of a colorStop
         'hsl( 120, 100%, 50% )'     // colors may be defined in any valid CSS format
     ]
 }
 
-audioMotion.registerGradient( 'my-grad', options );
+audioMotion.registerGradient( 'myGradient', options );
+```
+
+!> In TypeScript projects make sure to import the `GradientOptions` definition and use it as the type of your object, like so:
+
+```js
+import AudioMotionAnalyzer, { GradientOptions } from 'audiomotion-analyzer'
+
+const options: GradientOptions = {
+	⋮
 ```
 
 Additional information about [gradient color-stops](https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient/addColorStop).
@@ -915,7 +979,7 @@ Sets the desired frequency range. Values are expressed in Hz (Hertz).
 
 *Available since v3.2.0*
 
-Customize parameters used to create the [LEDs display effect](#showleds-boolean).
+Customize parameters used to create the [LEDs display effect](#ledbars-boolean).
 
 `params` should be an object with the following structure:
 
@@ -1002,9 +1066,9 @@ ERR_UNKNOWN_GRADIENT       | User tried to [select a gradient](#gradient-string)
 [`reflexBright`](#reflexbright-number) feature relies on the [`filter`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter) property of the Canvas API,
 which is [currently not supported in some browsers](https://caniuse.com/#feat=mdn-api_canvasrenderingcontext2d_filter) (notably, Opera and Safari).
 
-### fillAlpha and radial mode on Firefox {docsify-ignore}
+### alphaBars and fillAlpha won't work with Radial on Firefox {docsify-ignore}
 
-On Firefox, [`fillAlpha`](#fillalpha-number) may not work properly for [`radial`](#radial-boolean) visualization, due to [this bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1164912).
+On Firefox, [`alphaBars`](#alphaBars-boolean) and [`fillAlpha`](#fillalpha-number) won't work with [`radial`](#radial-boolean) visualization when using hardware acceleration, due to [this bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1164912).
 
 ### Visualization of live streams won't work on Safari {docsify-ignore}
 
@@ -1030,13 +1094,15 @@ See [Changelog.md](Changelog.md)
 
 ## Get in touch!
 
-If you create something cool with this project, or simply think it's useful, I would like to know! Please drop me an e-mail at hvianna@gmail.com
+If you create something cool with **audioMotion-analyzer**, or simply think it's useful, I would love to know! Please drop me an e-mail at hvianna@gmail.com
 
-If you have a feature request or code suggestion, please see [CONTRIBUTING.md](CONTRIBUTING.md)
+For feature requests, suggestions or feedback, please see the [CONTRIBUTING.md](CONTRIBUTING.md) file.
 
-And if you're feeling generous you can [buy me a coffee on Ko-fi](https://ko-fi.com/Q5Q6157GZ) :grin::coffee:
+And if you're feeling generous, maybe:
 
-[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/Q5Q6157GZ)
+* [Buy me a coffee](https://ko-fi.com/Q5Q6157GZ) on Ko-fi ☕😁
+* Gift me something from my [Bandcamp wishlist](https://bandcamp.com/henriquevianna/wishlist) 🎁🥰
+* Tip me via [Brave Rewards](https://brave.com/brave-rewards/) using Brave browser 🤓
 
 
 ## License

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "audiomotion-analyzer",
   "description": "High-resolution real-time graphic audio spectrum analyzer JavaScript module with no dependencies.",
-  "version": "3.6.0-beta.0",
+  "version": "3.6.1",
   "main": "./src/audioMotion-analyzer.js",
   "module": "./src/audioMotion-analyzer.js",
   "types": "./src/index.d.ts",

package/src/audioMotion-analyzer.js

@@ -2,12 +2,12 @@
  * audioMotion-analyzer
  * High-resolution real-time graphic audio spectrum analyzer JS module
  *
- * @version 3.6.0-beta.0
+ * @version 3.6.1
  * @author  Henrique Avila Vianna <hvianna@gmail.com> <https://henriquevianna.com>
  * @license AGPL-3.0-or-later
  */
 
-const VERSION = '3.6.0-beta.0';
+const VERSION = '3.6.1';
 
 // internal constants
 const TAU     = 2 * Math.PI,

package/src/index.d.ts

@@ -82,8 +82,8 @@ export interface GradientOptions {
 
 export interface LedParameters {
   maxLeds: number;
-  spaceVRatio: number;
-  spaceHRatio: number;
+  spaceV: number;
+  spaceH: number;
 }
 
 declare class AudioMotionAnalyzer {

package/Changelog.md

@@ -1,292 +0,0 @@
-Changelog
-=========
-
-## version 3.6.0-beta.0 (2021-10-05)
-
-### Added: <!-- {docsify-ignore} -->
-
-+ `alphaBars` effect, which is similar to `lumiBars` but preserves bars' amplitudes and also works on discrete frequencies mode and radial visualization;
-+ `outlineBars` effect, which extends the usage of `lineWidth` and `fillAlpha` to octave bands modes;
-+ `isAlphaBars` and `isOutlineBars` read-only properties.
-
-### Changed: <!-- {docsify-ignore} -->
-
-+ `showLeds` and `isLedDisplay` **have been deprecated** in favor of `ledBars` and `isLedBars`, for consistency.
-
-### Fixed: <!-- {docsify-ignore} -->
-
-+ [`getEnergy()`](README.md#getenergy-preset-startfreq-endfreq-) would not accept a fractionary starting frequency.
-
-### Improved: <!-- {docsify-ignore} -->
-
-+ Regenerate the current gradient if/when it is re-registered [(#21)](https://github.com/hvianna/audioMotion-analyzer/issues/21);
-+ The fluid demo now shows the status of read-only flags (`isLedBars`, etc) for better visualization of the interactions between different options.
-
-
-## version 3.5.1 (2021-09-10)
-
-+ Removed named tuples from the TS type definitions file, for improved compatibility [(#20)](https://github.com/hvianna/audioMotion-analyzer/issues/20).
-
-
-## version 3.5.0 (2021-07-15)
-
-### Added: <!-- {docsify-ignore} -->
-
-+ [`getBars()`](README.md#getbars) method, which provides real-time analyzer data;
-+ [`useCanvas`](README.md#usecanvas-boolean) property to disable rendering to the canvas - thanks **@davay42** for [suggesting this feature](https://github.com/hvianna/audioMotion-analyzer/issues/19);
-+ A tool to view/debug the generated octave bands - see the `/tools` folder.
-
-### Improved: <!-- {docsify-ignore} -->
-
-+ 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.
-
-
-## version 3.4.0 (2021-05-29)
-
-### Added: <!-- {docsify-ignore} -->
-
-+ [`fsElement`](README.md#fselement-htmlelement-object) constructor option, for easily handling fullscreen on any element.
-
-### Fixed and improved: <!-- {docsify-ignore} -->
-
-+ 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.
-
-
-## version 3.3.0 (2021-05-03)
-
-### Added: <!-- {docsify-ignore} -->
-
-+ New horizontal mirroring effect; see [`mirror`](README.md#mirror-number) property - thanks **@lexterror** for [suggesting this feature](https://github.com/hvianna/audioMotion-analyzer/issues/16).
-
-### Improvements: <!-- {docsify-ignore} -->
-
-+ `colorStops` type definition updated for improved compatibility ([see #17](https://github.com/hvianna/audioMotion-analyzer/pull/17)) - props to [@Staijn1](https://github.com/Staijn1).
-
-
-## version 3.2.1 (2021-04-03)
-
-+ Fixes an undefined property error.
-
-
-## version 3.2.0 (2021-04-03)
-
-### Added: <!-- {docsify-ignore} -->
-
-+ [`getEnergy()`](README.md#getenergy-preset-startfreq-endfreq-) method - see it in action on [this pen](https://codepen.io/hvianna/pen/poNmVYo) - thanks **@Staijn1** for [suggesting this feature](https://github.com/hvianna/audioMotion.js/issues/12#issuecomment-733045035);
-+ [`setLedParams()`](README.md#setledparams-params-) method, which allows you to customize the look of the LEDs - you can try it in the [fluid demo](https://audiomotion.dev/demo/fluid.html);
-+ [`connectSpeakers`](README.md#connectspeakers-boolean) constructor option - thanks **@evoyy** for the [suggestion](https://github.com/hvianna/audioMotion-analyzer/issues/13);
-+ [`connectedTo`](README.md#connectedto-array-read-only) read only property.
-
-### Improvements: <!-- {docsify-ignore} -->
-
-+ When passing an AudioNode in the `source` property of constructor, it's no longer necessary to explicitly provide the `audioCtx`, as it will be inferred from the source node - thanks [@evoyy](https://github.com/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](https://github.com/Staijn1));
-+ Improved the look of the LEDs effect in very small containers (like in the [multi-instance demo](https://audiomotion.dev/demo/multi.html)), especially when `loRes` is active;
-+ Refactored some code for improved legibility, performance and file size (still below 20kB minified! :sunglasses:);
-+ Added compatibility with *standardized-audio-context* library - thanks [@richclingman](https://github.com/richclingman) for reporting this issue.
-
-### Changed: <!-- {docsify-ignore} -->
-
-+ `energy` and `peakEnergy` properties have been **deprecated and will be removed in the next major release** - use `getEnergy()` and `getEnergy('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.
-
-
-## version 3.1.0 (2021-02-27)
-
-### Added: <!-- {docsify-ignore} -->
-
-+ TypeScript definition file (props to [@alex-greff](https://github.com/alex-greff)).
-
-### Improvements: <!-- {docsify-ignore} -->
-
-+ Generate only the currently selected gradient on mode/gradient changes.
-
-
-## version 3.0.0 (2020-11-28)
-
-### BREAKING CHANGES: <!-- {docsify-ignore} -->
-
-+ The `analyzer` object is no longer exposed - use the new [`connectInput()`](README.md#connectinput-source-) method to connect all audio sources and [`connectOutput()`](README.md#connectoutput-node-) to connect the analyzer output to other nodes;
-+ `audioSource` property has been renamed to [`connectedSources`](README.md#connectedsources-array), which now returns an **array** of all connected audio sources;
-+ `binToFreq()` and `freqToBin()` methods have been removed;
-+ `connectAudio()` method has been replaced by [`connectInput()`](README.md#connectinput-source-), which now accepts either an HTML media element or any instance of AudioNode;
-+ `dataArray` property is no longer exposed;
-+ `showScale` property has been renamed to [`showScaleX`](README.md#showscalex-boolean);
-+ `version` is now a **static** property and should always be accessed as [`AudioMotionAnalyzer.version`](README.md#audiomotionanalyzerversion-string-read-only).
-
-### New features: <!-- {docsify-ignore} -->
-
-+ Dual channel (stereo) analyzer option;
-+ Built-in volume control;
-+ New methods for easy connection/disconnection of input and output nodes:
-  + [`connectInput()`](README.md#connectinput-source-)
-  + [`disconnectInput()`](README.md#disconnectinput-node-)
-  + [`connectOutput()`](README.md#connectoutput-node-)
-  + [`disconnectOutput()`](README.md#disconnectoutput-node-)
-+ New properties:
-  + [`isOctaveBands`](README.md#isoctavebands-boolean-read-only) (read only)
-  + [`isLedDisplay`](README.md#isleddisplay-boolean-read-only) (read only)
-  + [`isLumiBars`](README.md#islumibars-boolean-read-only) (read only)
-  + [`stereo`](README.md#stereo-boolean)
-  + [`splitGradient`](README.md#splitgradient-boolean)
-  + [`volume`](README.md#volume-number)
-
-### Improvements: <!-- {docsify-ignore} -->
-
-+ 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.
-
-### Fixed: <!-- {docsify-ignore} -->
-
-+ A compatibility issue that could cause `reflexRatio` not to work in some environments.
-
-
-## version 2.5.0 (2020-10-07)
-
-### Improvements: <!-- {docsify-ignore} -->
-
-+ Behavior of the [`onCanvasResize`](README.md#oncanvasresize-function) callback is now consistent across different browsers. Changes worth of note:
-  1. on fullscreen changes, **only a `'fschange'` *reason* will be reported** to the callback function - no more redundant `'resize'` calls;
-  2. the callback function is now executed **only when canvas dimensions effectively change** from the previous state - for example,
-  setting [`loRes`](README.md#lores-boolean) or [`width`](README.md#width-number) to the same value they already have won't trigger a callback;
-+ Canvas dimensions are now properly updated whenever the container element is resized, not only on window resize;
-+ [`audioSource`](README.md#audiosource-mediaelementaudiosourcenode-object) now returns the first audio source connected via [`connectAudio()`](README.md#connectaudio-element-)
-  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](https://audiomotion.dev/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](demo/README.md) for instructions on running the demos locally.
-
-
-## version 2.4.0 (2020-07-18)
-
-### Added: <!-- {docsify-ignore} -->
-
-+ New **Radial** visualization - see [`radial`](README.md#radial-boolean) and [`spinSpeed`](README.md#spinspeed-number) properties and try them in the [demos](https://audiomotion.dev/demo)! - thanks **@inglesuniversal** for [suggesting this feature](https://github.com/hvianna/audioMotion.js/issues/6);
-+ [`showScaleY`](README.md#showscaley-boolean) property for displaying the level (dB) scale on the analyzer's vertical axis;
-+ [`energy`](README.md#energy-number-read-only) and [`peakEnergy`](README.md#peakenergy-number-read-only) read-only properties;
-+ [Known issues](README.md#known-issues) section added to the documentation.
-
-### Changed: <!-- {docsify-ignore} -->
-
-+ [`setOptions()`](README.md#setoptions-options-) 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`](README.md#showbgcolor-boolean) documentation;
-+ Canvas `fillStyle` and `strokeStyle` properties are now set with the current gradient before calling the [`onCanvasDraw`](README.md#oncanvasdraw-function) callback function;
-+ Updated all [demos](https://audiomotion.dev/demo) with more straightforward access to configuration options.
-
-
-## version 2.3.0 (2020-06-08)
-
-### Added: <!-- {docsify-ignore} -->
-
-+ [`binToFreq()`](README.md#bintofreq-bin-) and [`freqToBin()`](README.md#freqtobin-frequency-rounding-) methods;
-+ [`reflexBright`](README.md#reflexbright-number) property, which allows to adjust the brightness of the reflected image.
-
-### Changed: <!-- {docsify-ignore} -->
-
-+ Reverted the change to `reflexAlpha` introduced in [v2.2.1](https://github.com/hvianna/audioMotion-analyzer/releases/tag/2.2.1)
-+ Removed the forced black layer off the reflection background.
-
-
-## version 2.2.1 (2020-05-31)
-
-### Changed: <!-- {docsify-ignore} -->
-
-+ ~~Improved the Reflex effect in [`overlay`](README.md#overlay-boolean) mode - the [`reflexAlpha`](README.md#reflexalpha-number) 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~~ **(reverted in v2.3.0)**;
-
-+ The package source code has been moved from the `dist` to the `src` folder.
-
-### Fixed: <!-- {docsify-ignore} -->
-
-+ Prevent showing leds below the 0 level, when both reflex and overlay are active.
-
-
-## version 2.2.0 (2020-05-19)
-
-### Added: <!-- {docsify-ignore} -->
-
-+ New [`overlay`](README.md#overlay-boolean) and [`bgAlpha`](README.md#bgalpha-number) properties allow displaying the analyzer over other contents.
-[Check out the new demo!](https://audiomotion.dev/demo/overlay.html)
-
-### Changed: <!-- {docsify-ignore} -->
-
-+ Corrected the documentation for the [`registerGradient()`](README.md#registergradient-name-options-) method, which stated the `bgColor` property was required (it has always been optional).
-
-
-## version 2.1.0 (2020-04-06)
-
-### Added: <!-- {docsify-ignore} -->
-
-+ Customizable Reflex effect - see [`reflexRatio`](README.md#reflexratio-number) and try it in the [demo](https://audiomotion.dev/demo/fluid.html).
-
-
-## version 2.0.0 (2020-03-24)
-
-### Added: <!-- {docsify-ignore} -->
-
-+ New [`lineWidth`](README.md#linewidth-number) and [`fillAlpha`](README.md#fillalpha-number) properties for [mode 10](README.md#mode-number) customization, so it can now work as an area graph (default), a line graph or a combination of both;
-+ New [`barSpace`](README.md#barspace-number) property for customizable bar spacing in octave bands modes;
-+ You can now provide an external AudioContext via `audioCtx` property in the [constructor's `options`](README.md#constructor), allowing you to share the same context among different instances;
-+ Custom [error codes](README.md#custom-errors);
-+ New [`version`](README.md#version-string-read-only) property;
-
-### Changed: <!-- {docsify-ignore} -->
-
-+ Increased default spacing between bars in octave bands modes - to get the previous look, set [`barSpace`](README.md#barspace-number) 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;
-
-### Fixed: <!-- {docsify-ignore} -->
-
-+ The multi-instance demo should now work on browsers other than Firefox (it now uses a shared audio context);
-+ `isFullscreen` property now correctly reads `false` (instead of `undefined`) when the analyzer is not in fullscreen (*potentially breaking change*);
-+ Setting one of the callback functions to `undefined` with `setOptions()` now properly unregisters the callback (*potentially breaking change*);
-
-### API breaking changes: <!-- {docsify-ignore} -->
-
-+ `audioCtx`, `analyzer`, `canvas` and `canvasCtx` objects are now read-only (`canvasCtx` properties may be safely modified while inside the callback for `onCanvasDraw`);
-+ `frame` and `time` properties are not exposed anymore, as they are intended for internal use only;
-+ `registerGradient()` method now enforces the `name` argument being a non-empty `string` (throws an [error](README.md#custom-errors) otherwise);
-+ Errors now return a custom object and some error messages have changed - use the new [`code` property](README.md#custom-errors) to identify errors in a reliable way.
-
-
-## version 1.2.0 (2019-12-19)
-
-+ 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.
-
-
-## version 1.1.0 (2019-12-08)
-
-+ 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.
-
-
-## version 1.0.1 (2019-10-22)
-
-+ Minor cleanup to optimize npm package size.
-
-
-## version 1.0.0 (2019-10-07)
-
-+ First stable release.
-
-
-## version 1.0.0-rc.1 (2019-10-05)
-
-+ Release candidate for v1.0.0