audiomotion-analyzer 3.5.0-beta.0 → 3.6.0

package/src/audioMotion-analyzer.js

@@ -2,12 +2,12 @@
  * audioMotion-analyzer
  * High-resolution real-time graphic audio spectrum analyzer JS module
  *
- * @version 3.5.0-beta.0
+ * @version 3.6.0
  * @author  Henrique Avila Vianna <hvianna@gmail.com> <https://henriquevianna.com>
  * @license AGPL-3.0-or-later
  */
 
-const VERSION = '3.5.0-beta.0';
+const VERSION = '3.6.0';
 
 // internal constants
 const TAU     = 2 * Math.PI,
@@ -231,7 +231,14 @@ export default class AudioMotionAnalyzer {
 	 * ==========================================================================
 	 */
 
-	// Bar spacing (for octave bands modes)
+
+	get alphaBars() {
+		return this._alphaBars;
+	}
+	set alphaBars( value ) {
+		this._alphaBars = !! value;
+		this._calcAux();
+	}
 
 	get barSpace() {
 		return this._barSpace;
@@ -241,8 +248,6 @@ export default class AudioMotionAnalyzer {
 		this._calcAux();
 	}
 
-	// FFT size
-
 	get fftSize() {
 		return this._analyzer[0].fftSize;
 	}
@@ -254,8 +259,6 @@ export default class AudioMotionAnalyzer {
 		this._calcBars();
 	}
 
-	// Gradient
-
 	get gradient() {
 		return this._gradient;
 	}
@@ -267,8 +270,6 @@ export default class AudioMotionAnalyzer {
 		this._makeGrad();
 	}
 
-	// Canvas size
-
 	get height() {
 		return this._height;
 	}
@@ -276,15 +277,72 @@ export default class AudioMotionAnalyzer {
 		this._height = h;
 		this._setCanvas('user');
 	}
-	get width() {
-		return this._width;
+
+	get ledBars() {
+		return this._showLeds;
 	}
-	set width( w ) {
-		this._width = w;
-		this._setCanvas('user');
+	set ledBars( value ) {
+		this._showLeds = !! value;
+		this._calcAux();
+	}
+
+	get loRes() {
+		return this._loRes;
+	}
+	set loRes( value ) {
+		this._loRes = !! value;
+		this._setCanvas('lores');
+	}
+
+	get lumiBars() {
+		return this._lumiBars;
+	}
+	set lumiBars( value ) {
+		this._lumiBars = !! value;
+		this._calcAux();
+		this._calcLeds();
+		this._makeGrad();
+	}
+
+	get maxDecibels() {
+		return this._analyzer[0].maxDecibels;
+	}
+	set maxDecibels( value ) {
+		for ( const i of [0,1] )
+			this._analyzer[ i ].maxDecibels = value;
+	}
+
+	get maxFreq() {
+		return this._maxFreq;
+	}
+	set maxFreq( value ) {
+		if ( value < 1 )
+			throw new AudioMotionError( 'ERR_FREQUENCY_TOO_LOW', `Frequency values must be >= 1` );
+		else {
+			this._maxFreq = value;
+			this._calcBars();
+		}
+	}
+
+	get minDecibels() {
+		return this._analyzer[0].minDecibels;
+	}
+	set minDecibels( value ) {
+		for ( const i of [0,1] )
+			this._analyzer[ i ].minDecibels = value;
 	}
 
-	// Mirror
+	get minFreq() {
+		return this._minFreq;
+	}
+	set minFreq( value ) {
+		if ( value < 1 )
+			throw new AudioMotionError( 'ERR_FREQUENCY_TOO_LOW', `Frequency values must be >= 1` );
+		else {
+			this._minFreq = value;
+			this._calcBars();
+		}
+	}
 
 	get mirror() {
 		return this._mirror;
@@ -296,8 +354,6 @@ export default class AudioMotionAnalyzer {
 		this._makeGrad();
 	}
 
-	// Visualization mode
-
 	get mode() {
 		return this._mode;
 	}
@@ -313,30 +369,14 @@ export default class AudioMotionAnalyzer {
 			throw new AudioMotionError( 'ERR_INVALID_MODE', `Invalid mode: ${value}` );
 	}
 
-	// Low-resolution mode
-
-	get loRes() {
-		return this._loRes;
-	}
-	set loRes( value ) {
-		this._loRes = !! value;
-		this._setCanvas('lores');
-	}
-
-	// Luminance bars
-
-	get lumiBars() {
-		return this._lumiBars;
+	get outlineBars() {
+		return this._outlineBars;
 	}
-	set lumiBars( value ) {
-		this._lumiBars = !! value;
+	set outlineBars( value ) {
+		this._outlineBars = !! value;
 		this._calcAux();
-		this._calcLeds();
-		this._makeGrad();
 	}
 
-	// Radial mode
-
 	get radial() {
 		return this._radial;
 	}
@@ -347,20 +387,6 @@ export default class AudioMotionAnalyzer {
 		this._makeGrad();
 	}
 
-	// Radial spin speed
-
-	get spinSpeed() {
-		return this._spinSpeed;
-	}
-	set spinSpeed( value ) {
-		value = +value || 0;
-		if ( this._spinSpeed === undefined || value == 0 )
-			this._spinAngle = -HALF_PI; // initialize or reset the rotation angle
-		this._spinSpeed = value;
-	}
-
-	// Reflex
-
 	get reflexRatio() {
 		return this._reflexRatio;
 	}
@@ -376,60 +402,14 @@ export default class AudioMotionAnalyzer {
 		}
 	}
 
-	// Current frequency range
-
-	get minFreq() {
-		return this._minFreq;
-	}
-	set minFreq( value ) {
-		if ( value < 1 )
-			throw new AudioMotionError( 'ERR_FREQUENCY_TOO_LOW', `Frequency values must be >= 1` );
-		else {
-			this._minFreq = value;
-			this._calcBars();
-		}
-	}
-	get maxFreq() {
-		return this._maxFreq;
-	}
-	set maxFreq( value ) {
-		if ( value < 1 )
-			throw new AudioMotionError( 'ERR_FREQUENCY_TOO_LOW', `Frequency values must be >= 1` );
-		else {
-			this._maxFreq = value;
-			this._calcBars();
-		}
-	}
-
-	// Analyzer's sensitivity
-
-	get minDecibels() {
-		return this._analyzer[0].minDecibels;
-	}
-	set minDecibels( value ) {
-		for ( const i of [0,1] )
-			this._analyzer[ i ].minDecibels = value;
-	}
-	get maxDecibels() {
-		return this._analyzer[0].maxDecibels;
-	}
-	set maxDecibels( value ) {
-		for ( const i of [0,1] )
-			this._analyzer[ i ].maxDecibels = value;
-	}
-
-	// LEDs effect
-
+	// DEPRECATED - use ledBars instead
 	get showLeds() {
-		return this._showLeds;
+		return this.ledBars;
 	}
 	set showLeds( value ) {
-		this._showLeds = !! value;
-		this._calcAux();
+		this.ledBars = value;
 	}
 
-	// Analyzer's smoothing time constant
-
 	get smoothing() {
 		return this._analyzer[0].smoothingTimeConstant;
 	}
@@ -438,7 +418,15 @@ export default class AudioMotionAnalyzer {
 			this._analyzer[ i ].smoothingTimeConstant = value;
 	}
 
-	// Split gradient (in stereo mode)
+	get spinSpeed() {
+		return this._spinSpeed;
+	}
+	set spinSpeed( value ) {
+		value = +value || 0;
+		if ( this._spinSpeed === undefined || value == 0 )
+			this._spinAngle = -HALF_PI; // initialize or reset the rotation angle
+		this._spinSpeed = value;
+	}
 
 	get splitGradient() {
 		return this._splitGradient;
@@ -448,8 +436,6 @@ export default class AudioMotionAnalyzer {
 		this._makeGrad();
 	}
 
-	// Stereo
-
 	get stereo() {
 		return this._stereo;
 	}
@@ -470,8 +456,6 @@ export default class AudioMotionAnalyzer {
 		this._makeGrad();
 	}
 
-	// Volume
-
 	get volume() {
 		return this._output.gain.value;
 	}
@@ -479,6 +463,14 @@ export default class AudioMotionAnalyzer {
 		this._output.gain.value = value;
 	}
 
+	get width() {
+		return this._width;
+	}
+	set width( w ) {
+		this._width = w;
+		this._setCanvas('user');
+	}
+
 	// Read only properties
 
 	get audioCtx() {
@@ -496,36 +488,43 @@ export default class AudioMotionAnalyzer {
 	get connectedTo() {
 		return this._outNodes;
 	}
-	get energy() {
-		// DEPRECATED - to be removed in v4.0.0
+	get energy() { // DEPRECATED - use getEnergy() instead
 		return this.getEnergy();
 	}
-	get fsWidth() {
-		return this._fsWidth;
+	get fps() {
+		return this._fps;
 	}
 	get fsHeight() {
 		return this._fsHeight;
 	}
-	get fps() {
-		return this._fps;
+	get fsWidth() {
+		return this._fsWidth;
+	}
+	get isAlphaBars() {
+		return this._isAlphaBars;
 	}
 	get isFullscreen() {
 		return ( document.fullscreenElement || document.webkitFullscreenElement ) === this._fsEl;
 	}
-	get isOctaveBands() {
-		return this._isOctaveBands;
-	}
-	get isLedDisplay() {
+	get isLedBars() {
 		return this._isLedDisplay;
 	}
+	get isLedDisplay() { // DEPRECATED - use isLedBars instead
+		return this.isLedBars;
+	}
 	get isLumiBars() {
 		return this._isLumiBars;
 	}
+	get isOctaveBands() {
+		return this._isOctaveBands;
+	}
 	get isOn() {
 		return this._runId !== undefined;
 	}
-	get peakEnergy() {
-		// DEPRECATED - to be removed in v4.0.0
+	get isOutlineBars() {
+		return this._isOutline;
+	}
+	get peakEnergy() { // DEPRECATED - use getEnergy('peak') instead
 		return this.getEnergy('peak');
 	}
 	get pixelRatio() {
@@ -566,6 +565,25 @@ export default class AudioMotionAnalyzer {
 		return node;
 	}
 
+	/**
+	 * Connects the analyzer output to another audio node
+	 *
+	 * @param [{object}] an AudioNode; if undefined, the output is connected to the audio context destination (speakers)
+	 */
+	connectOutput( node = this.audioCtx.destination ) {
+		if ( this._outNodes.includes( node ) )
+			return;
+
+		this._output.connect( node );
+		this._outNodes.push( node );
+
+		// when connecting the first node, also connect the analyzer nodes to the merger / output nodes
+		if ( this._outNodes.length == 1 ) {
+			for ( const i of [0,1] )
+				this._analyzer[ i ].connect( ( ! this._stereo && ! i ? this._output : this._merger ), 0, i );
+		}
+	}
+
 	/**
 	 * Disconnects audio sources from the analyzer
 	 *
@@ -586,25 +604,6 @@ export default class AudioMotionAnalyzer {
 		}
 	}
 
-	/**
-	 * Connects the analyzer output to another audio node
-	 *
-	 * @param [{object}] an AudioNode; if undefined, the output is connected to the audio context destination (speakers)
-	 */
-	connectOutput( node = this.audioCtx.destination ) {
-		if ( this._outNodes.includes( node ) )
-			return;
-
-		this._output.connect( node );
-		this._outNodes.push( node );
-
-		// when connecting the first node, also connect the analyzer nodes to the merger / output nodes
-		if ( this._outNodes.length == 1 ) {
-			for ( const i of [0,1] )
-				this._analyzer[ i ].connect( ( ! this._stereo && ! i ? this._output : this._merger ), 0, i );
-		}
-	}
-
 	/**
 	 * Disconnects the analyzer output from other audio nodes
 	 *
@@ -646,7 +645,7 @@ export default class AudioMotionAnalyzer {
 			return this._energy.val;
 
 		// if startFreq is a string, check for presets
-		if ( startFreq != ( startFreq | 0 ) ) {
+		if ( startFreq != +startFreq ) {
 			if ( startFreq == 'peak' )
 				return this._energy.peak;
 
@@ -693,17 +692,15 @@ export default class AudioMotionAnalyzer {
 		if ( options.colorStops === undefined || options.colorStops.length < 2 )
 			throw new AudioMotionError( 'ERR_GRADIENT_MISSING_COLOR', 'Gradient must define at least two colors' );
 
-		this._gradients[ name ] = {};
-
-		if ( options.bgColor !== undefined )
-			this._gradients[ name ].bgColor = options.bgColor;
-		else
-			this._gradients[ name ].bgColor = '#111';
-
-		if ( options.dir !== undefined )
-			this._gradients[ name ].dir = options.dir;
+		this._gradients[ name ] = {
+			bgColor:    options.bgColor || '#111',
+			dir:        options.dir,
+			colorStops: options.colorStops
+		};
 
-		this._gradients[ name ].colorStops = options.colorStops;
+		// if the registered gradient is the current one, regenerate it
+		if ( name == this._gradient )
+			this._makeGrad();
 	}
 
 	/**
@@ -839,9 +836,11 @@ 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._isOctaveBands  = this._mode % 10 != 0;
+		this._isLedDisplay   = this._showLeds && this._isOctaveBands && ! isRadial;
+		this._isLumiBars     = this._lumiBars && this._isOctaveBands && ! isRadial;
+		this._isAlphaBars    = this._alphaBars && ! this._isLumiBars && this._mode != 10;
+		this._isOutline      = this._outlineBars && this._isOctaveBands && ! this._isLumiBars && ! this._isLedDisplay;
 		this._maximizeLeds   = ! this._stereo || this._reflexRatio > 0 && ! this._isLumiBars;
 
 		this._channelHeight  = canvas.height - ( isDual && ! this._isLedDisplay ? .5 : 0 ) >> isDual;
@@ -856,31 +855,210 @@ export default class AudioMotionAnalyzer {
 	}
 
 	/**
-	 * Calculate attributes for the vintage LEDs effect, based on visualization mode and canvas resolution
+	 * Precalculate the actual X-coordinate on screen for each analyzer bar
 	 */
-	_calcLeds() {
-		if ( ! this._isOctaveBands || ! this._ready )
-			return;
+	_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
+	 	*/
 
-		// adjustment for high pixel-ratio values on low-resolution screens (Android TV)
-		const dPR = this._pixelRatio / ( window.devicePixelRatio > 1 && window.screen.height <= 540 ? 2 : 1 );
+		const bars = this._bars = []; // initialize object property
 
-		const params = [ [],
-			[ 128,  3, .45  ], // mode 1
-			[ 128,  4, .225 ], // mode 2
-			[  96,  6, .225 ], // mode 3
-			[  80,  6, .225 ], // mode 4
-			[  80,  6, .125 ], // mode 5
-			[  64,  6, .125 ], // mode 6
-			[  48,  8, .125 ], // mode 7
-			[  24, 16, .125 ], // mode 8
-		];
+		if ( ! this._ready )
+			return;
 
-		// use custom LED parameters if set, or the default parameters for the current mode
-		const customParams = this._ledParams,
-			  [ maxLeds, spaceVRatio, spaceHRatio ] = customParams || params[ this._mode ];
+		// helper functions
+		const binToFreq = bin => bin * this.audioCtx.sampleRate / this.fftSize || 1; // returns 1 for bin 0
+		const barsPush  = ( posX, binLo, binHi, freqLo, freqHi, ratioLo, ratioHi ) => bars.push( { posX, binLo, binHi, freqLo, freqHi, ratioLo, ratioHi, peak: [0,0], hold: [0], value: [0] } );
 
-		let ledCount, spaceV,
+		const analyzerWidth = this._analyzerWidth,
+			  initialX      = this._initialX,
+			  maxFreq       = this._maxFreq,
+			  minFreq       = this._minFreq;
+
+		let minLog,	logWidth;
+
+		if ( this._isOctaveBands ) {
+
+			// generate a 11-octave 24-tone equal tempered scale (16Hz to 33kHz)
+
+			/*
+				A simple linear interpolation is used to obtain an approximate amplitude value for the desired frequency
+				from available FFT data, like so:
+
+				h = hLo + ( hHi - hLo ) * ( f - fLo ) / ( fHi - fLo )
+				                         \___________________________/
+				                                       |
+				                                     ratio
+				where:
+
+				f   - desired frequency
+				h   - amplitude of desired frequency
+				fLo - frequency represented by the lower FFT bin
+				fHi - frequency represented by the higher FFT bin
+				hLo - amplitude of fLo
+				hHi - amplitude of fHi
+
+				ratio is calculated in advance here, to reduce computational complexity during real-time rendering in the _draw() function
+			*/
+
+			let temperedScale = [];
+
+			for ( let octave = 0; octave < 11; octave++ ) {
+				for ( let note = 0; note < 24; note++ ) {
+
+					const freq     = C0 * ROOT24 ** ( octave * 24 + note ),
+						  bin      = this._freqToBin( freq, 'floor' ),
+						  binFreq  = binToFreq( bin ),
+						  nextFreq = binToFreq( bin + 1 ),
+						  ratio    = ( freq - binFreq ) / ( nextFreq - binFreq );
+
+					temperedScale.push( { freq, bin, ratio } );
+				}
+			}
+
+			// generate the frequency bands according to current analyzer settings
+
+			const steps = [0,1,2,3,4,6,8,12,24][ this._mode ]; // number of notes grouped per band for each mode
+
+			for ( let index = 0; index < temperedScale.length; index += steps ) {
+				let { freq: freqLo, bin: binLo, ratio: ratioLo } = temperedScale[ index ],             // band start
+					{ freq: freqHi, bin: binHi, ratio: ratioHi } = temperedScale[ index + steps - 1 ]; // band end
+
+				const nBars   = bars.length,
+					  prevBar = bars[ nBars - 1 ];
+
+				// if the ending frequency is out of range, we're done here
+				if ( freqHi > maxFreq || binHi >= this.fftSize / 2 ) {
+					prevBar.binHi++;     // add an extra bin to the last bar, to fully include the last valid band
+					prevBar.ratioHi = 0; // disable interpolation
+					prevBar.freqHi = binToFreq( prevBar.binHi ); // update ending frequency
+					break;
+				}
+
+				// is the starting frequency in the selected range?
+				if ( freqLo >= minFreq ) {
+					if ( nBars > 0 ) {
+						const diff = binLo - prevBar.binHi;
+
+						// check if we skipped any available FFT bins since the last bar
+						if ( diff > 1 ) {
+							// allocate half of the unused bins to the previous bar
+							prevBar.binHi = binLo - ( diff >> 1 );
+							prevBar.ratioHi = 0;
+							prevBar.freqHi = binToFreq( prevBar.binHi ); // update ending frequency
+
+							// if the previous bar doesn't share any bins with other bars, no need for interpolation
+							if ( nBars > 1 && prevBar.binHi > prevBar.binLo && prevBar.binLo > bars[ nBars - 2 ].binHi ) {
+								prevBar.ratioLo = 0;
+								prevBar.freqLo = binToFreq( prevBar.binLo ); // update starting frequency
+							}
+
+							// start the current bar at the bin following the last allocated bin
+							binLo = prevBar.binHi + 1;
+						}
+
+						// if the lower bin is not shared with the ending frequency nor the previous bar, no need to interpolate it
+						if ( binHi > binLo && binLo > prevBar.binHi ) {
+							ratioLo = 0;
+							freqLo = binToFreq( binLo );
+						}
+					}
+
+					barsPush( 0, binLo, binHi, freqLo, freqHi, ratioLo, ratioHi );
+				}
+			}
+
+			this._barWidth = analyzerWidth / bars.length;
+
+			bars.forEach( ( bar, index ) => bar.posX = initialX + index * this._barWidth );
+
+			minLog = Math.log10( bars[0].freqLo );
+			logWidth = analyzerWidth / ( Math.log10( bars[ bars.length - 1 ].freqHi ) - minLog );
+		}
+		else {
+
+			// Discrete frequencies modes
+
+			this._barWidth = 1;
+
+			minLog = Math.log10( minFreq );
+			logWidth = analyzerWidth / ( Math.log10( maxFreq ) - minLog );
+
+			const minIndex = this._freqToBin( minFreq, 'floor' ),
+				  maxIndex = this._freqToBin( maxFreq );
+
+	 		let lastPos = -999;
+
+			for ( let i = minIndex; i <= maxIndex; i++ ) {
+				const freq = binToFreq( i ), // frequency represented by this index
+					  pos  = initialX + Math.round( logWidth * ( Math.log10( freq ) - minLog ) ); // avoid fractionary pixel values
+
+				// if it's on a different X-coordinate, create a new bar for this frequency
+				if ( pos > lastPos ) {
+					barsPush( pos, i, i, freq, freq, 0, 0 );
+					lastPos = pos;
+				} // otherwise, add this frequency to the last bar's range
+				else if ( bars.length ) {
+					bars[ bars.length - 1 ].binHi = i;
+					bars[ bars.length - 1 ].freqHi = freq;
+				}
+			}
+		}
+
+		// save these for scale generation
+		this._minLog = minLog;
+		this._logWidth = logWidth;
+
+		// update internal variables
+		this._calcAux();
+
+		// generate the X-axis and radial scales
+		this._createScales();
+
+		// update LED properties
+		this._calcLeds();
+	}
+
+	/**
+	 * Calculate attributes for the vintage LEDs effect, based on visualization mode and canvas resolution
+	 */
+	_calcLeds() {
+		if ( ! this._isOctaveBands || ! this._ready )
+			return;
+
+		// adjustment for high pixel-ratio values on low-resolution screens (Android TV)
+		const dPR = this._pixelRatio / ( window.devicePixelRatio > 1 && window.screen.height <= 540 ? 2 : 1 );
+
+		const params = [ [],
+			[ 128,  3, .45  ], // mode 1
+			[ 128,  4, .225 ], // mode 2
+			[  96,  6, .225 ], // mode 3
+			[  80,  6, .225 ], // mode 4
+			[  80,  6, .125 ], // mode 5
+			[  64,  6, .125 ], // mode 6
+			[  48,  8, .125 ], // mode 7
+			[  24, 16, .125 ], // mode 8
+		];
+
+		// use custom LED parameters if set, or the default parameters for the current mode
+		const customParams = this._ledParams,
+			  [ maxLeds, spaceVRatio, spaceHRatio ] = customParams || params[ this._mode ];
+
+		let ledCount, spaceV,
 			analyzerHeight = this._analyzerHeight;
 
 		if ( customParams ) {
@@ -915,6 +1093,72 @@ export default class AudioMotionAnalyzer {
 		];
 	}
 
+	/**
+	 * Generate the X-axis and radial scales in auxiliary canvases
+	 */
+	_createScales() {
+		const freqLabels  = [ 16, 31, 63, 125, 250, 500, 1000, 2000, 4000, 8000, 16000 ],
+			  canvas      = this._canvasCtx.canvas,
+			  scaleX      = this._scaleX,
+			  scaleR      = this._scaleR,
+			  canvasX     = scaleX.canvas,
+			  canvasR     = scaleR.canvas,
+			  scaleHeight = Math.min( canvas.width, canvas.height ) * .03 | 0; // circular scale height (radial mode)
+
+		// in radial stereo mode, the scale is positioned exactly between both channels, by making the canvas a bit larger than the central diameter
+		canvasR.width = canvasR.height = ( this._radius << 1 ) + ( this._stereo * scaleHeight );
+
+		const radius  = canvasR.width >> 1, // this is also used as the center X and Y coordinates of the circular scale canvas
+			  radialY = radius - scaleHeight * .7;	// vertical position of text labels in the circular scale
+
+		// helper function
+		const radialLabel = ( x, label ) => {
+			const angle  = TAU * ( x / canvas.width ),
+				  adjAng = angle - HALF_PI, // rotate angles so 0 is at the top
+				  posX   = radialY * Math.cos( adjAng ),
+				  posY   = radialY * Math.sin( adjAng );
+
+			scaleR.save();
+			scaleR.translate( radius + posX, radius + posY );
+			scaleR.rotate( angle );
+			scaleR.fillText( label, 0, 0 );
+			scaleR.restore();
+		}
+
+		// clear scale canvas
+		canvasX.width |= 0;
+
+		scaleX.fillStyle = scaleR.strokeStyle = '#000c';
+		scaleX.fillRect( 0, 0, canvasX.width, canvasX.height );
+
+		scaleR.arc( radius, radius, radius - scaleHeight / 2, 0, TAU );
+		scaleR.lineWidth = scaleHeight;
+		scaleR.stroke();
+
+		scaleX.fillStyle = scaleR.fillStyle = '#fff';
+		scaleX.font = `${ canvasX.height >> 1 }px sans-serif`;
+		scaleR.font = `${ scaleHeight >> 1 }px sans-serif`;
+		scaleX.textAlign = scaleR.textAlign = 'center';
+
+		for ( const freq of freqLabels ) {
+			const label = ( freq >= 1000 ) ? `${ freq / 1000 }k` : freq,
+				  x     = this._logWidth * ( Math.log10( freq ) - this._minLog );
+
+			if ( x >= 0 && x <= this._analyzerWidth ) {
+				scaleX.fillText( label, this._initialX + x, canvasX.height * .75 );
+				if ( x < this._analyzerWidth ) // avoid wrapping-around the last label and overlapping the first one
+					radialLabel( x, label );
+
+				if ( this._mirror ) {
+					scaleX.fillText( label, ( this._initialX || canvas.width ) - x, canvasX.height * .75 );
+					if ( x > 10 ) // avoid overlapping of first labels on mirror mode
+						radialLabel( -x, label );
+				}
+
+			}
+		}
+	}
+
 	/**
 	 * Redraw the canvas
 	 * this is called 60 times per second by requestAnimationFrame()
@@ -925,14 +1169,16 @@ export default class AudioMotionAnalyzer {
 			  canvasX        = this._scaleX.canvas,
 			  canvasR        = this._scaleR.canvas,
 			  energy         = this._energy,
-			  isOctaveBands  = this._isOctaveBands,
+			  mode           = this._mode,
+			  isAlphaBars    = this._isAlphaBars,
 			  isLedDisplay   = this._isLedDisplay,
 			  isLumiBars     = this._isLumiBars,
+			  isOctaveBands  = this._isOctaveBands,
+			  isOutline      = this._isOutline,
 			  isRadial       = this._radial,
 			  isStereo       = this._stereo,
 			  lineWidth      = +this.lineWidth, // make sure the damn thing is a number!
 			  mirrorMode     = this._mirror,
-			  mode           = this._mode,
 			  channelHeight  = this._channelHeight,
 			  channelGap     = this._channelGap,
 			  analyzerHeight = this._analyzerHeight,
@@ -948,6 +1194,15 @@ export default class AudioMotionAnalyzer {
 		if ( energy.val > 0 )
 			this._spinAngle += this._spinSpeed * RPM;
 
+		const strokeIf = flag => {
+			if ( flag && lineWidth ) {
+				const alpha = ctx.globalAlpha;
+				ctx.globalAlpha = 1;
+				ctx.stroke();
+				ctx.globalAlpha = alpha;
+			}
+		}
+
 		// helper function - convert planar X,Y coordinates to radial coordinates
 		const radialXY = ( x, y, dir ) => {
 			const height = radius + y,
@@ -957,13 +1212,17 @@ export default class AudioMotionAnalyzer {
 		}
 
 		// helper function - draw a polygon of width `w` and height `h` at (x,y) in radial mode
-		const radialPoly = ( x, y, w, h ) => {
+		const radialPoly = ( x, y, w, h, stroke ) => {
+			ctx.beginPath();
 			for ( const dir of ( mirrorMode ? [1,-1] : [1] ) ) {
 				ctx.moveTo( ...radialXY( x, y, dir ) );
 				ctx.lineTo( ...radialXY( x, y + h, dir ) );
 				ctx.lineTo( ...radialXY( x + w, y + h, dir ) );
 				ctx.lineTo( ...radialXY( x + w, y, dir ) );
 			}
+
+			strokeIf( stroke );
+			ctx.fill();
 		}
 
 		// LED attributes and helper function for bar height calculation
@@ -1059,6 +1318,8 @@ export default class AudioMotionAnalyzer {
 					ctx.setLineDash( [ ledHeight, ledSpaceV ] );
 					ctx.lineWidth = width;
 				}
+				else // for outline effect ensure linewidth is not greater than half the bar width
+					ctx.lineWidth = isOutline ? Math.min( lineWidth, width / 2 ) : lineWidth;
 
 				// set selected gradient for fill and stroke
 				ctx.fillStyle = ctx.strokeStyle = this._canvasGradient;
@@ -1071,12 +1332,13 @@ export default class AudioMotionAnalyzer {
 			// helper function for FFT data interpolation
 			const interpolate = ( bin, ratio ) => fftData[ bin ] + ( fftData[ bin + 1 ] - fftData[ bin ] ) * ratio;
 
-			// start drawing path
+			// start drawing path (for mode 10)
 			ctx.beginPath();
 
-			// draw bars / lines
+			// store line graph points to create mirror effect in radial mode
+			let points = [];
 
-			let points = []; // store line graph (mode 10) points to create mirror effect in radial mode
+			// draw bars / lines
 
 			for ( let i = 0; i < nBars; i++ ) {
 
@@ -1113,9 +1375,11 @@ export default class AudioMotionAnalyzer {
 				if ( ! useCanvas )
 					continue;
 
-				// set opacity for lumi bars before barHeight value is normalized
-				if ( isLumiBars )
+				// set opacity for bar effects
+				if ( isLumiBars || isAlphaBars )
 					ctx.globalAlpha = barHeight;
+				else if ( isOutline )
+					ctx.globalAlpha = this.fillAlpha;
 
 				// normalize barHeight
 				if ( isLedDisplay ) {
@@ -1206,20 +1470,41 @@ export default class AudioMotionAnalyzer {
 					}
 					else if ( posX >= initialX ) {
 						if ( isRadial )
-							radialPoly( posX, 0, adjWidth, barHeight );
-						else
-							ctx.fillRect( posX, isLumiBars ? channelTop : analyzerBottom, adjWidth, isLumiBars ? channelBottom : -barHeight );
+							radialPoly( posX, 0, adjWidth, barHeight, isOutline );
+						else {
+							const x = posX,
+								  y = isLumiBars ? channelTop : analyzerBottom,
+								  w = adjWidth,
+								  h = isLumiBars ? channelBottom : -barHeight;
+
+							ctx.beginPath();
+							ctx.moveTo( x, y );
+							ctx.lineTo( x, y + h );
+							ctx.lineTo( x + w, y + h );
+							ctx.lineTo( x + w, y );
+
+							strokeIf( isOutline );
+							ctx.fill();
+						}
 					}
 				}
 
 				// Draw peak
-				if ( bar.peak[ channel ] > 0 && this.showPeaks && ! isLumiBars && posX >= initialX && posX < finalX ) {
+				const peak = bar.peak[ channel ];
+				if ( peak > 0 && this.showPeaks && ! isLumiBars && posX >= initialX && posX < finalX ) {
+					// choose the best opacity for the peaks
+					if ( isOutline && lineWidth > 0 )
+						ctx.globalAlpha = 1;
+					else if ( isAlphaBars )
+						ctx.globalAlpha = peak;
+
+					// render peak according to current mode / effect
 					if ( isLedDisplay )
-						ctx.fillRect( posX,	analyzerBottom - ledPosY( bar.peak[ channel ] ), width, ledHeight );
+						ctx.fillRect( posX,	analyzerBottom - ledPosY( peak ), width, ledHeight );
 					else if ( ! isRadial )
-						ctx.fillRect( posX, analyzerBottom - bar.peak[ channel ] * maxBarHeight, adjWidth, 2 );
+						ctx.fillRect( posX, analyzerBottom - peak * maxBarHeight, adjWidth, 2 );
 					else if ( mode != 10 ) // radial - no peaks for mode 10
-						radialPoly( posX, bar.peak[ channel ] * maxBarHeight * ( ! channel || -1 ), adjWidth, -2 );
+						radialPoly( posX, peak * maxBarHeight * ( ! channel || -1 ), adjWidth, -2 );
 				}
 
 			} // for ( let i = 0; i < nBars; i++ )
@@ -1231,7 +1516,7 @@ export default class AudioMotionAnalyzer {
 			// restore global alpha
 			ctx.globalAlpha = 1;
 
-			// Fill/stroke drawing path for mode 10 and radial
+			// Fill/stroke drawing path for mode 10
 			if ( mode == 10 ) {
 				if ( isRadial ) {
 					if ( mirrorMode ) {
@@ -1242,10 +1527,8 @@ export default class AudioMotionAnalyzer {
 					ctx.closePath();
 				}
 
-				if ( lineWidth > 0 ) {
-					ctx.lineWidth = lineWidth;
+				if ( lineWidth > 0 )
 					ctx.stroke();
-				}
 
 				if ( this.fillAlpha > 0 ) {
 					if ( isRadial ) {
@@ -1263,9 +1546,6 @@ export default class AudioMotionAnalyzer {
 					ctx.globalAlpha = 1;
 				}
 			}
-			else if ( isRadial ) {
-				ctx.fill();
-			}
 
 			// Reflex effect
 			if ( this._reflexRatio > 0 && ! isLumiBars ) {
@@ -1365,6 +1645,16 @@ export default class AudioMotionAnalyzer {
 		this._runId = requestAnimationFrame( timestamp => this._draw( timestamp ) );
 	}
 
+	/**
+	 * Return the FFT data bin (array index) which represents a given frequency
+	 */
+	_freqToBin( freq, rounding = 'round' ) {
+		const max = this._analyzer[0].frequencyBinCount - 1,
+			  bin = Math[ rounding ]( freq * this.fftSize / this.audioCtx.sampleRate );
+
+		return bin < max ? bin : max;
+	}
+
 	/**
 	 * Generate currently selected gradient
 	 */
@@ -1454,247 +1744,7 @@ export default class AudioMotionAnalyzer {
 	}
 
 	/**
-	 * Generate the X-axis and radial scales in auxiliary canvases
-	 */
-	_createScales() {
-		const freqLabels  = [ 16, 31, 63, 125, 250, 500, 1000, 2000, 4000, 8000, 16000 ],
-			  canvas      = this._canvasCtx.canvas,
-			  scaleX      = this._scaleX,
-			  scaleR      = this._scaleR,
-			  canvasX     = scaleX.canvas,
-			  canvasR     = scaleR.canvas,
-			  scaleHeight = Math.min( canvas.width, canvas.height ) * .03 | 0; // circular scale height (radial mode)
-
-		// in radial stereo mode, the scale is positioned exactly between both channels, by making the canvas a bit larger than the central diameter
-		canvasR.width = canvasR.height = ( this._radius << 1 ) + ( this._stereo * scaleHeight );
-
-		const radius  = canvasR.width >> 1, // this is also used as the center X and Y coordinates of the circular scale canvas
-			  radialY = radius - scaleHeight * .7;	// vertical position of text labels in the circular scale
-
-		// helper function
-		const radialLabel = ( x, label ) => {
-			const angle  = TAU * ( x / canvas.width ),
-				  adjAng = angle - HALF_PI, // rotate angles so 0 is at the top
-				  posX   = radialY * Math.cos( adjAng ),
-				  posY   = radialY * Math.sin( adjAng );
-
-			scaleR.save();
-			scaleR.translate( radius + posX, radius + posY );
-			scaleR.rotate( angle );
-			scaleR.fillText( label, 0, 0 );
-			scaleR.restore();
-		}
-
-		// clear scale canvas
-		canvasX.width |= 0;
-
-		scaleX.fillStyle = scaleR.strokeStyle = '#000c';
-		scaleX.fillRect( 0, 0, canvasX.width, canvasX.height );
-
-		scaleR.arc( radius, radius, radius - scaleHeight / 2, 0, TAU );
-		scaleR.lineWidth = scaleHeight;
-		scaleR.stroke();
-
-		scaleX.fillStyle = scaleR.fillStyle = '#fff';
-		scaleX.font = `${ canvasX.height >> 1 }px sans-serif`;
-		scaleR.font = `${ scaleHeight >> 1 }px sans-serif`;
-		scaleX.textAlign = scaleR.textAlign = 'center';
-
-		for ( const freq of freqLabels ) {
-			const label = ( freq >= 1000 ) ? `${ freq / 1000 }k` : freq,
-				  x     = this._logWidth * ( Math.log10( freq ) - this._minLog );
-
-			if ( x >= 0 && x <= this._analyzerWidth ) {
-				scaleX.fillText( label, this._initialX + x, canvasX.height * .75 );
-				if ( x < this._analyzerWidth ) // avoid wrapping-around the last label and overlapping the first one
-					radialLabel( x, label );
-
-				if ( this._mirror ) {
-					scaleX.fillText( label, ( this._initialX || canvas.width ) - x, canvasX.height * .75 );
-					if ( x > 10 ) // avoid overlapping of first labels on mirror mode
-						radialLabel( -x, label );
-				}
-
-			}
-		}
-	}
-
-	/**
-	 * Precalculate the actual X-coordinate on screen for each analyzer bar
-	 *
-	 * 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
-	 */
-	_calcBars() {
-
-		const bars = this._bars = []; // initialize object property
-
-		if ( ! this._ready )
-			return;
-
-		// helper functions
-		const binToFreq = bin => bin * this.audioCtx.sampleRate / this.fftSize || 1; // returns 1 for bin 0
-		const barsPush  = ( posX, binLo, binHi, freqLo, freqHi, ratioLo, ratioHi ) => bars.push( { posX, binLo, binHi, freqLo, freqHi, ratioLo, ratioHi, peak: [0,0], hold: [0], value: [0] } );
-
-		const analyzerWidth = this._analyzerWidth,
-			  initialX      = this._initialX,
-			  maxFreq       = this._maxFreq,
-			  minFreq       = this._minFreq;
-
-		let minLog,	logWidth;
-
-		if ( this._isOctaveBands ) {
-
-			// generate a 11-octave 24-tone equal tempered scale (16Hz to 33kHz)
-
-			/*
-				A simple linear interpolation is used to get an approximate amplitude value for the desired frequency from the available FFT data,
-				like so:
-
-				h = hLo + ( hHi - hLo ) * ( f - fLo ) / ( fHi - fLo )
-				                         \___________________________/
-				                                       |
-				                                     ratio
-				where:
-
-				f   - desired frequency
-				h   - amplitude of desired frequency
-				fLo - frequency represented by the lower FFT bin
-				fHi - frequency represented by the higher FFT bin
-				hLo - amplitude of fLo
-				hHi - amplitude of fHi
-
-				ratio is calculated in advance here, to reduce computational complexity during real-time rendering in the _draw() function
-			*/
-
-			let temperedScale = [];
-
-			for ( let octave = 0; octave < 11; octave++ ) {
-				for ( let note = 0; note < 24; note++ ) {
-
-					const freq     = C0 * ROOT24 ** ( octave * 24 + note ),
-						  bin      = this._freqToBin( freq, 'floor' ),
-						  binFreq  = binToFreq( bin ),
-						  nextFreq = binToFreq( bin + 1 ),
-						  ratio    = ( freq - binFreq ) / ( nextFreq - binFreq );
-
-					temperedScale.push( { freq, bin, ratio } );
-				}
-			}
-
-			// generate the frequency bands according to current analyzer settings
-
-			const steps = [0,1,2,3,4,6,8,12,24][ this._mode ]; // number of notes grouped per band for each mode
-
-			for ( let index = 0; index < temperedScale.length; index += steps ) {
-				let { freq: freqLo, bin: binLo, ratio: ratioLo } = temperedScale[ index ],
-					{ freq: freqHi, bin: binHi, ratio: ratioHi } = temperedScale[ index + steps - 1 ];
-
-				const nBars   = bars.length,
-					  prevBar = bars[ nBars - 1 ];
-
-				if ( freqHi > maxFreq || binHi >= this.fftSize / 2 ) {
-					prevBar.binHi++;
-					prevBar.ratioHi = 0;
-					break;
-				}
-
-				if ( freqLo >= minFreq ) {
-					if ( nBars > 0 ) {
-						const diff = binLo - prevBar.binHi;
-
-						if ( diff > 1 ) {
-							// allocate half of the unused bins to the previous bar
-							prevBar.binHi = binLo - ( diff >> 1 );
-							prevBar.ratioHi = 0;
-							if ( nBars > 1 && prevBar.binHi > prevBar.binLo && prevBar.binLo > bars[ nBars - 2 ].binHi )
-								prevBar.ratioLo = 0;
-							binLo = prevBar.binHi + 1;
-						}
-
-						if ( binHi > binLo && binLo > prevBar.binHi )
-							ratioLo = 0;
-					}
-
-					barsPush( 0, binLo, binHi, freqLo, freqHi, ratioLo, ratioHi );
-				}
-			}
-
-			this._barWidth = analyzerWidth / bars.length;
-
-			bars.forEach( ( bar, index ) => bar.posX = initialX + index * this._barWidth );
-
-			minLog = Math.log10( bars[0].freqLo );
-			logWidth = analyzerWidth / ( Math.log10( bars[ bars.length - 1 ].freqHi ) - minLog );
-		}
-		else {
-
-			// Discrete frequencies modes
-
-			this._barWidth = 1;
-
-			minLog = Math.log10( minFreq );
-			logWidth = analyzerWidth / ( Math.log10( maxFreq ) - minLog );
-
-			const minIndex = this._freqToBin( minFreq, 'floor' ),
-				  maxIndex = this._freqToBin( maxFreq );
-
-	 		let lastPos = -999;
-
-			for ( let i = minIndex; i <= maxIndex; i++ ) {
-				const freq = binToFreq( i ), // frequency represented by this index
-					  pos  = initialX + Math.round( logWidth * ( Math.log10( freq ) - minLog ) ); // avoid fractionary pixel values
-
-				// if it's on a different X-coordinate, create a new bar for this frequency
-				if ( pos > lastPos ) {
-					barsPush( pos, i, i, freq, freq, 0, 0 );
-					lastPos = pos;
-				} // otherwise, add this frequency to the last bar's range
-				else if ( bars.length ) {
-					bars[ bars.length - 1 ].binHi = i;
-					bars[ bars.length - 1 ].freqHi = freq;
-				}
-			}
-		}
-
-		// save these for scale generation
-		this._minLog = minLog;
-		this._logWidth = logWidth;
-
-		// update internal variables
-		this._calcAux();
-
-		// generate the X-axis and radial scales
-		this._createScales();
-
-		// update LED properties
-		this._calcLeds();
-	}
-
-	/**
-	 * Return the FFT data bin (array index) which represents a given frequency
-	 */
-	_freqToBin( freq, rounding = 'round' ) {
-		const max = this._analyzer[0].frequencyBinCount - 1,
-			  bin = Math[ rounding ]( freq * this.fftSize / this.audioCtx.sampleRate );
-
-		return bin < max ? bin : max;
-	}
-
-	/**
-	 * Internal function to change canvas dimensions on demand
+	 * Internal function to change canvas dimensions on demand
 	 */
 	_setCanvas( reason ) {
 		// if initialization is not finished, quit
@@ -1770,49 +1820,55 @@ export default class AudioMotionAnalyzer {
 
 		// settings defaults
 		const defaults = {
-			mode         : 0,
+			alphaBars    : false,
+			barSpace     : 0.1,
+			bgAlpha      : 0.7,
 			fftSize      : 8192,
-			minFreq      : 20,
-			maxFreq      : 22000,
-			smoothing    : 0.5,
+			fillAlpha    : 1,
 			gradient     : 'classic',
-			minDecibels  : -85,
-			maxDecibels  : -25,
-			showBgColor  : true,
-			showLeds     : false,
-			showScaleX   : true,
-			showScaleY   : false,
-			showPeaks    : true,
-			showFPS      : false,
-			lumiBars     : false,
+			ledBars      : false,
+			lineWidth    : 0,
 			loRes        : false,
-			reflexRatio  : 0,
+			lumiBars     : false,
+			maxDecibels  : -25,
+			maxFreq      : 22000,
+			minDecibels  : -85,
+			minFreq      : 20,
+			mirror       : 0,
+			mode         : 0,
+			outlineBars  : false,
+			overlay      : false,
+			radial		 : false,
 			reflexAlpha  : 0.15,
 			reflexBright : 1,
 			reflexFit    : true,
-			lineWidth    : 0,
-			fillAlpha    : 1,
-			barSpace     : 0.1,
-			overlay      : false,
-			bgAlpha      : 0.7,
-			radial		 : false,
+			reflexRatio  : 0,
+			showBgColor  : true,
+			showFPS      : false,
+			showPeaks    : true,
+			showScaleX   : true,
+			showScaleY   : false,
+			smoothing    : 0.5,
 			spinSpeed    : 0,
-			stereo       : false,
 			splitGradient: false,
 			start        : true,
+			stereo       : false,
+			useCanvas    : true,
 			volume       : 1,
-			mirror       : 0,
-			useCanvas    : true
 		};
 
 		// callback functions properties
 		const callbacks = [ 'onCanvasDraw', 'onCanvasResize' ];
 
-		// compile valid properties; `start` is not an actual property and is handled after setting everything else
-		const validProps = Object.keys( defaults ).concat( callbacks, ['height', 'width'] ).filter( e => e != 'start' );
+		// build an array of valid properties; `start` is not an actual property and is handled after setting everything else
+		const validProps = Object.keys( defaults ).filter( e => e != 'start' ).concat( callbacks, ['height', 'width'] );
+
+		// handle deprecated `showLeds` property
+		if ( options && options.showLeds !== undefined && options.ledBars === undefined )
+			options.ledBars = options.showLeds;
 
 		if ( useDefaults || options === undefined )
-			options = Object.assign( defaults, options ); // NOTE: defaults is modified!
+			options = { ...defaults, ...options }; // merge options with defaults
 
 		for ( const prop of Object.keys( options ) ) {
 			if ( callbacks.includes( prop ) && typeof options[ prop ] !== 'function' ) // check invalid callback