audiomotion-analyzer 3.5.1 → 4.0.0-beta.0

package/README.md

@@ -3,8 +3,8 @@
 
 **audioMotion-analyzer** is a high-resolution real-time audio spectrum analyzer built upon **Web Audio** and **Canvas** JavaScript APIs.
 
-It was originally conceived as part of a full-featured music player called [**audioMotion**](https://audiomotion.me), but I later decided to make just
-the spectrum analyzer available as a self-contained module, so other developers could use it in their own projects.
+It was originally conceived as part of a full-featured music player called [**audioMotion**](https://audiomotion.me),
+but I later decided to make only the spectrum analyzer available as a self-contained module, so other developers could use it in their own projects.
 
 My goal is to make this the best looking, most accurate and customizable spectrum analyzer around, in a small-footprint and high-performance package.
 
@@ -29,7 +29,7 @@ What users are saying:
 
 + High-resolution real-time dual channel audio spectrum analyzer
 + Logarithmic frequency scale with customizable range
-+ Visualize discrete frequencies or octave bands based on the equal tempered scale
++ Visualize discrete FFT frequencies or octave bands
 + Optional effects: vintage LEDs, luminance bars, mirroring and reflection, radial visualization
 + Customizable sensitivity, FFT size and time-smoothing constant
 + Comes with 3 predefined color gradients - easily add your own!
@@ -45,12 +45,14 @@ 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
+- Example integrations with other audio libraries:
+  - [Icecast Metadata Player](https://codepen.io/hvianna/pen/YzrgWVe)
+  - [Pizzicato](https://codesandbox.io/s/9y6qb)
+  - [jPlayer](https://codepen.io/hvianna/pen/dyVrMJX)
+- [See more code examples on CodePen](https://codepen.io/collection/ABbbKr)
 
 ## Usage
 
@@ -72,7 +74,7 @@ Or download the [latest version](https://github.com/hvianna/audioMotion-analyzer
 Install as a dependency:
 
 ```console
-$ npm i --save audiomotion-analyzer
+$ npm i audiomotion-analyzer
 ```
 
 Use ES6 import syntax:
@@ -111,6 +113,8 @@ 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;[ansiBands](#ansibands-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 +124,8 @@ 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;[linearAmplitude](#linearamplitude-boolean): **false**,<br>
 &emsp;&emsp;[lineWidth](#linewidth-number): **0**,<br>
 &emsp;&emsp;[loRes](#lores-boolean): **false**,<br>
 &emsp;&emsp;[lumiBars](#lumibars-boolean): **false**,<br>
@@ -129,8 +135,10 @@ options = {<br>
 &emsp;&emsp;[minFreq](#minfreq-number): **20**,<br>
 &emsp;&emsp;[mirror](#mirror-number): **0**,<br>
 &emsp;&emsp;[mode](#mode-number): **0**,<br>
+&emsp;&emsp;[noteLabels](#notelabels-boolean): **false**,<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 +147,6 @@ 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;[showPeaks](#showpeaks-boolean): **true**,<br>
 &emsp;&emsp;[showScaleX](#showscalex-boolean): **true**,<br>
 &emsp;&emsp;[showScaleY](#showscaley-boolean): **false**,<br>
@@ -184,10 +191,10 @@ only one of them needs to be connected to the speakers, otherwise the volume wil
 
 After instantiation, use [`connectOutput()`](#connectoutput-node-) and [`disconnectOutput()`](#disconnectoutput-node-) to connect or disconnect the output from the speakers (or other nodes).
 
-Defaults to **true**.
-
 See also [`connectedTo`](#connectedto-array-read-only).
 
+Defaults to **true**.
+
 #### `fsElement` *HTMLElement object*
 
 *Available since v3.4.0*
@@ -216,6 +223,32 @@ 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)
+
+### `ansiBands` *boolean*
+
+*Available since v4.0.0*
+
+When set to *true* uses ANSI/IEC preferred frequencies to generate the bands for [octave bands modes](#mode-number).
+The preferred base-10 scale is used to compute the center and bandedge frequencies, as specified in the [ANSI S1.11-2004 standard](https://archive.org/details/gov.law.ansi.s1.11.2004).
+
+The default is to use the [equal temperament scale](http://hyperphysics.phy-astr.gsu.edu/hbase/Music/et.html), so that in 1/12 octave bands
+the center of each band is perfectly tuned to a musical note.
+
+Defaults to **false**.
+
 ### `audioCtx` *AudioContext object* *(Read only)*
 
 [*AudioContext*](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext) used by **audioMotion-analyzer**.
@@ -247,7 +280,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 +288,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**.
@@ -294,12 +327,6 @@ By default, **audioMotion-analyzer** is connected to the *AudioContext* `destina
 
 See also [`connectOutput()`](#connectoutput-node-).
 
-### `energy` **(DEPRECATED)**
-
-**This property will be removed in version 4.0.0**
-
-Use [`getEnergy()`](#getenergy-preset-startfreq-endfreq-) instead.
-
 ### `fftSize` *number*
 
 Number of samples used for the FFT performed by the [*AnalyzerNode*](https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode).
@@ -313,15 +340,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 +384,82 @@ 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 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*.
+***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*.
 
 ### `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**.
+
+### `linearAmplitude` *boolean*
+
+*Available since v4.0.0*
+
+When set to *true* uses linear values, instead of decibels, for displaying bars' amplitudes.
+This may improve the visualization of predominant tones, especially at higher frequencies, but it will make the entire spectrum look much quieter.
+
+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 +486,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 +540,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 +556,30 @@ 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**.
 
+### `noteLabels` *boolean*
+
+*Available since v4.0.0*
+
+When set to *true* displays musical note labels instead of frequency values, in the X axis (when [`showScaleX`](#showscalex-boolean) is also set to *true*).
+
+For best visualization in octave bands modes, make sure [`ansiBands`](#ansibands-boolean) is set to *false*, so all bands will be perfectly aligned with notes frequencies.
+
+Defaults to **false**.
+
+### `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*
@@ -504,35 +592,31 @@ Defaults to **false**.
 
 ?> In order to keep elements other than the canvas visible in fullscreen, you'll need to set the [`fsElement`](#fselement-htmlelement-object) property in the [constructor](#constructor) options.
 
-### `peakEnergy` **(DEPRECATED)**
-
-**This property will be removed in version 4.0.0**
-
-Use [`getEnergy('peak')`](#getenergy-preset-startfreq-endfreq-) instead.
-
 ### `pixelRatio` *number* *(Read only)*
 
 Current [devicePixelRatio](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio).
 This is usually **1** for standard displays and **2** for retina / Hi-DPI screens.
 
-You can refer to this value to adjust any additional drawings done in the canvas (via [callback function](#oncanvasdraw-function)).
+When [`loRes`](#lores-boolean) is *true*, the value of `pixelRatio` is halved, i.e. **0.5** for standard displays and **1** for retina / Hi-DPI.
 
-When [`loRes`](#lores-boolean) is *true* `pixelRatio` is halved, i.e. **0.5** for standard displays and **1** for retina / Hi-DPI.
+You can refer to this value to adjust any additional drawings done in the canvas (via [callback function](#oncanvasdraw-function)).
 
 ### `radial` *boolean*
 
 *Available since v2.4.0*
 
-When *true*, the spectrum analyzer is rendered as a circle, with radial frequency bars spreading from the center of the canvas.
+When *true*, the spectrum analyzer is rendered in a circular shape, with radial frequency bars spreading from its center.
+
+In radial visualization, [`ledBars`](#ledbars-boolean) and [`lumiBars`](#lumibars-boolean) effects are disabled, and
+[`showPeaks`](#showpeaks-boolean) has no effect for [**Graph** mode](#mode-number).
 
-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 [`stereo`](#stereo-boolean) is *true*, a larger diameter is used and the right channel bars are rendered towards the center of the analyzer.
 
 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,41 +673,42 @@ 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).
-
-This effect can be customized via [`setLedParams()`](#setledparams-params-) method.
-
-Defaults to **false**.
-
 ### `showPeaks` *boolean*
 
 *true* to show amplitude peaks for each frequency. Defaults to **true**.
 
 ### `showScaleX` *boolean*
 
-*Available since v3.0.0*
+*Available since v3.0.0 - this property was named `showScale` in earlier versions*
 
-*true* to display the frequency (Hz) scale on the X axis. Defaults to **true**.
+*true* to display scale labels on the X axis.
 
-*NOTE: this property was named `showScale` in versions prior to v3.0.0*
+See also [`noteLabels`](#notelabels-boolean).
+
+Defaults to **true**.
 
 ### `showScaleY` *boolean*
 
 *Available since v2.4.0*
 
-*true* to display the level (dB) scale on the Y axis. Defaults to **false**.
+*true* to display the level/amplitude scale on the Y axis.
 
 This option has no effect when [`radial`](#radial-boolean) or [`lumiBars`](#lumibars-boolean) are set to *true*.
 
+When [`linearAmplitude`](#linearamplitude-boolean) is set to *false* (default), labels are shown in decibels (dB);
+otherwise, values represent a percentage (0-100%) of the maximum amplitude.
+
+See also [`minDecibels`](#mindecibels-number) and [`maxDecibels`](#maxdecibels-number).
+
+Defaults to **false**.
+
 ### `smoothing` *number*
 
 Sets the analyzer's [smoothingTimeConstant](https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/smoothingTimeConstant).
@@ -856,7 +941,7 @@ Please note that `hold` and `value` will have only one element when [`stereo`](#
 
 You can use this method to create your own visualizations using the analyzer data. See [this pen](https://codepen.io/hvianna/pen/ZEKWWJb) for usage example.
 
-### `getEnergy( [preset | startFreq], [endFreq] )`
+### `getEnergy( [preset | startFreq [, endFreq] ] )`
 
 *Available since v3.2.0*
 
@@ -915,7 +1000,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:
 
@@ -938,7 +1023,7 @@ if necessary, the led count is decreased until both the led segment and the vert
 
 You can try different values in the [fluid demo](https://audiomotion.dev/demo/fluid.html).
 
-**If called with no arguments or any invalid property, disables previously set parameters.**
+**If called with no arguments or any invalid property, clears custom parameters previously set.**
 
 ### `setOptions( [options] )`
 
@@ -997,24 +1082,89 @@ ERR_UNKNOWN_GRADIENT       | User tried to [select a gradient](#gradient-string)
 
 ## Known Issues
 
-### reflexBright won't work on some browsers {docsify-ignore}
+### reflexBright won't work on some browsers <!-- {docsify-ignore} -->
 
 [`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}
 
 Safari's implementation of Web Audio won't return analyzer data for live streams, as documented in [this bug report](https://bugs.webkit.org/show_bug.cgi?id=195043).
 
 
+## Troubleshooting
+
+Common problems and solutions. Remember to check the browser console for error messages.
+
+### Error message: `Cannot use import statement outside a module` <!-- {docsify-ignore} -->
+
+The `import` statement must be inside a `script` which has the `type="module"` property (and no `type="text/javascript"`), like so:
+
+```html
+  <script type="module">
+    import AudioMotionAnalyzer from 'https://cdn.skypack.dev/audiomotion-analyzer?min';
+
+    // your code here
+  </script>
+```
+
+Or
+
+```html
+  <script src="main.js" type="module"></script>
+```
+
+### Error message: `MediaElementAudioSource outputs zeroes due to CORS access restrictions` <!-- {docsify-ignore} -->
+
+Make sure the media element (`audio` or `video` tag) connected to **audioMotion-analyzer** has the `crossorigin = "anonymous"` property, like so:
+
+```html
+<audio id="myAudio" src="https://example.com/stream" controls crossorigin="anonymous"></audio>
+```
+
+You can also set the `crossOrigin` (mind the uppercase "O") property via JavaScript, like so:
+
+```js
+myAudio.crossOrigin = 'anonymous';
+```
+
+### Sound only plays after the user clicks somewhere on the page. <!-- {docsify-ignore} -->
+
+**audioMotion-analyzer** automatically unlocks the audio context on the first click on the page,
+since browsers' autoplay policy requires audio output to be initiated on user gesture only.
+
+However, if you're using an `audio` or `video` element with the `controls` property, clicks on those native media
+controls can't be detected, so the audio will only be enabled if/when the user clicks somewhere else.
+
+Two possible solutions: **1)** make **sure** your users have to click somewhere else before using the media controls,
+like a "power on" button, or simply clicking to select a song from a list will do; or **2)** don't use the native
+controls at all, and create your own custom 'Play' and 'Stop' buttons. A very simple example:
+
+```html
+<audio id="myAudio" src="track.mp3" crossorigin="anonymous"></audio> <!-- do not add the 'controls' property! -->
+
+<button id="play"> Play </button>
+<button id="stop"> Stop </button>
+```
+
+```js
+const myAudio = document.getElementById('audio');
+
+document.getElementById('play').addEventListener( 'click', () => myAudio.play() );
+document.getElementById('stop').addEventListener( 'click', () => myAudio.pause() );
+```
+
+
 ## References and acknowledgments
 
+* Thanks to my wife, Virginia, for her never-ending love and support! 💞
 * Thanks to [Yuji Koike](http://www.ykcircus.com) for his awesome [Soniq Viewer for iOS](https://itunes.apple.com/us/app/soniq-viewer/id448343005), which inspired me to create **audioMotion**
 * [HTML Canvas Reference @W3Schools](https://www.w3schools.com/tags/ref_canvas.asp)
+* [Web Audio API specification](https://webaudio.github.io/web-audio-api/)
 * [Web Audio API documentation @MDN](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)
 * [What does the FFT data in the Web Audio API correspond to?](https://stackoverflow.com/a/14789992/2370385)
 * [Equations for equal-tempered scale frequencies](http://pages.mtu.edu/~suits/NoteFreqCalcs.html)
@@ -1030,16 +1180,18 @@ 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
 
-audioMotion-analyzer copyright (c) 2018-2021 [Henrique Avila Vianna](https://henriquevianna.com)<br>
+audioMotion-analyzer copyright (c) 2018-2022 [Henrique Avila Vianna](https://henriquevianna.com)<br>
 Licensed under the [GNU Affero General Public License, version 3 or later](https://www.gnu.org/licenses/agpl.html).

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.5.1",
+  "version": "4.0.0-beta.0",
   "main": "./src/audioMotion-analyzer.js",
   "module": "./src/audioMotion-analyzer.js",
   "types": "./src/index.d.ts",