audiomotion-analyzer 4.0.0-beta.1 → 4.0.0-beta.3

package/README.md

@@ -28,17 +28,18 @@ What users are saying:
 ## Features
 
 + High-resolution real-time dual channel audio spectrum analyzer
-+ Logarithmic frequency scale with customizable range
-+ 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
++ Logarithmic, linear and perceptual (Bark/Mel) frequency scales, with customizable range
++ Visualization of discrete FFT frequencies or up to 240 frequency bands (supports ANSI and equal-tempered octave bands)
++ Decibel and linear amplitude scales, with customizable sensitivity
++ A, B, C, D and ITU-R 468 weighting filters
++ Optional effects: LED bars, luminance bars, mirroring and reflection, radial spectrum
 + Comes with 3 predefined color gradients - easily add your own!
 + Fullscreen support, ready for retina / HiDPI displays
 + Zero-dependency native ES6+ module (ESM), \~20kB minified
 
 ## Online demos
 
-[![demo-animation](demo/media/demo.gif)](https://audiomotion.dev/demo/)
+[![demo-animation](img/demo.gif)](https://audiomotion.dev/demo/)
 
 ?> https://audiomotion.dev/demo/
 
@@ -121,11 +122,13 @@ options = {<br>
 &emsp;&emsp;[connectSpeakers](#connectspeakers-boolean): **true**, // constructor only<br>
 &emsp;&emsp;[fftSize](#fftsize-number): **8192**,<br>
 &emsp;&emsp;[fillAlpha](#fillalpha-number): **1**,<br>
+&emsp;&emsp;[frequencyScale](#frequencyscale-string): **'log'**,<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;[linearBoost](#linearboost-number): **1**,<br>
 &emsp;&emsp;[lineWidth](#linewidth-number): **0**,<br>
 &emsp;&emsp;[loRes](#lores-boolean): **false**,<br>
 &emsp;&emsp;[lumiBars](#lumibars-boolean): **false**,<br>
@@ -281,7 +284,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 [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.
 
@@ -341,13 +344,13 @@ Defaults to **8192**.
 
 *Available since v2.0.0*
 
-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*.
+Opacity of the area fill in [Graph mode](#mode-number), or inner fill of bars in [bands modes](#mode-number) when [`outlineBars`](#outlinebars-boolean) is *true*.
 
 It must be a number between 0 (completely transparent) and 1 (completely opaque).
 
 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`.
+Also, for [bands modes](#mode-number), [`alphaBars`](#alphabars-boolean) set to *true* takes precedence over `fillAlpha`.
 
 Defaults to **1**.
 
@@ -357,6 +360,25 @@ Defaults to **1**.
 
 Current frame rate.
 
+### `frequencyScale` *string*
+
+*Available since v4.0.0*
+
+Scale used to represent frequencies in the horizontal axis.
+
+frequencyScale | description
+---------------|------------
+'bark' | [Bark scale](https://en.wikipedia.org/wiki/Bark_scale)
+'linear' | Linear scale
+'log' | Logarithmic scale
+'mel' | [Mel scale](https://en.wikipedia.org/wiki/Mel_scale)
+
+Logarithmic scale is required to visualize proper [octave bands](#mode-number) and it's also recommended when using [`noteLabels`](#notelabels-boolean).
+
+*Bark* and *Mel* are perceptual pitch scales which provide better visualization of midrange and high frequencies, especially in the [discrete frequencies mode](#mode-number).
+
+Defaults to **'log'**.
+
 ### `fsElement` *HTMLElement object* *(Read only)*
 
 *Available since v3.4.0*
@@ -372,9 +394,9 @@ Canvas dimensions used during fullscreen mode. These take the current pixel rati
 
 ### `gradient` *string*
 
-Currently selected color gradient used for analyzer graphs.
+Name of the color gradient used for analyzer graphs.
 
-It must be the name of a built-in or [registered](#registergradient-name-options-) gradient. Built-in gradients are *'classic'*, *'prism'* and *'rainbow'*.
+It must be a built-in or [registered](#registergradient-name-options-) gradient name. Built-in gradients are *'classic'*, *'prism'* and *'rainbow'*.
 
 Defaults to **'classic'**.
 
@@ -385,7 +407,7 @@ 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](#ledbars-boolean) on.
+This should be considered the minimum dimensions for proper visualization of all available modes and effects.
 
 You can set both values at once using the [`setCanvasSize()`](#setcanvassize-width-height-) method.
 
@@ -396,7 +418,15 @@ You can set both values at once using the [`setCanvasSize()`](#setcanvassize-wid
 *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*.
+or one of the bands modes, in which case [`lumiBars`](#lumibars-boolean) must be set to *false* or [`radial`](#radial-boolean) must be set to *true*.
+
+### `isBandsMode` *boolean* *(Read only)*
+
+*Available since v4.0.0*
+
+***true*** when [`mode`](#mode-number) is set to one of the bands mode (modes 1 to 8).
+
+See also [`isOctaveBands`](#isoctavebands-boolean-read-only).
 
 ### `isFullscreen` *boolean* *(Read only)*
 
@@ -408,19 +438,19 @@ See [`toggleFullscreen()`](#togglefullscreen).
 
 *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 LED bars are effectively being displayed, i.e., [`isBandsMode`](#isbandsmode-boolean-read-only) is *true*, [`ledBars`](#ledBars-boolean) is set to *true* and [`radial`](#radial-boolean) is set to *false*.
 
 ### `isLumiBars` *boolean* *(Read only)*
 
 *Available since v3.0.0*
 
-***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*.
+***true*** when luminance bars are effectively being displayed, i.e., [`isBandsMode`](#isbandsmode-boolean-read-only) is *true*, [`lumiBars`](#lumibars-boolean) is set to *true* and [`radial`](#radial-boolean) is set to *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 [`isBandsMode`](#isbandsmode-boolean-read-only) is *true* and [`frequencyScale`](#frequencyscale-string) is set to *'log'*.
 
 ### `isOn` *boolean* *(Read only)*
 
@@ -432,14 +462,14 @@ See [`toggleAnalyzer()`](#toggleanalyzer-boolean-).
 
 *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*.
+***true*** when outlined bars are effectively being displayed, i.e., [`isBandsMode`](#isbandsmode-boolean-read-only) is *true*, [`outlineBars`](#outlinebars-boolean) is set to *true*
+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).
+*true* to activate the vintage LED bars effect for [bands modes](#mode-number).
 
 This effect can be customized via [`setLedParams()`](#setledparams-params-) method.
 
@@ -473,7 +503,7 @@ Defaults to **1**.
 
 *Available since v2.0.0*
 
-Line width for **Graph** [mode](#mode-number), or outline stroke in **octave bands** modes when [`outlineBars`](#outlinebars-boolean) is *true*.
+Line width for [Graph mode](#mode-number), or outline stroke in [bands modes](#mode-number) when [`outlineBars`](#outlinebars-boolean) is *true*.
 
 For the line to be distinguishable, set also [`fillAlpha`](#fillalpha-number) < 1.
 
@@ -500,7 +530,7 @@ This will prevent the canvas size from changing, when switching the low resoluti
 
 *Available since v1.1.0*
 
-This is only effective for **octave bands** [modes](#mode-number).
+This is only effective for [bands modes](#mode-number).
 
 When set to *true* all analyzer bars will be displayed at full height with varying luminance (opacity, actually) instead.
 
@@ -553,26 +583,26 @@ Defaults to **0**.
 
 ### `mode` *number*
 
-Current visualization mode.
-
-+ **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);
-+ **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).
+Visualization mode.
 
 mode | description | notes
-------:|:-------------:|------
+----:|:-----------:|------
 0 | Discrete frequencies |
-1 | 1/24th octave bands |
-2 | 1/12th octave bands |
-3 | 1/8th octave bands |
-4 | 1/6th octave bands |
-5 | 1/4th octave bands |
-6 | 1/3rd octave bands |
-7 | Half octave bands |
-8 | Full octave bands |
+1 | 1/24th octave bands or 240 bands |
+2 | 1/12th octave bands or 120 bands |
+3 | 1/8th octave bands or 80 bands |
+4 | 1/6th octave bands or 60 bands |
+5 | 1/4th octave bands or 40 bands |
+6 | 1/3rd octave bands or 30 bands |
+7 | Half octave bands or 20 bands |
+8 | Full octave bands or 10 bands |
 9 | *(not valid)* | *reserved*
 10 | Graph | *added in v1.1.0*
 
++ **Mode 0** provides the highest resolution, allowing you to visualize individual frequencies as provided by the [FFT](https://en.wikipedia.org/wiki/Fast_Fourier_transform) computation;
++ **Modes 1 - 8** divide the frequency spectrum in bands; when using the default **logarithmic** [frequency scale](#frequencyscale-string), each band represents the *n*th part of an octave (see also [`ansiBands`](#ansibands-boolean)); otherwise, a fixed number of bands is used for each mode;
++ **Mode 10** uses the discrete FFT data points to draw a continuous line and/or a filled area graph (see [`fillAlpha`](#fillalpha-number) and [`lineWidth`](#linewidth-number) properties).
+
 Defaults to **0**.
 
 ### `noteLabels` *boolean*
@@ -581,7 +611,7 @@ Defaults to **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.
+For best visualization in [octave bands modes](#mode-number), make sure [`frequencyScale`](#frequencyscale-string) is set to *'log'* and [`ansiBands`](#ansibands-boolean) is set to *false*, so all bands will be perfectly aligned with notes frequencies.
 
 Defaults to **false**.
 
@@ -589,7 +619,7 @@ Defaults to **false**.
 
 *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).
+When *true* and [`mode`](#mode-number) is set to one of the **bands** modes, analyzer bars are rendered outlined, with customizable [`fillAlpha`](#fillalpha-number) and [`lineWidth`](#linewidth-number).
 
 For effect priority when combined with other settings, see [`isOutlineBars`](#isoutlinebars-boolean-read-only).
 
@@ -750,9 +780,9 @@ When *true*, the gradient will be split between both channels, so each channel w
 
 | splitGradient: *true* | splitGradient: *false* |
 |:--:|:--:|
-| ![split-on](demo/media/splitGradient_on.png) | ![split-off](demo/media/splitGradient_off.png) |
+| ![split-on](img/splitGradient_on.png) | ![split-off](img/splitGradient_off.png) |
 
-This option has no effect in horizontal gradients, or when [`stereo`](#stereo-boolean) is set to *false*.
+This option has no effect on horizontal gradients, or when [`stereo`](#stereo-boolean) is set to *false*.
 
 Defaults to **false**.
 
@@ -802,13 +832,16 @@ Defaults to **1**.
 
 *Available since v4.0.0*
 
-Select a [weighting filter](https://en.wikipedia.org/wiki/Weighting_filter) for spectrum visualization.
+[Weighting filter](https://en.wikipedia.org/wiki/Weighting_filter) applied to frequency data for spectrum visualization.
+
+?> Selecting a weighting filter **does NOT** affect the audio output.
 
 Each filter applies a different curve of gain/attenuation to specific frequency ranges, but the general idea is to adjust the
 visualization of frequencies to which the human ear is more or less sensitive.
-Refer to the [weighting filters viewer tool](/tools/weighting-filters.html) for curves and response tables.
 
-?> Selecting a weighting filter **does NOT** affect the audio output, only the visualization.
+Refer to the [weighting filters viewer tool](/tools/weighting-filters.html) for response tables and an interactive version of the curves graph seen below.
+
+<img src="img/weigthing-filters-curves.png" class="align-right">
 
 weightingFilter | description
 ------|------------------------------
@@ -1075,7 +1108,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, clears custom parameters previously set.**
+?> If called with no arguments or any invalid property, clears custom parameters previously set.
 
 ### `setOptions( [options] )`
 
@@ -1186,15 +1219,16 @@ 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.
+Browser autoplay policy dictates that audio output can only be initiated by a user gesture, and this is enforced by WebAudio API
+by creating [*AudioContext*](#audioctx-audiocontext-object-read-only) objects in *suspended* mode.
 
-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.
+**audioMotion-analyzer** tries to automatically start its audio context on the first click on the page.
+However, if you're using an `audio` or `video` element with the `controls` property, clicks on those native media controls cannot be detected
+by JavaScript, 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:
+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! -->

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": "4.0.0-beta.1",
+  "version": "4.0.0-beta.3",
   "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 4.0.0-beta.1
+ * @version 4.0.0-beta.3
  * @author  Henrique Avila Vianna <hvianna@gmail.com> <https://henriquevianna.com>
  * @license AGPL-3.0-or-later
  */
 
-const VERSION = '4.0.0-beta.1';
+const VERSION = '4.0.0-beta.3';
 
 // internal constants
 const TAU     = 2 * Math.PI,
@@ -17,15 +17,32 @@ const TAU     = 2 * Math.PI,
 
 const CANVAS_BACKGROUND_COLOR  = '#000',
  	  GRADIENT_DEFAULT_BGCOLOR = '#111',
+ 	  FILTER_NONE              = '',
+ 	  FILTER_A                 = 'A',
+ 	  FILTER_B                 = 'B',
+ 	  FILTER_C                 = 'C',
+ 	  FILTER_D                 = 'D',
+ 	  FILTER_468               = '468',
 	  FONT_FAMILY              = 'sans-serif',
 	  FPS_COLOR                = '#0f0',
+	  GRADIENT_CLASSIC         = 'classic',
+	  GRADIENT_PRISM           = 'prism',
+	  GRADIENT_RAINBOW         = 'rainbow',
 	  LEDS_UNLIT_COLOR         = '#7f7f7f22',
+	  REASON_CREATE            = 'create',
+	  REASON_FSCHANGE          = 'fschange',
+	  REASON_LORES             = 'lores',
+	  REASON_RESIZE            = 'resize',
+	  REASON_USER              = 'user',
 	  SCALEX_BACKGROUND_COLOR  = '#000c',
 	  SCALEX_LABEL_COLOR       = '#fff',
 	  SCALEX_HIGHLIGHT_COLOR   = '#4f4',
 	  SCALEY_LABEL_COLOR       = '#888',
 	  SCALEY_MIDLINE_COLOR     = '#555',
-	  WEIGHTING_FILTERS        = [ '', 'A', 'B', 'C', 'D', '468' ];
+	  SCALE_BARK               = 'bark',
+	  SCALE_LINEAR             = 'linear',
+	  SCALE_LOG                = 'log',
+	  SCALE_MEL                = 'mel';
 
 // custom error messages
 const ERR_AUDIO_CONTEXT_FAIL     = [ 'ERR_AUDIO_CONTEXT_FAIL', 'Could not create audio context. Web Audio API not supported?' ],
@@ -63,41 +80,38 @@ export default class AudioMotionAnalyzer {
 
 		this._ready = false;
 
-		// Gradient definitions
-
-		this._gradients = {
-			classic: {
-				bgColor: GRADIENT_DEFAULT_BGCOLOR,
-				colorStops: [
-					'hsl( 0, 100%, 50% )',
-					{ pos: .6, color: 'hsl( 60, 100%, 50% )' },
-					'hsl( 120, 100%, 50% )'
-				]
-			},
-			prism:   {
-				bgColor: GRADIENT_DEFAULT_BGCOLOR,
-				colorStops: [
-					'hsl( 0, 100%, 50% )',
-					'hsl( 60, 100%, 50% )',
-					'hsl( 120, 100%, 50% )',
-					'hsl( 180, 100%, 50% )',
-					'hsl( 240, 100%, 50% )'
-				]
-			},
-			rainbow: {
-				bgColor: GRADIENT_DEFAULT_BGCOLOR,
-				dir: 'h',
-				colorStops: [
-					'hsl( 0, 100%, 50% )',
-					'hsl( 60, 100%, 50% )',
-					'hsl( 120, 100%, 50% )',
-					'hsl( 180, 100%, 47% )',
-					'hsl( 240, 100%, 58% )',
-					'hsl( 300, 100%, 50% )',
-					'hsl( 360, 100%, 50% )'
-				]
-			},
-		};
+		// Initialize internal gradients object
+		this._gradients = {};
+
+		// Register built-in gradients
+		this.registerGradient( GRADIENT_CLASSIC, {
+			colorStops: [
+				'hsl( 0, 100%, 50% )',
+				{ pos: .6, color: 'hsl( 60, 100%, 50% )' },
+				'hsl( 120, 100%, 50% )'
+			]
+		});
+		this.registerGradient( GRADIENT_PRISM, {
+			colorStops: [
+				'hsl( 0, 100%, 50% )',
+				'hsl( 60, 100%, 50% )',
+				'hsl( 120, 100%, 50% )',
+				'hsl( 180, 100%, 50% )',
+				'hsl( 240, 100%, 50% )'
+			]
+		});
+		this.registerGradient( GRADIENT_RAINBOW, {
+			dir: 'h',
+			colorStops: [
+				'hsl( 0, 100%, 50% )',
+				'hsl( 60, 100%, 50% )',
+				'hsl( 120, 100%, 50% )',
+				'hsl( 180, 100%, 47% )',
+				'hsl( 240, 100%, 58% )',
+				'hsl( 300, 100%, 50% )',
+				'hsl( 360, 100%, 50% )'
+			]
+		});
 
 		// Set container
 		this._container = container || document.body;
@@ -199,7 +213,7 @@ export default class AudioMotionAnalyzer {
 				// delay the resize to prioritize a possible following `fullscreenchange` event
 				this._fsTimeout = window.setTimeout( () => {
 					if ( ! this._fsChanging ) {
-						this._setCanvas('resize');
+						this._setCanvas( REASON_RESIZE );
 						this._fsTimeout = 0;
 					}
 				}, 60 );
@@ -225,7 +239,7 @@ export default class AudioMotionAnalyzer {
 				window.clearTimeout( this._fsTimeout );
 
 			// update the canvas
-			this._setCanvas('fschange');
+			this._setCanvas( REASON_FSCHANGE );
 
 			// delay clearing the flag to prevent any shortly following resize event
 			this._fsTimeout = window.setTimeout( () => {
@@ -254,7 +268,7 @@ export default class AudioMotionAnalyzer {
 
 		// Finish canvas setup
 		this._ready = true;
-		this._setCanvas('create');
+		this._setCanvas( REASON_CREATE );
 	}
 
 	/**
@@ -300,6 +314,16 @@ export default class AudioMotionAnalyzer {
 		this._calcBars();
 	}
 
+	get frequencyScale() {
+		return this._frequencyScale;
+	}
+	set frequencyScale( value ) {
+		const FREQUENCY_SCALES = [ SCALE_LOG, SCALE_BARK, SCALE_MEL, SCALE_LINEAR ];
+		this._frequencyScale = FREQUENCY_SCALES[ Math.max( 0, FREQUENCY_SCALES.indexOf( ( '' + value ).toLowerCase() ) ) ];
+		this._calcAux();
+		this._calcBars();
+	}
+
 	get gradient() {
 		return this._gradient;
 	}
@@ -316,7 +340,7 @@ export default class AudioMotionAnalyzer {
 	}
 	set height( h ) {
 		this._height = h;
-		this._setCanvas('user');
+		this._setCanvas( REASON_USER );
 	}
 
 	get ledBars() {
@@ -346,7 +370,7 @@ export default class AudioMotionAnalyzer {
 	}
 	set loRes( value ) {
 		this._loRes = !! value;
-		this._setCanvas('lores');
+		this._setCanvas( REASON_LORES );
 	}
 
 	get lumiBars() {
@@ -522,6 +546,7 @@ export default class AudioMotionAnalyzer {
 		return this._weightingFilter;
 	}
 	set weightingFilter( value ) {
+		const WEIGHTING_FILTERS = [ FILTER_NONE, FILTER_A, FILTER_B, FILTER_C, FILTER_D, FILTER_468 ];
 		this._weightingFilter = WEIGHTING_FILTERS[ Math.max( 0, WEIGHTING_FILTERS.indexOf( ( '' + value ).toUpperCase() ) ) ];
 	}
 
@@ -530,7 +555,7 @@ export default class AudioMotionAnalyzer {
 	}
 	set width( w ) {
 		this._width = w;
-		this._setCanvas('user');
+		this._setCanvas( REASON_USER );
 	}
 
 	// Read only properties
@@ -562,6 +587,9 @@ export default class AudioMotionAnalyzer {
 	get isAlphaBars() {
 		return this._isAlphaBars;
 	}
+	get isBandsMode() {
+		return this._isBandsMode;
+	}
 	get isFullscreen() {
 		return ( document.fullscreenElement || document.webkitFullscreenElement ) === this._fsEl;
 	}
@@ -765,7 +793,7 @@ export default class AudioMotionAnalyzer {
 	setCanvasSize( w, h ) {
 		this._width = w;
 		this._height = h;
-		this._setCanvas('user');
+		this._setCanvas( REASON_USER );
 	}
 
 	/**
@@ -895,11 +923,12 @@ export default class AudioMotionAnalyzer {
 
 		this._radius         = Math.min( canvas.width, canvas.height ) * ( this._stereo ? .375 : .125 ) | 0;
 		this._barSpacePx     = Math.min( this._barWidth - 1, ( this._barSpace > 0 && this._barSpace < 1 ) ? this._barWidth * this._barSpace : this._barSpace );
-		this._isOctaveBands  = this._mode % 10 != 0;
-		this._isLedDisplay   = this._showLeds && this._isOctaveBands && ! isRadial;
-		this._isLumiBars     = this._lumiBars && this._isOctaveBands && ! isRadial;
+		this._isBandsMode    = this._mode % 10 != 0;
+		this._isOctaveBands  = this._isBandsMode && this._frequencyScale == SCALE_LOG;
+		this._isLedDisplay   = this._showLeds && this._isBandsMode && ! isRadial;
+		this._isLumiBars     = this._lumiBars && this._isBandsMode && ! isRadial;
 		this._isAlphaBars    = this._alphaBars && ! this._isLumiBars && this._mode != 10;
-		this._isOutline      = this._outlineBars && this._isOctaveBands && ! this._isLumiBars && ! this._isLedDisplay;
+		this._isOutline      = this._outlineBars && this._isBandsMode && ! this._isLumiBars && ! this._isLedDisplay;
 		this._maximizeLeds   = ! this._stereo || this._reflexRatio > 0 && ! this._isLumiBars;
 
 		this._channelHeight  = canvas.height - ( isDual && ! this._isLedDisplay ? .5 : 0 ) >> isDual;
@@ -914,27 +943,9 @@ export default class AudioMotionAnalyzer {
 	}
 
 	/**
-	 * Precalculate the actual X-coordinate on screen for each analyzer bar
+	 * Calculate the X-coordinate on canvas for each analyzer bar
 	 */
 	_calcBars() {
-		/*
-	 	   Since the frequency scale is logarithmic, each position in the X-axis actually represents a power of 10.
-	 	   To improve performace, the position of each frequency is calculated in advance and stored in an array.
-	 	   Canvas space usage is optimized to accommodate exactly the frequency range the user needs.
-	 	   Positions need to be recalculated whenever the frequency range, FFT size or canvas size change.
-
-	 	                                +-------------------------- canvas --------------------------+
-	 	                                |                                                            |
-	 	      |-------------------|-----|-------------|-------------------|-------------------|------|------------|
-	 	      1                  10     |            100                  1K                 10K     |           100K (Hz)
-	 	   (10^0)              (10^1)   |          (10^2)               (10^3)              (10^4)   |          (10^5)
-	 	                                |-------------|<--- logWidth ---->|--------------------------|
-	 	                    minFreq--> 20                   (pixels)                                22K <--maxFreq
-	 	                            (10^1.3)                                                     (10^4.34)
-	 	                                 ^
-	 	                               minLog
-	 	*/
-
 		const bars = this._bars = []; // initialize object property
 
 		if ( ! this._ready )
@@ -944,46 +955,46 @@ export default class AudioMotionAnalyzer {
 		// bar object: { posX, freq, freqLo, freqHi, binLo, binHi, ratioLo, ratioHi, peak, hold, value }
 		const barsPush  = args => bars.push( { ...args, peak: [0,0], hold: [0], value: [0] } );
 
+		/*
+			A simple interpolation is used to obtain an approximate amplitude value for any given frequency,
+			from the available FFT data. We find the FFT bin which closer matches the desired frequency	and
+			interpolate its value with that of the next adjacent bin, like so:
+
+				v = v0 + ( v1 - v0 ) * ( log2( f / f0 ) / log2( f1 / f0 ) )
+				                       \__________________________________/
+				                                        |
+				                                      ratio
+				where:
+
+				f  - desired frequency
+				v  - amplitude (volume) of desired frequency
+				f0 - frequency represented by the lower FFT bin
+				f1 - frequency represented by the upper FFT bin
+				v0 - amplitude of f0
+				v1 - amplitude of f1
+
+			ratio is calculated in advance here, to reduce computational complexity during real-time rendering.
+		*/
+
+		// helper function to calculate FFT bin and interpolation ratio for a given frequency
+		const calcRatio = freq => {
+			const bin   = this._freqToBin( freq, 'floor' ), // find closest FFT bin
+				  lower = this._binToFreq( bin ),
+				  upper = this._binToFreq( bin + 1 ),
+				  ratio = Math.log2( freq / lower ) / Math.log2( upper / lower );
+
+			return [ bin, ratio ];
+		}
+
 		const analyzerWidth = this._analyzerWidth,
 			  initialX      = this._initialX,
 			  isAnsiBands   = this._ansiBands,
 			  maxFreq       = this._maxFreq,
 			  minFreq       = this._minFreq;
 
-		let minLog,	logWidth;
+		let scaleMin, unitWidth;
 
 		if ( this._isOctaveBands ) {
-			/*
-				A simple interpolation is used to obtain an approximate amplitude value for any given frequency,
-				from the available FFT data. We find the FFT bin which closer matches the desired frequency	and
-				interpolate its value with that of the next adjacent bin, like so:
-
-					v = v0 + ( v1 - v0 ) * ( log2( f / f0 ) / log2( f1 / f0 ) )
-					                       \__________________________________/
-					                                        |
-					                                      ratio
-					where:
-
-					f  - desired frequency
-					v  - amplitude (volume) of desired frequency
-					f0 - frequency represented by the lower FFT bin
-					f1 - frequency represented by the upper FFT bin
-					v0 - amplitude of f0
-					v1 - amplitude of f1
-
-				ratio is calculated in advance here, to reduce computational complexity during real-time rendering.
-			*/
-
-			// helper function to calculate FFT bin and interpolation ratio for a given frequency
-			const calcRatio = freq => {
-				const bin   = this._freqToBin( freq, 'floor' ), // find closest FFT bin
-					  lower = this._binToFreq( bin ),
-					  upper = this._binToFreq( bin + 1 ),
-					  ratio = Math.log2( freq / lower ) / Math.log2( upper / lower );
-
-				return [ bin, ratio ];
-			}
-
 			// helper function to round a value to a given number of significant digits
 			// `atLeast` set to true prevents reducing the number of integer significant digits
 			const roundSD = ( value, digits, atLeast ) => +value.toPrecision( atLeast ? Math.max( digits, 1 + Math.log10( value ) | 0 ) : digits );
@@ -1045,11 +1056,11 @@ export default class AudioMotionAnalyzer {
 			const firstBar = bars[0],
 				  lastBar  = bars[ bars.length - 1 ];
 
-			minLog = Math.log10( firstBar.freqLo );
-			logWidth = analyzerWidth / ( Math.log10( lastBar.freqHi ) - minLog );
+			scaleMin = this._freqScaling( firstBar.freqLo );
+			unitWidth = analyzerWidth / ( this._freqScaling( lastBar.freqHi ) - scaleMin );
 
 			// clamp edge frequencies to minFreq / maxFreq, if necessary
-			// this is done after computing minLog and logWidth, for the proper positioning of labels on the X-axis
+			// this is done after computing scaleMin and unitWidth, for the proper positioning of labels on the X-axis
 			if ( firstBar.freqLo < minFreq ) {
 				firstBar.freqLo = minFreq;
 				[ firstBar.binLo, firstBar.ratioLo ] = calcRatio( minFreq );
@@ -1060,14 +1071,42 @@ export default class AudioMotionAnalyzer {
 				[ lastBar.binHi, lastBar.ratioHi ] = calcRatio( maxFreq );
 			}
 		}
-		else {
+		else if ( this._isBandsMode ) { // a bands mode is selected, but frequency scale is not logarithmic
+
+			const bands = [0,24,12,8,6,4,3,2,1][ this._mode ] * 10;
+
+			const invFreqScaling = x => {
+				switch ( this._frequencyScale ) {
+					case SCALE_BARK :
+						return 1960 / ( 26.81 / ( x + .53 ) - 1 );
+					case SCALE_MEL :
+						return 700 * ( 2 ** x - 1 );
+					case SCALE_LINEAR :
+						return x;
+				}
+			}
 
-			// Discrete frequencies modes
+			this._barWidth = analyzerWidth / bands;
 
+			scaleMin = this._freqScaling( minFreq );
+			unitWidth = analyzerWidth / ( this._freqScaling( maxFreq ) - scaleMin );
+
+			for ( let i = 0, posX = 0; i < bands; i++, posX += this._barWidth ) {
+				const freqLo = invFreqScaling( scaleMin + posX / unitWidth ),
+					  freq   = invFreqScaling( scaleMin + ( posX + this._barWidth / 2 ) / unitWidth ),
+					  freqHi = invFreqScaling( scaleMin + ( posX + this._barWidth ) / unitWidth ),
+					  [ binLo, ratioLo ] = calcRatio( freqLo ),
+					  [ binHi, ratioHi ] = calcRatio( freqHi );
+
+				barsPush( { posX, freq, freqLo, freqHi, binLo, binHi, ratioLo, ratioHi } );
+			}
+
+		}
+		else {	// Discrete frequencies modes
 			this._barWidth = 1;
 
-			minLog = Math.log10( minFreq );
-			logWidth = analyzerWidth / ( Math.log10( maxFreq ) - minLog );
+			scaleMin = this._freqScaling( minFreq );
+			unitWidth = analyzerWidth / ( this._freqScaling( maxFreq ) - scaleMin );
 
 			const minIndex = this._freqToBin( minFreq, 'floor' ),
 				  maxIndex = this._freqToBin( maxFreq );
@@ -1076,7 +1115,7 @@ export default class AudioMotionAnalyzer {
 
 			for ( let i = minIndex; i <= maxIndex; i++ ) {
 				const freq = this._binToFreq( i ), // frequency represented by this index
-					  posX = initialX + Math.round( logWidth * ( Math.log10( freq ) - minLog ) ); // avoid fractionary pixel values
+					  posX = initialX + Math.round( unitWidth * ( this._freqScaling( freq ) - scaleMin ) ); // avoid fractionary pixel values
 
 				// if it's on a different X-coordinate, create a new bar for this frequency
 				if ( posX > lastPos ) {
@@ -1093,8 +1132,8 @@ export default class AudioMotionAnalyzer {
 		}
 
 		// save these for scale generation
-		this._minLog = minLog;
-		this._logWidth = logWidth;
+		this._scaleMin = scaleMin;
+		this._unitWidth = unitWidth;
 
 		// update internal variables
 		this._calcAux();
@@ -1110,7 +1149,7 @@ export default class AudioMotionAnalyzer {
 	 * Calculate attributes for the vintage LEDs effect, based on visualization mode and canvas resolution
 	 */
 	_calcLeds() {
-		if ( ! this._isOctaveBands || ! this._ready )
+		if ( ! this._isBandsMode || ! this._ready )
 			return;
 
 		// adjustment for high pixel-ratio values on low-resolution screens (Android TV)
@@ -1180,16 +1219,24 @@ export default class AudioMotionAnalyzer {
 			  canvasX       = scaleX.canvas,
 			  canvasR       = scaleR.canvas,
 			  freqLabels    = [],
+			  frequencyScale= this._frequencyScale,
 			  initialX      = this._initialX,
 			  isStereo      = this._stereo,
 			  isMirror      = this._mirror,
 			  isNoteLabels  = this._noteLabels,
 			  scale         = [ 'C',, 'D',, 'E', 'F',, 'G',, 'A',, 'B' ], // for note labels (no sharp notes)
 			  scaleHeight   = Math.min( canvas.width, canvas.height ) * .03 | 0, // circular scale height (radial mode)
+  			  fontSizeX     = canvasX.height >> 1,
+			  fontSizeR     = scaleHeight >> 1,
 		  	  root12        = 2 ** ( 1 / 12 );
 
-		if ( this._ansiBands && ! isNoteLabels )
-			freqLabels.push(16,31.5,63,125,250,500,1e3,2e3,4e3,8e3,16e3);
+		if ( ! isNoteLabels && ( this._ansiBands || frequencyScale != SCALE_LOG ) ) {
+			freqLabels.push( 16, 31.5, 63, 125, 250, 500, 1e3, 2e3, 4e3 );
+			if ( frequencyScale == SCALE_LINEAR )
+				freqLabels.push( 6e3, 8e3, 10e3, 12e3, 14e3, 16e3, 18e3, 20e3 );
+			else
+				freqLabels.push( 8e3, 16e3 );
+		}
 		else {
 			let freq = C_1;
 			for ( let octave = -1; octave < 11; octave++ ) {
@@ -1239,28 +1286,35 @@ export default class AudioMotionAnalyzer {
 		scaleR.stroke();
 
 		scaleX.fillStyle = scaleR.fillStyle = SCALEX_LABEL_COLOR;
-		scaleX.font = `${ canvasX.height >> 1 }px ${FONT_FAMILY}`;
-		scaleR.font = `${ scaleHeight >> 1 }px ${FONT_FAMILY}`;
+		scaleX.font = `${ fontSizeX }px ${FONT_FAMILY}`;
+		scaleR.font = `${ fontSizeR }px ${FONT_FAMILY}`;
 		scaleX.textAlign = scaleR.textAlign = 'center';
 
+		let prevX = 0, prevR = 0;
+
 		for ( const item of freqLabels ) {
 			const [ freq, label ] = Array.isArray( item ) ? item : [ item, item < 1e3 ? item | 0 : `${ ( item / 100 | 0 ) / 10 }k` ],
-				  x    = this._logWidth * ( Math.log10( freq ) - this._minLog ),
+				  x    = this._unitWidth * ( this._freqScaling( freq ) - this._scaleMin ),
 				  y    = canvasX.height * .75,
 				  isC  = label[0] == 'C',
-	  			  maxW = isNoteLabels && ! isMirror ? this._logWidth * ( isC ? .03 : .015 ) : 99;
+	  			  maxW = fontSizeX * ( isNoteLabels && ! isMirror ? ( isC ? 1.2 : .6 ) : 3 );
 
 			if ( x >= 0 && x <= analyzerWidth ) {
+
 				scaleX.fillStyle = scaleR.fillStyle = isC && ! isMirror ? SCALEX_HIGHLIGHT_COLOR : SCALEX_LABEL_COLOR;
 
-				scaleX.fillText( label, initialX + x, y, maxW );
-				if ( x < analyzerWidth ) // avoid wrapping-around the last label and overlapping the first one
-					radialLabel( x, label );
+				if ( x > prevX + fontSizeX / 2 ) {
+					scaleX.fillText( label, initialX + x, y, maxW );
+					if ( isMirror )
+						scaleX.fillText( label, ( initialX || canvas.width ) - x, y, maxW );
+					prevX = x + Math.min( maxW, scaleX.measureText( label ).width ) / 2;
+				}
 
-				if ( isMirror ) {
-					scaleX.fillText( label, ( initialX || canvas.width ) - x, y, maxW );
-					if ( x > 10 ) // avoid overlapping of first labels on mirror mode
+				if ( x < analyzerWidth && ( x > prevR + fontSizeR || isC ) ) { // avoid wrapping-around the last label and overlapping the first one
+					radialLabel( x, label );
+					if ( isMirror && x > fontSizeR ) // avoid overlapping of first labels on mirror mode
 						radialLabel( -x, label );
+					prevR = x;
 				}
 			}
 		}
@@ -1281,7 +1335,7 @@ export default class AudioMotionAnalyzer {
 			  isLedDisplay   = this._isLedDisplay,
 			  isLinear       = this._linearAmplitude,
 			  isLumiBars     = this._isLumiBars,
-			  isOctaveBands  = this._isOctaveBands,
+			  isBandsMode    = this._isBandsMode,
 			  isOutline      = this._isOutline,
 			  isRadial       = this._radial,
 			  isStereo       = this._stereo,
@@ -1317,24 +1371,24 @@ export default class AudioMotionAnalyzer {
 				  linearTodB = value => 20 * Math.log10( value );
 
 			switch ( weightingFilter ) {
-				case 'A' : // A-weighting https://en.wikipedia.org/wiki/A-weighting
+				case FILTER_A : // A-weighting https://en.wikipedia.org/wiki/A-weighting
 					const rA = ( SQ12194 * f2 ** 2 ) / ( ( f2 + SQ20_6 ) * Math.sqrt( ( f2 + SQ107_7 ) * ( f2 + SQ737_9 ) ) * ( f2 + SQ12194 ) );
 					return 2 + linearTodB( rA );
 
-				case 'B' :
+				case FILTER_B :
 					const rB = ( SQ12194 * f2 * freq ) / ( ( f2 + SQ20_6 ) * Math.sqrt( f2 + SQ158_5 ) * ( f2 + SQ12194 ) );
 					return .17 + linearTodB( rB );
 
-				case 'C' :
+				case FILTER_C :
 					const rC = ( SQ12194 * f2 ) / ( ( f2 + SQ20_6 ) * ( f2 + SQ12194 ) );
 					return .06 + linearTodB( rC );
 
-				case 'D' :
+				case FILTER_D :
 					const h = ( ( 1037918.48 - f2 ) ** 2 + 1080768.16 * f2 ) / ( ( 9837328 - f2 ) ** 2 + 11723776 * f2 ),
 						  rD = ( freq / 6.8966888496476e-5 ) * Math.sqrt( h / ( ( f2 + 79919.29 ) * ( f2 + 1345600 ) ) );
 					return linearTodB( rD );
 
-				case '468' : // ITU-R 468 https://en.wikipedia.org/wiki/ITU-R_468_noise_weighting
+				case FILTER_468 : // ITU-R 468 https://en.wikipedia.org/wiki/ITU-R_468_noise_weighting
 					const h1 = -4.737338981378384e-24 * freq ** 6 + 2.043828333606125e-15 * freq ** 4 - 1.363894795463638e-7 * f2 + 1,
 						  h2 = 1.306612257412824e-19 * freq ** 5 - 2.118150887518656e-11 * freq ** 3 + 5.559488023498642e-4 * freq,
 						  rI = 1.246332637532143e-4 * freq / Math.hypot( h1, h2 );
@@ -1377,14 +1431,14 @@ export default class AudioMotionAnalyzer {
 
 		// LED attributes and helper function for bar height calculation
 		const [ ledCount, ledSpaceH, ledSpaceV, ledHeight ] = this._leds || [];
-		const ledPosY = height => ( height * ledCount | 0 ) * ( ledHeight + ledSpaceV ) - ledSpaceV;
+		const ledPosY = height => Math.max( 0, ( height * ledCount | 0 ) * ( ledHeight + ledSpaceV ) - ledSpaceV );
 
 		// select background color
 		const bgColor = ( ! this.showBgColor || isLedDisplay && ! this.overlay ) ? '#000' : this._gradients[ this._gradient ].bgColor;
 
 		// compute the effective bar width, considering the selected bar spacing
 		// if led effect is active, ensure at least the spacing from led definitions
-		let width = this._barWidth - ( ! isOctaveBands ? 0 : Math.max( isLedDisplay ? ledSpaceH : 0, this._barSpacePx ) );
+		let width = this._barWidth - ( ! isBandsMode ? 0 : Math.max( isLedDisplay ? ledSpaceH : 0, this._barSpacePx ) );
 
 		// make sure width is integer for pixel accurate calculation, when no bar spacing is required
 		if ( this._barSpace == 0 && ! isLedDisplay )
@@ -1485,8 +1539,10 @@ export default class AudioMotionAnalyzer {
 				fftData = fftData.map( ( val, idx ) => val + weightingdB( this._binToFreq( idx ) ) );
 
 			// helper function for FFT data interpolation
-			const lastBin = fftData.length - 1,
-				  interpolate = ( bin, ratio ) => fftData[ bin ] + ( bin < lastBin ? ( fftData[ bin + 1 ] - fftData[ bin ] ) * ratio : 0 );
+			const interpolate = ( bin, ratio ) => {
+				const value = fftData[ bin ] + ( bin < fftData.length - 1 ? ( fftData[ bin + 1 ] - fftData[ bin ] ) * ratio : 0 );
+				return isNaN( value ) ? -Infinity : value;
+			}
 
 			// start drawing path (for mode 10)
 			ctx.beginPath();
@@ -1539,14 +1595,8 @@ export default class AudioMotionAnalyzer {
 				else if ( isOutline )
 					ctx.globalAlpha = this.fillAlpha;
 
-				// normalize barHeight
-				if ( isLedDisplay ) {
-					barHeight = ledPosY( barHeight );
-					if ( barHeight < 0 )
-						barHeight = 0; // prevent showing leds below 0 when overlay and reflex are active
-				}
-				else
-					barHeight = barHeight * maxBarHeight | 0;
+				// compute actual bar height on screen
+				barHeight = isLedDisplay ? ledPosY( barHeight ) : barHeight * maxBarHeight | 0;
 
 				// invert bar for radial channel 1
 				if ( isRadial && channel == 1 )
@@ -1561,7 +1611,7 @@ export default class AudioMotionAnalyzer {
 				if ( mode == 10 ) {
 					// compute the average between the initial bar (i==0) and the next one
 					// used to smooth the curve when the initial posX is off the screen, in mirror and radial modes
-					const nextBarAvg = i ? 0 : ( fftData[ this._bars[1].binLo ] / 255 * maxBarHeight * ( ! isRadial || ! channel || - 1 ) + barHeight ) / 2;
+					const nextBarAvg = i ? 0 : ( this._normalizedB( fftData[ this._bars[1].binLo ] ) * maxBarHeight * ( ! isRadial || ! channel || - 1 ) + barHeight ) / 2;
 
 					if ( isRadial ) {
 						if ( i == 0 )
@@ -1577,7 +1627,7 @@ export default class AudioMotionAnalyzer {
 						if ( i == 0 ) {
 							// start the line off-screen using the previous FFT bin value as the initial amplitude
 							if ( mirrorMode != -1 ) {
-								const prevFFTData = binLo ? fftData[ binLo - 1 ] / 255 * maxBarHeight : barHeight; // use previous FFT bin value, when available
+								const prevFFTData = binLo ? this._normalizedB( fftData[ binLo - 1 ] ) * maxBarHeight : barHeight; // use previous FFT bin value, when available
 								ctx.moveTo( initialX - lineWidth, analyzerBottom - prevFFTData );
 							}
 							else
@@ -1657,8 +1707,11 @@ export default class AudioMotionAnalyzer {
 						ctx.globalAlpha = peak;
 
 					// render peak according to current mode / effect
-					if ( isLedDisplay )
-						ctx.fillRect( posX,	analyzerBottom - ledPosY( peak ), width, ledHeight );
+					if ( isLedDisplay ) {
+						const ledPeak = ledPosY( peak );
+						if ( ledPeak >= ledHeight ) // avoid peak below zero level
+							ctx.fillRect( posX,	analyzerBottom - ledPeak, width, ledHeight );
+					}
 					else if ( ! isRadial )
 						ctx.fillRect( posX, analyzerBottom - peak * maxBarHeight, adjWidth, 2 );
 					else if ( mode != 10 ) // radial - no peaks for mode 10
@@ -1803,6 +1856,22 @@ export default class AudioMotionAnalyzer {
 		this._runId = requestAnimationFrame( timestamp => this._draw( timestamp ) );
 	}
 
+	/**
+	 * Return scaled frequency according to the selected scale
+	 */
+	_freqScaling( freq ) {
+		switch ( this._frequencyScale ) {
+			case SCALE_LOG :
+				return Math.log2( freq );
+			case SCALE_BARK :
+				return ( 26.81 * freq ) / ( 1960 + freq ) - .53;
+			case SCALE_MEL :
+				return Math.log2( 1 + freq / 700 );
+			case SCALE_LINEAR :
+				return freq;
+		}
+	}
+
 	/**
 	 * Return the FFT data bin (array index) which represents a given frequency
 	 */
@@ -1984,7 +2053,7 @@ export default class AudioMotionAnalyzer {
 
 		// detect fullscreen changes (for Safari)
 		if ( this._fsStatus !== undefined && this._fsStatus !== isFullscreen )
-			reason = 'fschange';
+			reason = REASON_FSCHANGE;
 		this._fsStatus = isFullscreen;
 
 		// call the callback function, if defined
@@ -2005,7 +2074,8 @@ export default class AudioMotionAnalyzer {
 			bgAlpha        : 0.7,
 			fftSize        : 8192,
 			fillAlpha      : 1,
-			gradient       : 'classic',
+			frequencyScale : SCALE_LOG,
+			gradient       : GRADIENT_CLASSIC,
 			ledBars        : false,
 			linearAmplitude: false,
 			linearBoost    : 1,
@@ -2038,7 +2108,7 @@ export default class AudioMotionAnalyzer {
 			stereo         : false,
 			useCanvas      : true,
 			volume         : 1,
-			weightingFilter: ''
+			weightingFilter: FILTER_NONE
 		};
 
 		// callback functions properties

package/src/index.d.ts

@@ -4,7 +4,7 @@ type OnCanvasResizeFunction = (
   instance: AudioMotionAnalyzer
 ) => unknown;
 
-type CanvasResizeReason = "create" | "fschange" | "lores" | "resize" | "user";
+export type CanvasResizeReason = "create" | "fschange" | "lores" | "resize" | "user";
 
 export interface Options {
   alphaBars?: boolean;
@@ -13,11 +13,12 @@ export interface Options {
   bgAlpha?: number;
   fftSize?: number;
   fillAlpha?: number;
+  frequencyScale?: FrequencyScale;
   gradient?: string;
   height?: number;
   ledBars?: boolean;
   linearAmplitude?: boolean;
-  linearBoost?: boolean;
+  linearBoost?: number;
   lineWidth?: number;
   loRes?: boolean;
   lumiBars?: boolean;
@@ -53,7 +54,7 @@ export interface Options {
   width?: number;
 }
 
-interface AnalyzerBarData {
+export interface AnalyzerBarData {
   posX: number;
   freq: number;
   freqLo: number;
@@ -63,18 +64,20 @@ interface AnalyzerBarData {
   value: [ number, number? ];
 }
 
-interface ConstructorOptions extends Options {
+export interface ConstructorOptions extends Options {
   audioCtx?: AudioContext;
   connectSpeakers?: boolean;
   fsElement?: HTMLElement;
   source?: HTMLMediaElement | AudioNode;
 }
 
-type EnergyPreset = "peak" | "bass" | "lowMid" | "mid" | "highMid" | "treble";
+export type EnergyPreset = "peak" | "bass" | "lowMid" | "mid" | "highMid" | "treble";
 
-type GradientColorStop = string | { pos: number; color: string };
+export type FrequencyScale = "bark" | "linear" | "log" | "mel";
 
-type WeightingFilter = "" | "A" | "B" | "C" | "D" | "468";
+export type GradientColorStop = string | { pos: number; color: string };
+
+export type WeightingFilter = "" | "A" | "B" | "C" | "D" | "468";
 
 type ArrayTwoOrMore<T> = {
   0: T
@@ -124,6 +127,9 @@ declare class AudioMotionAnalyzer {
   get fsHeight(): number;
   get fsWidth(): number;
 
+  get frequencyScale(): FrequencyScale;
+  set frequencyScale(value: FrequencyScale);
+
   get gradient(): string;
   set gradient(value: string);
 
@@ -134,6 +140,7 @@ declare class AudioMotionAnalyzer {
   set width(w: number);
 
   get isAlphaBars(): boolean;
+  get isBandsMode(): boolean;
   get isFullscreen(): boolean;
   get isLedBars(): boolean;
   get isLumiBars(): boolean;