audiomotion-analyzer 4.0.0 → 4.1.0

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
+ * @version 4.1.0
  * @author  Henrique Avila Vianna <hvianna@gmail.com> <https://henriquevianna.com>
  * @license AGPL-3.0-or-later
  */
 
-const VERSION = '4.0.0';
+const VERSION = '4.1.0';
 
 // internal constants
 const TAU     = 2 * Math.PI,
@@ -19,6 +19,9 @@ const CANVAS_BACKGROUND_COLOR  = '#000',
 	  CHANNEL_COMBINED         = 'dual-combined',
 	  CHANNEL_SINGLE           = 'single',
 	  CHANNEL_VERTICAL         = 'dual-vertical',
+	  COLOR_BAR_INDEX          = 'bar-index',
+	  COLOR_BAR_LEVEL          = 'bar-level',
+	  COLOR_GRADIENT           = 'gradient',
  	  GRADIENT_DEFAULT_BGCOLOR = '#111',
  	  FILTER_NONE              = '',
  	  FILTER_A                 = 'A',
@@ -49,9 +52,9 @@ const PRISM = [ '#a35', '#c66', '#e94', '#ed0', '#9d5', '#4d8', '#2cb', '#0bc',
 	  GRADIENTS = [
 	  [ 'classic', {
 			colorStops: [
-				'hsl( 0, 100%, 50% )',
-				{ pos: .6, color: 'hsl( 60, 100%, 50% )' },
-				'hsl( 120, 100%, 50% )'
+				'red',
+				{ color: 'yellow', level: .85, pos: .6 },
+				{ color: 'lime', level: .475 }
 			]
 	  }],
 	  [ 'prism', {
@@ -92,9 +95,13 @@ class AudioMotionError extends Error {
 	}
 }
 
-// helper function
+// helper function - output deprecation warning message on console
 const deprecate = ( name, alternative ) => console.warn( `${name} is deprecated. Use ${alternative} instead.` );
 
+// helper function - validate a given value with an array of strings (by default, all lowercase)
+// returns the validated value, or the first element of `list` if `value` is not found in the array
+const validateFromList = ( value, list, modifier = 'toLowerCase' ) => list[ Math.max( 0, list.indexOf( ( '' + value )[ modifier ]() ) ) ];
+
 // AudioMotionAnalyzer class
 
 export default class AudioMotionAnalyzer {
@@ -110,10 +117,12 @@ export default class AudioMotionAnalyzer {
 
 		this._ready = false;
 
-		// Initialize internal gradient objects
+		// Initialize internal objects
+		this._aux = {};
+		this._flg = {};
 		this._gradients = {};       // registered gradients
 		this._selectedGrads = [];   // names of the currently selected gradients for channels 0 and 1
-		this._canvasGradients = []; // actual CanvasGradient objects for channels 0 and 1
+		this._canvasGradients = []; // CanvasGradient objects for channels 0 and 1
 
 		// Register built-in gradients
 		for ( const [ name, options ] of GRADIENTS )
@@ -262,9 +271,6 @@ export default class AudioMotionAnalyzer {
 		}
 		window.addEventListener( 'click', unlockContext );
 
-		// initialize internal variables
-		this._calcAux();
-
 		// Set configuration options and use defaults for any missing properties
 		this._setProps( options, true );
 
@@ -290,7 +296,7 @@ export default class AudioMotionAnalyzer {
 	}
 	set alphaBars( value ) {
 		this._alphaBars = !! value;
-		this._calcAux();
+		this._calcBars();
 	}
 
 	get ansiBands() {
@@ -306,15 +312,14 @@ export default class AudioMotionAnalyzer {
 	}
 	set barSpace( value ) {
 		this._barSpace = +value || 0;
-		this._calcAux();
+		this._calcBars();
 	}
 
 	get channelLayout() {
 		return this._chLayout;
 	}
 	set channelLayout( value ) {
-		const LAYOUTS = [ CHANNEL_SINGLE, CHANNEL_VERTICAL, CHANNEL_COMBINED ];
-		this._chLayout = LAYOUTS[ Math.max( 0, LAYOUTS.indexOf( ( '' + value ).toLowerCase() ) ) ];
+		this._chLayout = validateFromList( value, [ CHANNEL_SINGLE, CHANNEL_VERTICAL, CHANNEL_COMBINED ] );
 
 		// update node connections
 		this._input.disconnect();
@@ -323,13 +328,17 @@ export default class AudioMotionAnalyzer {
 		if ( this._outNodes.length ) // connect analyzer only if the output is connected to other nodes
 			this._analyzer[0].connect( this._chLayout != CHANNEL_SINGLE ? this._merger : this._output );
 
-		// update properties affected by channel layout
-		this._calcAux();
-		this._createScales();
-		this._calcLeds();
+		this._calcBars();
 		this._makeGrad();
 	}
 
+	get colorMode() {
+		return this._colorMode;
+	}
+	set colorMode( value ) {
+		this._colorMode = validateFromList( value, [ COLOR_GRADIENT, COLOR_BAR_INDEX, COLOR_BAR_LEVEL ] );
+	}
+
 	get fftSize() {
 		return this._analyzer[0].fftSize;
 	}
@@ -345,9 +354,7 @@ export default class AudioMotionAnalyzer {
 		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._frequencyScale = validateFromList( value, [ SCALE_LOG, SCALE_BARK, SCALE_MEL, SCALE_LINEAR ] );
 		this._calcBars();
 	}
 
@@ -385,7 +392,7 @@ export default class AudioMotionAnalyzer {
 	}
 	set ledBars( value ) {
 		this._showLeds = !! value;
-		this._calcAux();
+		this._calcBars();
 	}
 
 	get linearAmplitude() {
@@ -402,6 +409,13 @@ export default class AudioMotionAnalyzer {
 		this._linearBoost = value >= 1 ? +value : 1;
 	}
 
+	get lineWidth() {
+		return this._lineWidth;
+	}
+	set lineWidth( value ) {
+		this._lineWidth = +value || 0;
+	}
+
 	get loRes() {
 		return this._loRes;
 	}
@@ -415,8 +429,7 @@ export default class AudioMotionAnalyzer {
 	}
 	set lumiBars( value ) {
 		this._lumiBars = !! value;
-		this._calcAux();
-		this._calcLeds();
+		this._calcBars();
 		this._makeGrad();
 	}
 
@@ -465,7 +478,6 @@ export default class AudioMotionAnalyzer {
 	}
 	set mirror( value ) {
 		this._mirror = Math.sign( value ) | 0; // ensure only -1, 0 or 1
-		this._calcAux();
 		this._calcBars();
 		this._makeGrad();
 	}
@@ -477,7 +489,6 @@ export default class AudioMotionAnalyzer {
 		const mode = value | 0;
 		if ( mode >= 0 && mode <= 10 && mode != 9 ) {
 			this._mode = mode;
-			this._calcAux();
 			this._calcBars();
 			this._makeGrad();
 		}
@@ -498,7 +509,7 @@ export default class AudioMotionAnalyzer {
 	}
 	set outlineBars( value ) {
 		this._outlineBars = !! value;
-		this._calcAux();
+		this._calcBars();
 	}
 
 	get radial() {
@@ -506,7 +517,6 @@ export default class AudioMotionAnalyzer {
 	}
 	set radial( value ) {
 		this._radial = !! value;
-		this._calcAux();
 		this._calcBars();
 		this._makeGrad();
 	}
@@ -520,12 +530,19 @@ export default class AudioMotionAnalyzer {
 			throw new AudioMotionError( ERR_REFLEX_OUT_OF_RANGE );
 		else {
 			this._reflexRatio = value;
-			this._calcAux();
+			this._calcBars();
 			this._makeGrad();
-			this._calcLeds();
 		}
 	}
 
+	get roundBars() {
+		return this._roundBars;
+	}
+	set roundBars( value ) {
+		this._roundBars = !! value;
+		this._calcBars();
+	}
+
 	get smoothing() {
 		return this._analyzer[0].smoothingTimeConstant;
 	}
@@ -561,6 +578,13 @@ export default class AudioMotionAnalyzer {
 		this.channelLayout = value ? CHANNEL_VERTICAL : CHANNEL_SINGLE;
 	}
 
+	get trueLeds() {
+		return this._trueLeds;
+	}
+	set trueLeds( value ) {
+		this._trueLeds = !! value;
+	}
+
 	get volume() {
 		return this._output.gain.value;
 	}
@@ -572,8 +596,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() ) ) ];
+		this._weightingFilter = validateFromList( value, [ FILTER_NONE, FILTER_A, FILTER_B, FILTER_C, FILTER_D, FILTER_468 ], 'toUpperCase' );
 	}
 
 	get width() {
@@ -611,32 +634,35 @@ export default class AudioMotionAnalyzer {
 		return this._fsWidth;
 	}
 	get isAlphaBars() {
-		return this._isAlphaBars;
+		return this._flg.isAlpha;
 	}
 	get isBandsMode() {
-		return this._isBandsMode;
+		return this._flg.isBands;
 	}
 	get isFullscreen() {
 		return ( document.fullscreenElement || document.webkitFullscreenElement ) === this._fsEl;
 	}
 	get isLedBars() {
-		return this._isLedDisplay;
+		return this._flg.isLeds;
 	}
 	get isLumiBars() {
-		return this._isLumiBars;
+		return this._flg.isLumi;
 	}
 	get isOctaveBands() {
-		return this._isOctaveBands;
+		return this._flg.isOctaves;
 	}
 	get isOn() {
 		return this._runId !== undefined;
 	}
 	get isOutlineBars() {
-		return this._isOutline;
+		return this._flg.isOutline;
 	}
 	get pixelRatio() {
 		return this._pixelRatio;
 	}
+	get isRoundBars() {
+		return this._flg.isRound;
+	}
 	static get version() {
 		return VERSION;
 	}
@@ -790,19 +816,41 @@ export default class AudioMotionAnalyzer {
 	 * @param {object} options
 	 */
 	registerGradient( name, options ) {
-		if ( typeof name !== 'string' || name.trim().length == 0 )
+		if ( typeof name != 'string' || name.trim().length == 0 )
 			throw new AudioMotionError( ERR_GRADIENT_INVALID_NAME );
 
-		if ( typeof options !== 'object' )
+		if ( typeof options != 'object' )
 			throw new AudioMotionError( ERR_GRADIENT_NOT_AN_OBJECT );
 
-		if ( ! Array.isArray( options.colorStops ) || ! options.colorStops.length )
+		const { colorStops } = options;
+
+		if ( ! Array.isArray( colorStops ) || ! colorStops.length )
 			throw new AudioMotionError( ERR_GRADIENT_MISSING_COLOR );
 
+		const count     = colorStops.length,
+			  isInvalid = val => +val != val || val < 0 || val > 1;
+
+		// normalize all colorStops as objects with `pos`, `color` and `level` properties
+		colorStops.forEach( ( colorStop, index ) => {
+			const pos = index / Math.max( 1, count - 1 );
+			if ( typeof colorStop != 'object' ) // only color string was defined
+				colorStops[ index ] = {	pos, color: colorStop };
+			else if ( isInvalid( colorStop.pos ) )
+				colorStop.pos = pos;
+
+			if ( isInvalid( colorStop.level ) )
+				colorStops[ index ].level = 1 - index / count;
+		});
+
+		// make sure colorStops is in descending `level` order and that the first one has `level == 1`
+		// this is crucial for proper operation of 'bar-level' colorMode!
+		colorStops.sort( ( a, b ) => a.level < b.level ? 1 : a.level > b.level ? -1 : 0 );
+		colorStops[0].level = 1;
+
 		this._gradients[ name ] = {
 			bgColor:    options.bgColor || GRADIENT_DEFAULT_BGCOLOR,
 			dir:        options.dir,
-			colorStops: options.colorStops
+			colorStops: colorStops
 		};
 
 		// if the registered gradient is one of the currently selected gradients, regenerate them
@@ -854,7 +902,7 @@ export default class AudioMotionAnalyzer {
 		}
 
 		this._ledParams = maxLeds > 0 && spaceV > 0 && spaceH >= 0 ? [ maxLeds, spaceV, spaceH ] : undefined;
-		this._calcLeds();
+		this._calcBars();
 	}
 
 	/**
@@ -939,37 +987,7 @@ export default class AudioMotionAnalyzer {
 	}
 
 	/**
-	 * Calculate auxiliary values and flags
-	 */
-	_calcAux() {
-		const canvas   = this.canvas,
-			  isRadial = this._radial,
-			  isDual   = this._chLayout == CHANNEL_VERTICAL && ! isRadial,
-			  centerX  = canvas.width >> 1;
-
-		this._radius         = Math.min( canvas.width, canvas.height ) * ( this._chLayout == CHANNEL_VERTICAL ? .375 : .125 ) | 0;
-		this._barSpacePx     = Math.min( this._barWidth - 1, ( this._barSpace > 0 && this._barSpace < 1 ) ? this._barWidth * this._barSpace : this._barSpace );
-		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._isBandsMode && ! this._isLumiBars && ! this._isLedDisplay;
-		this._maximizeLeds   = this._chLayout != CHANNEL_VERTICAL || this._reflexRatio > 0 && ! this._isLumiBars;
-
-		this._channelHeight  = canvas.height - ( isDual && ! this._isLedDisplay ? .5 : 0 ) >> isDual;
-		this._analyzerHeight = this._channelHeight * ( this._isLumiBars || isRadial ? 1 : 1 - this._reflexRatio ) | 0;
-
-		// channelGap is **0** if isLedDisplay == true (LEDs already have spacing); **1** if canvas height is odd (windowed); **2** if it's even
-		// TODO: improve this, make it configurable?
-		this._channelGap     = isDual ? canvas.height - this._channelHeight * 2 : 0;
-
-		this._analyzerWidth  = canvas.width - centerX * ( this._mirror != 0 );
-		this._initialX       = centerX * ( this._mirror == -1 && ! isRadial );
-	}
-
-	/**
-	 * Calculate the X-coordinate on canvas for each analyzer bar
+	 * Compute all internal data required for the analyzer, based on its current settings
 	 */
 	_calcBars() {
 		const bars = this._bars = []; // initialize object property
@@ -977,9 +995,63 @@ export default class AudioMotionAnalyzer {
 		if ( ! this._ready )
 			return;
 
+		const barSpace    = this._barSpace,
+		 	  canvas      = this.canvas,
+			  centerX     = canvas.width >> 1,
+			  chLayout    = this._chLayout,
+			  isAnsiBands = this._ansiBands,
+			  isRadial    = this._radial,
+			  isDual      = chLayout == CHANNEL_VERTICAL && ! isRadial,
+			  maxFreq     = this._maxFreq,
+			  minFreq     = this._minFreq,
+			  mode        = this._mode,
+
+			  // COMPUTE FLAGS
+
+			  isBands   = mode % 10 != 0,
+			  isOctaves = isBands && this._frequencyScale == SCALE_LOG,
+			  isLeds    = this._showLeds && isBands && ! isRadial,
+			  isLumi    = this._lumiBars && isBands && ! isRadial,
+			  isAlpha   = this._alphaBars && ! isLumi && mode != 10,
+			  isOutline = this._outlineBars && isBands && ! isLumi && ! isLeds,
+			  isRound   = this._roundBars && isBands && ! isLumi && ! isLeds,
+			  noLedGap  = chLayout != CHANNEL_VERTICAL || this._reflexRatio > 0 && ! isLumi,
+
+			  // COMPUTE AUXILIARY VALUES
+
+			  // channelHeight is the total canvas height dedicated to each channel, including the reflex area, if any)
+			  channelHeight  = canvas.height - ( isDual && ! isLeds ? .5 : 0 ) >> isDual,
+			  // analyzerHeight is the effective height used to render the analyzer, excluding the reflex area
+			  analyzerHeight = channelHeight * ( isLumi || isRadial ? 1 : 1 - this._reflexRatio ) | 0,
+
+			  analyzerWidth  = canvas.width - centerX * ( this._mirror != 0 ),
+
+			  // channelGap is **0** if isLedDisplay == true (LEDs already have spacing); **1** if canvas height is odd (windowed); **2** if it's even
+			  // TODO: improve this, make it configurable?
+			  channelGap     = isDual ? canvas.height - channelHeight * 2 : 0,
+
+			  initialX       = centerX * ( this._mirror == -1 && ! isRadial ),
+			  radius         = Math.min( canvas.width, canvas.height ) * ( chLayout == CHANNEL_VERTICAL ? .375 : .125 ) | 0;
+
+		/**
+		 *	CREATE ANALYZER BANDS
+		 *
+		 *	USES:
+		 *		analyzerWidth
+		 *		initialX
+		 *		isBands
+		 *		isOctaves
+		 *
+		 *	GENERATES:
+		 *		bars (populates this._bars)
+		 *		bardWidth
+		 *		scaleMin
+		 *		unitWidth
+		 */
+
 		// helper function
 		// 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] } );
+		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,
@@ -1012,15 +1084,9 @@ export default class AudioMotionAnalyzer {
 			return [ bin, ratio ];
 		}
 
-		const analyzerWidth = this._analyzerWidth,
-			  initialX      = this._initialX,
-			  isAnsiBands   = this._ansiBands,
-			  maxFreq       = this._maxFreq,
-			  minFreq       = this._minFreq;
-
-		let scaleMin, unitWidth;
+		let barWidth, scaleMin, unitWidth;
 
-		if ( this._isOctaveBands ) {
+		if ( isOctaves ) {
 			// 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 );
@@ -1075,9 +1141,9 @@ export default class AudioMotionAnalyzer {
 				currFreq *= bandWidth;
 			} while ( currFreq <= maxFreq );
 
-			this._barWidth = analyzerWidth / bars.length;
+			barWidth = analyzerWidth / bars.length;
 
-			bars.forEach( ( bar, index ) => bar.posX = initialX + index * this._barWidth );
+			bars.forEach( ( bar, index ) => bar.posX = initialX + index * barWidth );
 
 			const firstBar = bars[0],
 				  lastBar  = bars[ bars.length - 1 ];
@@ -1097,7 +1163,7 @@ export default class AudioMotionAnalyzer {
 				[ lastBar.binHi, lastBar.ratioHi ] = calcRatio( maxFreq );
 			}
 		}
-		else if ( this._isBandsMode ) { // a bands mode is selected, but frequency scale is not logarithmic
+		else if ( isBands ) { // 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;
 
@@ -1112,15 +1178,15 @@ export default class AudioMotionAnalyzer {
 				}
 			}
 
-			this._barWidth = analyzerWidth / bands;
+			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 ) {
+			for ( let i = 0, posX = 0; i < bands; i++, posX += barWidth ) {
 				const freqLo = invFreqScaling( scaleMin + posX / unitWidth ),
-					  freq   = invFreqScaling( scaleMin + ( posX + this._barWidth / 2 ) / unitWidth ),
-					  freqHi = invFreqScaling( scaleMin + ( posX + this._barWidth ) / unitWidth ),
+					  freq   = invFreqScaling( scaleMin + ( posX + barWidth / 2 ) / unitWidth ),
+					  freqHi = invFreqScaling( scaleMin + ( posX + barWidth ) / unitWidth ),
 					  [ binLo, ratioLo ] = calcRatio( freqLo ),
 					  [ binHi, ratioHi ] = calcRatio( freqHi );
 
@@ -1129,7 +1195,7 @@ export default class AudioMotionAnalyzer {
 
 		}
 		else {	// Discrete frequencies modes
-			this._barWidth = 1;
+			barWidth = 1;
 
 			scaleMin = this._freqScaling( minFreq );
 			unitWidth = analyzerWidth / ( this._freqScaling( maxFreq ) - scaleMin );
@@ -1157,78 +1223,130 @@ export default class AudioMotionAnalyzer {
 			}
 		}
 
-		// save these for scale generation
-		this._scaleMin = scaleMin;
-		this._unitWidth = unitWidth;
-
-		// update internal variables
-		this._calcAux();
+		/**
+		 *  COMPUTE ATTRIBUTES FOR THE LED BARS
+		 *
+		 *	USES:
+		 *		analyzerHeight
+		 *		barWidth
+		 *		noLedGap
+		 *
+		 *	GENERATES:
+		 * 		spaceH
+		 * 		spaceV
+		 *		this._leds
+		 */
+
+		let spaceH = 0,
+			spaceV = 0;
+
+		if ( isLeds ) {
+			// 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[ mode ];
+
+			let ledCount, maxHeight = analyzerHeight;
+
+			if ( customParams ) {
+				const minHeight = 2 * dPR;
+				let blockHeight;
+				ledCount = maxLeds + 1;
+				do {
+					ledCount--;
+					blockHeight = maxHeight / ledCount / ( 1 + spaceVRatio );
+					spaceV = blockHeight * spaceVRatio;
+				} while ( ( blockHeight < minHeight || spaceV < minHeight ) && ledCount > 1 );
+			}
+			else {
+				// calculate vertical spacing - aim for the reference ratio, but make sure it's at least 2px
+				const refRatio = 540 / spaceVRatio;
+				spaceV = Math.min( spaceVRatio * dPR, Math.max( 2, maxHeight / refRatio + .1 | 0 ) );
+			}
 
-		// generate the X-axis and radial scales
-		this._createScales();
+			// remove the extra spacing below the last line of LEDs
+			if ( noLedGap )
+				maxHeight += spaceV;
 
-		// update LED properties
-		this._calcLeds();
-	}
+			// recalculate the number of leds, considering the effective spaceV
+			if ( ! customParams )
+				ledCount = Math.min( maxLeds, maxHeight / ( spaceV * 2 ) | 0 );
 
-	/**
-	 * Calculate attributes for the vintage LEDs effect, based on visualization mode and canvas resolution
-	 */
-	_calcLeds() {
-		if ( ! this._isBandsMode || ! this._ready )
-			return;
+			spaceH = spaceHRatio >= 1 ? spaceHRatio : barWidth * spaceHRatio;
 
-		// 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 ) {
-			const minHeight = 2 * dPR;
-			let blockHeight;
-			ledCount = maxLeds + 1;
-			do {
-				ledCount--;
-				blockHeight = analyzerHeight / ledCount / ( 1 + spaceVRatio );
-				spaceV = blockHeight * spaceVRatio;
-			} while ( ( blockHeight < minHeight || spaceV < minHeight ) && ledCount > 1 );
+			this._leds = [
+				ledCount,
+				spaceH,
+				spaceV,
+				maxHeight / ledCount - spaceV // ledHeight
+			];
 		}
-		else {
-			// calculate vertical spacing - aim for the reference ratio, but make sure it's at least 2px
-			const refRatio = 540 / spaceVRatio;
-			spaceV = Math.min( spaceVRatio * dPR, Math.max( 2, analyzerHeight / refRatio + .1 | 0 ) );
+
+		// COMPUTE ADDITIONAL BAR POSITIONING, ACCORDING TO THE CURRENT SETTINGS
+		// uses: barSpace, barWidth, spaceH
+
+		const barSpacePx = Math.min( barWidth - 1, barSpace * ( barSpace > 0 && barSpace < 1 ? barWidth : 1 ) );
+
+		if ( isBands )
+			barWidth -= Math.max( isLeds ? spaceH : 0, barSpacePx );
+
+		bars.forEach( ( bar, index ) => {
+			let posX  = bar.posX,
+				width = barWidth;
+
+			// in bands modes we need to update bar.posX to account for bar/led spacing
+
+			if ( isBands ) {
+				if ( barSpace == 0 && ! isLeds ) {
+					// when barSpace == 0 use integer values for perfect gapless positioning
+					posX |= 0;
+					width |= 0;
+					if ( index > 0 && posX > bars[ index - 1 ].posX + bars[ index - 1 ].width ) {
+						posX--;
+						width++;
+					}
+				}
+				else
+					posX += Math.max( ( isLeds ? spaceH : 0 ), barSpacePx ) / 2;
+
+				bar.posX = posX; // update
+			}
+
+			bar.barCenter = posX + ( barWidth == 1 ? 0 : width / 2 );
+			bar.width = width;
+		});
+
+		// COMPUTE CHANNEL COORDINATES (uses spaceV)
+
+		const channelCoords = [];
+		for ( const channel of [0,1] ) {
+			const channelTop     = chLayout == CHANNEL_VERTICAL ? ( channelHeight + channelGap ) * channel : 0,
+				  channelBottom  = channelTop + channelHeight,
+				  analyzerBottom = channelTop + analyzerHeight - ( ! isLeds || noLedGap ? 0 : spaceV );
+
+			channelCoords.push( { channelTop, channelBottom, analyzerBottom } );
 		}
 
-		// remove the extra spacing below the last line of LEDs
-		if ( this._maximizeLeds )
-			analyzerHeight += spaceV;
+		// SAVE INTERNAL PROPERTIES
 
-		// recalculate the number of leds, considering the effective spaceV
-		if ( ! customParams )
-			ledCount = Math.min( maxLeds, analyzerHeight / ( spaceV * 2 ) | 0 );
+		this._aux = { analyzerHeight, analyzerWidth, channelCoords, channelHeight, channelGap, initialX, radius, scaleMin, unitWidth };
+		this._flg = { isAlpha, isBands, isLeds, isLumi, isOctaves, isOutline, isRound, noLedGap };
 
-		this._leds = [
-			ledCount,
-			spaceHRatio >= 1 ? spaceHRatio : this._barWidth * spaceHRatio, // spaceH
-			spaceV,
-			analyzerHeight / ledCount - spaceV // ledHeight
-		];
+		// generate the X-axis and radial scales
+		this._createScales();
 	}
 
 	/**
@@ -1238,7 +1356,7 @@ export default class AudioMotionAnalyzer {
 		if ( ! this._ready )
 			return;
 
-		const analyzerWidth = this._analyzerWidth,
+		const { analyzerWidth, initialX, radius, scaleMin, unitWidth } = this._aux,
 			  canvas        = this._canvasCtx.canvas,
 			  scaleX        = this._scaleX,
 			  scaleR        = this._scaleR,
@@ -1246,20 +1364,22 @@ export default class AudioMotionAnalyzer {
 			  canvasR       = scaleR.canvas,
 			  freqLabels    = [],
 			  frequencyScale= this._frequencyScale,
-			  initialX      = this._initialX,
-			  isDual        = this._chLayout == CHANNEL_VERTICAL,
-			  isMirror      = this._mirror,
 			  isNoteLabels  = this._noteLabels,
+			  isRadial      = this._radial,
+			  isVertical    = this._chLayout == CHANNEL_VERTICAL,
+			  mirror        = this._mirror,
 			  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)
+			  scaleHeight   = Math.min( canvas.width, canvas.height ) / 34 | 0, // circular scale height (radial mode)
   			  fontSizeX     = canvasX.height >> 1,
 			  fontSizeR     = scaleHeight >> 1,
+			  labelWidthX   = fontSizeX * ( isNoteLabels ? .7 : 1.5 ),
+			  labelWidthR   = fontSizeR * ( isNoteLabels ? 1 : 2 ),
 		  	  root12        = 2 ** ( 1 / 12 );
 
 		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 );
+				freqLabels.push( 6e3, 8e3, 10e3, 12e3, 14e3, 16e3, 18e3, 20e3, 22e3 );
 			else
 				freqLabels.push( 8e3, 16e3 );
 		}
@@ -1270,7 +1390,7 @@ export default class AudioMotionAnalyzer {
 					if ( freq >= this._minFreq && freq <= this._maxFreq ) {
 						const pitch = scale[ note ],
 							  isC   = pitch == 'C';
-						if ( ( pitch && isNoteLabels && ! isMirror ) || isC )
+						if ( ( pitch && isNoteLabels && ! mirror ) || isC )
 							freqLabels.push( isNoteLabels ? [ freq, pitch + ( isC ? octave : '' ) ] : freq );
 					}
 					freq *= root12;
@@ -1278,24 +1398,21 @@ export default class AudioMotionAnalyzer {
 			}
 		}
 
-		// in radial stereo mode, the scale is positioned exactly between both channels, by making the canvas a bit larger than the inner diameter
-		canvasR.width = canvasR.height = ( this._radius << 1 ) + ( isDual * scaleHeight );
+		// in radial dual-vertical layout, the scale is positioned exactly between both channels, by making the canvas a bit larger than the inner diameter
+		canvasR.width = canvasR.height = ( radius << 1 ) + ( isVertical * 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
+		const centerR = canvasR.width >> 1,
+			  radialY = centerR - scaleHeight * .7;	// vertical position of text labels in the circular scale
 
 		// helper function
 		const radialLabel = ( x, label ) => {
-			if ( isNoteLabels && ! isDual && ! ['C','E','G'].includes( label[0] ) )
-				return;
-
 			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.translate( centerR + posX, centerR + posY );
 			scaleR.rotate( angle );
 			scaleR.fillText( label, 0, 0 );
 			scaleR.restore();
@@ -1307,7 +1424,7 @@ export default class AudioMotionAnalyzer {
 		scaleX.fillStyle = scaleR.strokeStyle = SCALEX_BACKGROUND_COLOR;
 		scaleX.fillRect( 0, 0, canvasX.width, canvasX.height );
 
-		scaleR.arc( radius, radius, radius - scaleHeight / 2, 0, TAU );
+		scaleR.arc( centerR, centerR, centerR - scaleHeight / 2, 0, TAU );
 		scaleR.lineWidth = scaleHeight;
 		scaleR.stroke();
 
@@ -1316,32 +1433,49 @@ export default class AudioMotionAnalyzer {
 		scaleR.font = `${ fontSizeR }px ${FONT_FAMILY}`;
 		scaleX.textAlign = scaleR.textAlign = 'center';
 
-		let prevX = 0, prevR = 0;
+		let prevX = -labelWidthX / 4,
+			prevR = -labelWidthR;
 
 		for ( const item of freqLabels ) {
 			const [ freq, label ] = Array.isArray( item ) ? item : [ item, item < 1e3 ? item | 0 : `${ ( item / 100 | 0 ) / 10 }k` ],
-				  x    = this._unitWidth * ( this._freqScaling( freq ) - this._scaleMin ),
+				  x    = unitWidth * ( this._freqScaling( freq ) - scaleMin ),
 				  y    = canvasX.height * .75,
 				  isC  = label[0] == 'C',
-	  			  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;
+	  			  maxW = fontSizeX * ( isNoteLabels && ! mirror ? ( isC ? 1.2 : .6 ) : 3 );
+
+	  		// set label color - no highlight when mirror effect is active (only Cs displayed)
+			scaleX.fillStyle = scaleR.fillStyle = isC && ! mirror ? SCALEX_HIGHLIGHT_COLOR : SCALEX_LABEL_COLOR;
+
+			// prioritizes which note labels are displayed, due to the restricted space on some ranges/scales
+			if ( isNoteLabels ) {
+				let allowedLabels = ['C'];
+				if ( frequencyScale == SCALE_LOG || freq > 2e3 || ( frequencyScale != SCALE_LINEAR && freq > 250 ) ||
+					 ( ( ! isRadial || isVertical ) && ( frequencyScale != SCALE_LINEAR && freq > 125 || freq > 1e3 ) ) )
+					allowedLabels.push('G');
+				if ( frequencyScale == SCALE_LOG || freq > 4e3 || ( frequencyScale != SCALE_LINEAR && freq > 500 ) ||
+					 ( ( ! isRadial || isVertical ) && ( frequencyScale != SCALE_LINEAR && freq > 250 || freq > 2e3 ) ) )
+					allowedLabels.push('E');
+				if ( frequencyScale == SCALE_LINEAR && freq > 4e3 ||
+					 ( ( ! isRadial || isVertical ) && ( frequencyScale == SCALE_LOG || freq > 2e3 || ( frequencyScale != SCALE_LINEAR && freq > 500 ) ) ) )
+					allowedLabels.push('D','F','A','B');
+				if ( ! allowedLabels.includes( label[0] ) )
+					continue; // skip this 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;
-				}
+			// linear scale
+			if ( x >= prevX + labelWidthX / 2 && x <= analyzerWidth ) {
+				scaleX.fillText( label, initialX + x, y, maxW );
+				if ( mirror && ( x > labelWidthX || mirror == 1 ) )
+					scaleX.fillText( label, ( initialX || canvas.width ) - x, y, maxW );
+				prevX = x + Math.min( maxW, scaleX.measureText( label ).width ) / 2;
+			}
 
-				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;
-				}
+			// radial scale
+			if ( x >= prevR + labelWidthR && x < analyzerWidth - labelWidthR ) { // avoid overlapping the last label over the first one
+				radialLabel( x, label );
+				if ( mirror && ( x > labelWidthR || mirror == 1 ) ) // avoid overlapping of first labels on mirror mode
+					radialLabel( -x, label );
+				prevR = x;
 			}
 		}
 	}
@@ -1351,48 +1485,132 @@ export default class AudioMotionAnalyzer {
 	 * this is called 60 times per second by requestAnimationFrame()
 	 */
 	_draw( timestamp ) {
-		const barSpace       = this._barSpace,
-			  barSpacePx     = this._barSpacePx,
+		const { isAlpha, isBands, isLeds, isLumi,
+			    isOctaves, isOutline, isRound, noLedGap } = this._flg,
 			  ctx            = this._canvasCtx,
 			  canvas         = ctx.canvas,
 			  canvasX        = this._scaleX.canvas,
 			  canvasR        = this._scaleR.canvas,
 			  canvasGradients= this._canvasGradients,
+			  centerX        = canvas.width >> 1,
+			  centerY        = canvas.height >> 1,
+			  colorMode      = this._colorMode,
 			  energy         = this._energy,
 			  fillAlpha      = this.fillAlpha,
 			  mode           = this._mode,
-			  isAlphaBars    = this._isAlphaBars,
-			  isLedDisplay   = this._isLedDisplay,
 			  isLinear       = this._linearAmplitude,
-			  isLumiBars     = this._isLumiBars,
-			  isBandsMode    = this._isBandsMode,
-			  isOutline      = this._isOutline,
 			  isOverlay      = this.overlay,
 			  isRadial       = this._radial,
+			  isTrueLeds     = isLeds && this._trueLeds && colorMode == COLOR_GRADIENT,
 			  channelLayout  = this._chLayout,
-			  lineWidth      = +this.lineWidth, // make sure the damn thing is a number!
+			  lineWidth      = this._lineWidth,
 			  mirrorMode     = this._mirror,
-			  channelHeight  = this._channelHeight,
-			  channelGap     = this._channelGap,
-			  analyzerHeight = this._analyzerHeight,
-			  analyzerWidth  = isRadial ? canvas.width : this._analyzerWidth,
-			  initialX       = this._initialX,
+			  { analyzerHeight, channelCoords,
+			    channelHeight, channelGap, initialX, radius } = this._aux,
+			  analyzerWidth  = isRadial ? canvas.width : this._aux.analyzerWidth,
 			  finalX         = initialX + analyzerWidth,
-			  centerX        = canvas.width >> 1,
-			  centerY        = canvas.height >> 1,
-			  radius         = this._radius,
 			  showBgColor    = this.showBgColor,
 			  maxBarHeight   = isRadial ? Math.min( centerX, centerY ) - radius : analyzerHeight,
 			  maxdB			 = this.maxDecibels,
 			  mindB			 = this.minDecibels,
 			  dbRange 		 = maxdB - mindB,
 			  useCanvas      = this.useCanvas,
-			  weightingFilter= this._weightingFilter;
+			  weightingFilter= this._weightingFilter,
+			  [ ledCount, ledSpaceH, ledSpaceV, ledHeight ] = this._leds || [];
 
 		if ( energy.val > 0 )
 			this._spinAngle += this._spinSpeed * RPM;
 
-		// helper function - apply the selected weighting filter and return dB gain for a given frequency
+		/* HELPER FUNCTIONS */
+
+		// create Reflex effect
+		const doReflex = channel => {
+			if ( this._reflexRatio > 0 && ! isLumi ) {
+				let posY, height;
+				if ( this.reflexFit || channelLayout == CHANNEL_VERTICAL ) { // always fit reflex in vertical stereo mode
+					posY   = channelLayout == CHANNEL_VERTICAL && channel == 0 ? channelHeight + channelGap : 0;
+					height = channelHeight - analyzerHeight;
+				}
+				else {
+					posY   = canvas.height - analyzerHeight * 2;
+					height = analyzerHeight;
+				}
+
+				ctx.save();
+
+				// set alpha and brightness for the reflection
+				ctx.globalAlpha = this.reflexAlpha;
+				if ( this.reflexBright != 1 )
+					ctx.filter = `brightness(${this.reflexBright})`;
+
+				// create the reflection
+				ctx.setTransform( 1, 0, 0, -1, 0, canvas.height );
+				ctx.drawImage( canvas, 0, channelCoords[ channel ].channelTop, canvas.width, analyzerHeight, 0, posY, canvas.width, height );
+
+				ctx.restore();
+			}
+		}
+
+		// draw scale on X-axis
+		const drawScaleX = () => {
+			if ( this.showScaleX ) {
+				if ( isRadial ) {
+					ctx.save();
+					ctx.translate( centerX, centerY );
+					if ( this._spinSpeed )
+						ctx.rotate( this._spinAngle + HALF_PI );
+					ctx.drawImage( canvasR, -canvasR.width >> 1, -canvasR.width >> 1 );
+					ctx.restore();
+				}
+				else
+					ctx.drawImage( canvasX, 0, canvas.height - canvasX.height );
+			}
+		}
+
+		// draw scale on Y-axis
+		const drawScaleY = channelTop => {
+			const scaleWidth = canvasX.height,
+				  fontSize   = scaleWidth >> 1,
+				  max        = isLinear ? 100 : maxdB,
+				  min        = isLinear ? 0 : mindB,
+				  incr       = isLinear ? 20 : 5,
+				  interval   = analyzerHeight / ( max - min );
+
+			ctx.save();
+			ctx.fillStyle = SCALEY_LABEL_COLOR;
+			ctx.font = `${fontSize}px ${FONT_FAMILY}`;
+			ctx.textAlign = 'right';
+			ctx.lineWidth = 1;
+
+			for ( let val = max; val > min; val -= incr ) {
+				const posY = channelTop + ( max - val ) * interval,
+					  even = ( val % 2 == 0 ) | 0;
+
+				if ( even ) {
+					const labelY = posY + fontSize * ( posY == channelTop ? .8 : .35 );
+					if ( mirrorMode != -1 )
+						ctx.fillText( val, scaleWidth * .85, labelY );
+					if ( mirrorMode != 1 )
+						ctx.fillText( val, canvas.width - scaleWidth * .1, labelY );
+					ctx.strokeStyle = SCALEY_LABEL_COLOR;
+					ctx.setLineDash([2,4]);
+					ctx.lineDashOffset = 0;
+				}
+				else {
+					ctx.strokeStyle = SCALEY_MIDLINE_COLOR;
+					ctx.setLineDash([2,8]);
+					ctx.lineDashOffset = 1;
+				}
+
+				ctx.beginPath();
+				ctx.moveTo( initialX + scaleWidth * even * ( mirrorMode != -1 ), ~~posY + .5 ); // for sharp 1px line (https://stackoverflow.com/a/13879402/2370385)
+				ctx.lineTo( finalX - scaleWidth * even * ( mirrorMode != 1 ), ~~posY + .5 );
+				ctx.stroke();
+			}
+			ctx.restore();
+		}
+
+		// returns the gain (in dB) for a given frequency, considering the currently selected weighting filter
 		const weightingdB = freq => {
 			const f2 = freq ** 2,
 				  SQ20_6  = 424.36,
@@ -1430,6 +1648,15 @@ export default class AudioMotionAnalyzer {
 			return 0; // unknown filter
 		}
 
+		// draws (stroke) a bar from x,y1 to x,y2
+		const strokeBar = ( x, y1, y2 ) => {
+			ctx.beginPath();
+			ctx.moveTo( x, y1 );
+			ctx.lineTo( x, y2 );
+			ctx.stroke();
+		}
+
+		// conditionally strokes current path on canvas
 		const strokeIf = flag => {
 			if ( flag && lineWidth ) {
 				const alpha = ctx.globalAlpha;
@@ -1439,52 +1666,107 @@ export default class AudioMotionAnalyzer {
 			}
 		}
 
-		// helper function - convert planar X,Y coordinates to radial coordinates
+		// converts a given X-coordinate to its corresponding angle in radial mode
+		const getAngle = ( x, dir ) => dir * TAU * ( x / canvas.width ) + this._spinAngle;
+
+		// converts planar X,Y coordinates to radial coordinates
 		const radialXY = ( x, y, dir ) => {
 			const height = radius + y,
-				  angle  = dir * TAU * ( x / canvas.width ) + this._spinAngle;
-
+				  angle  = getAngle( x, dir );
 			return [ centerX + height * Math.cos( angle ), centerY + height * Math.sin( angle ) ];
 		}
 
-		// helper function - draw a polygon of width `w` and height `h` at (x,y) in radial mode
+		// draws a polygon of width `w` and height `h` at (x,y) in radial mode
 		const radialPoly = ( x, y, w, h, stroke ) => {
 			ctx.beginPath();
 			for ( const dir of ( mirrorMode ? [1,-1] : [1] ) ) {
+				const [ startAngle, endAngle ] = isRound ? [ getAngle( x, dir ), getAngle( x + w, dir ) ] : [];
 				ctx.moveTo( ...radialXY( x, y, dir ) );
 				ctx.lineTo( ...radialXY( x, y + h, dir ) );
-				ctx.lineTo( ...radialXY( x + w, y + h, dir ) );
+				if ( isRound )
+					ctx.arc( centerX, centerY, radius + y + h, startAngle, endAngle );
+				else
+					ctx.lineTo( ...radialXY( x + w, y + h, dir ) );
 				ctx.lineTo( ...radialXY( x + w, y, dir ) );
+				if ( isRound && ! stroke ) // close the bottom line only when not in outline mode
+					ctx.arc( centerX, centerY, radius + y, endAngle, startAngle, true );
 			}
-
 			strokeIf( stroke );
 			ctx.fill();
 		}
 
-		// LED attributes and helper function for bar height calculation
-		const [ ledCount, ledSpaceH, ledSpaceV, ledHeight ] = this._leds || [];
-		const ledPosY = height => Math.max( 0, ( height * ledCount | 0 ) * ( ledHeight + ledSpaceV ) - ledSpaceV );
+		// converts a value in [0;1] range to a height in pixels that fits into the current LED elements
+		const ledPosY = value => Math.max( 0, ( value * ledCount | 0 ) * ( ledHeight + ledSpaceV ) - ledSpaceV );
 
-		// 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 - ( ! isBandsMode ? 0 : Math.max( isLedDisplay ? ledSpaceH : 0, barSpacePx ) );
+		// update energy information
+		const updateEnergy = newVal => {
+			energy.val = newVal;
+			if ( newVal >= energy.peak ) {
+				energy.peak = newVal;
+				energy.hold = 30;
+			}
+			else {
+				if ( energy.hold > 0 )
+					energy.hold--;
+				else if ( energy.peak > 0 )
+					energy.peak *= ( 30 + energy.hold-- ) / 30; // decay (drops to zero in 30 frames)
+			}
+		}
 
-		// make sure width is integer for pixel accurate calculation, when no bar spacing is required
-		if ( barSpace == 0 && ! isLedDisplay )
-			width |= 0;
+		// calculate and display (if enabled) the current frame rate
+		const updateFPS = () => {
+			this._frame++;
+			const elapsed = timestamp - this._time;
+
+			if ( elapsed >= 1000 ) {
+				this._fps = this._frame / ( elapsed / 1000 );
+				this._frame = 0;
+				this._time = timestamp;
+			}
+			if ( this.showFPS ) {
+				const size = canvasX.height;
+				ctx.font = `bold ${size}px ${FONT_FAMILY}`;
+				ctx.fillStyle = FPS_COLOR;
+				ctx.textAlign = 'right';
+				ctx.fillText( Math.round( this._fps ), canvas.width - size, size * 2 );
+			}
+		}
+
+		/* MAIN FUNCTION */
 
 		let currentEnergy = 0;
 
-		const nBars     = this._bars.length,
+		const bars      = this._bars,
+			  nBars     = bars.length,
 			  nChannels = channelLayout == CHANNEL_SINGLE ? 1 : 2;
 
 		for ( let channel = 0; channel < nChannels; channel++ ) {
 
-			const channelTop     = channelLayout == CHANNEL_VERTICAL ? channelHeight * channel + channelGap * channel : 0,
-				  channelBottom  = channelTop + channelHeight,
-				  analyzerBottom = channelTop + analyzerHeight - ( isLedDisplay && ! this._maximizeLeds ? ledSpaceV : 0 ),
-				  bgColor        = ( ! showBgColor || isLedDisplay && ! isOverlay ) ? '#000' : this._gradients[ this._selectedGrads[ channel ] ].bgColor,
-				  mustClear      = channel == 0 || ! isRadial && channelLayout != CHANNEL_COMBINED;
+			const { channelTop, channelBottom, analyzerBottom } = channelCoords[ channel ],
+				  channelGradient = this._gradients[ this._selectedGrads[ channel ] ],
+				  colorStops      = channelGradient.colorStops,
+				  colorCount      = colorStops.length,
+				  bgColor         = ( ! showBgColor || isLeds && ! isOverlay ) ? '#000' : channelGradient.bgColor,
+				  mustClear       = channel == 0 || ! isRadial && channelLayout != CHANNEL_COMBINED;
+
+			// helper function for FFT data interpolation (uses fftData)
+			const interpolate = ( bin, ratio ) => {
+				const value = fftData[ bin ] + ( bin < fftData.length - 1 ? ( fftData[ bin + 1 ] - fftData[ bin ] ) * ratio : 0 );
+				return isNaN( value ) ? -Infinity : value;
+			}
+
+			// set fillStyle and strokeStyle according to current colorMode (uses: channel, colorStops, colorCount)
+			const setBarColor = ( value = 0, barIndex = 0 ) => {
+				let color;
+				// for mode 10, always use the channel gradient (ignore colorMode)
+				if ( ( colorMode == COLOR_GRADIENT && ! isTrueLeds ) || mode == 10 )
+					color = canvasGradients[ channel ];
+				else {
+					const selectedIndex = colorMode == COLOR_BAR_INDEX ? barIndex % colorCount : colorStops.findLastIndex( item => isLeds ? ledPosY( value ) <= ledPosY( item.level ) : value <= item.level );
+					color = colorStops[ selectedIndex ].color;
+				}
+				ctx.fillStyle = ctx.strokeStyle = color;
+			}
 
 			if ( useCanvas ) {
 				// clear the channel area, if in overlay mode
@@ -1506,60 +1788,25 @@ export default class AudioMotionAnalyzer {
 					ctx.globalAlpha = 1;
 				}
 
-				// draw dB scale (Y-axis)
-				if ( this.showScaleY && ! isLumiBars && ! isRadial ) {
-					const scaleWidth = canvasX.height,
-						  fontSize   = scaleWidth >> 1,
-						  max        = isLinear ? 100 : maxdB,
-						  min        = isLinear ? 0 : mindB,
-						  incr       = isLinear ? 20 : 5,
-						  interval   = analyzerHeight / ( max - min );
-
-					ctx.fillStyle = SCALEY_LABEL_COLOR;
-					ctx.font = `${fontSize}px ${FONT_FAMILY}`;
-					ctx.textAlign = 'right';
-					ctx.lineWidth = 1;
-
-					for ( let val = max; val > min; val -= incr ) {
-						const posY = channelTop + ( max - val ) * interval,
-							  even = ( val % 2 == 0 ) | 0;
-
-						if ( even ) {
-							const labelY = posY + fontSize * ( posY == channelTop ? .8 : .35 );
-							if ( mirrorMode != -1 )
-								ctx.fillText( val, scaleWidth * .85, labelY );
-							if ( mirrorMode != 1 )
-								ctx.fillText( val, canvas.width - scaleWidth * .1, labelY );
-							ctx.strokeStyle = SCALEY_LABEL_COLOR;
-							ctx.setLineDash([2,4]);
-							ctx.lineDashOffset = 0;
-						}
-						else {
-							ctx.strokeStyle = SCALEY_MIDLINE_COLOR;
-							ctx.setLineDash([2,8]);
-							ctx.lineDashOffset = 1;
-						}
-
-						ctx.beginPath();
-						ctx.moveTo( initialX + scaleWidth * even * ( mirrorMode != -1 ), ~~posY + .5 ); // for sharp 1px line (https://stackoverflow.com/a/13879402/2370385)
-						ctx.lineTo( finalX - scaleWidth * even * ( mirrorMode != 1 ), ~~posY + .5 );
-						ctx.stroke();
-					}
-					// restore line properties
-					ctx.setLineDash([]);
-					ctx.lineDashOffset = 0;
-				}
+				// draw dB scale (Y-axis) - avoid drawing it twice on 'dual-combined' channel layout
+				if ( this.showScaleY && ! isLumi && ! isRadial && ( channel == 0 || channelLayout != CHANNEL_COMBINED ) )
+					drawScaleY( channelTop );
 
 				// set line width and dash for LEDs effect
-				if ( isLedDisplay ) {
+				if ( isLeds ) {
 					ctx.setLineDash( [ ledHeight, ledSpaceV ] );
-					ctx.lineWidth = width;
+					ctx.lineWidth = bars[0].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 = canvasGradients[ channel ];
+					ctx.lineWidth = isOutline ? Math.min( lineWidth, bars[0].width / 2 ) : lineWidth;
+
+				// set clip region
+				ctx.save();
+				if ( ! isRadial ) {
+					const channelRegion = new Path2D();
+					channelRegion.rect( 0, channelTop, canvas.width, analyzerHeight );
+					ctx.clip( channelRegion );
+				}
 			} // if ( useCanvas )
 
 			// get a new array of data from the FFT
@@ -1570,12 +1817,6 @@ export default class AudioMotionAnalyzer {
 			if ( weightingFilter )
 				fftData = fftData.map( ( val, idx ) => val + weightingdB( this._binToFreq( idx ) ) );
 
-			// helper function for FFT data interpolation
-			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();
 
@@ -1584,24 +1825,24 @@ export default class AudioMotionAnalyzer {
 
 			// draw bars / lines
 
-			for ( let i = 0; i < nBars; i++ ) {
+			for ( let barIndex = 0; barIndex < nBars; barIndex++ ) {
 
-				const bar = this._bars[ i ],
-					  { freq, binLo, binHi, ratioLo, ratioHi } = bar;
+				const bar = bars[ barIndex ],
+					  { posX, barCenter, width, freq, binLo, binHi, ratioLo, ratioHi } = bar;
 
-				let barHeight = Math.max( interpolate( binLo, ratioLo ), interpolate( binHi, ratioHi ) );
+				let barValue = Math.max( interpolate( binLo, ratioLo ), interpolate( binHi, ratioHi ) );
 
 				// check additional bins (if any) for this bar and keep the highest value
 				for ( let j = binLo + 1; j < binHi; j++ ) {
-					if ( fftData[ j ] > barHeight )
-						barHeight = fftData[ j ];
+					if ( fftData[ j ] > barValue )
+						barValue = fftData[ j ];
 				}
 
 				// normalize bar amplitude in [0;1] range
-				barHeight = this._normalizedB( barHeight );
+				barValue = this._normalizedB( barValue );
 
-				bar.value[ channel ] = barHeight;
-				currentEnergy += barHeight;
+				bar.value[ channel ] = barValue;
+				currentEnergy += barValue;
 
 				// update bar peak
 				if ( bar.peak[ channel ] > 0 ) {
@@ -1612,8 +1853,8 @@ export default class AudioMotionAnalyzer {
 				}
 
 				// check if it's a new peak for this bar
-				if ( barHeight >= bar.peak[ channel ] ) {
-					bar.peak[ channel ] = barHeight;
+				if ( barValue >= bar.peak[ channel ] ) {
+					bar.peak[ channel ] = barValue;
 					bar.hold[ channel ] = 30; // set peak hold time to 30 frames (0.5s)
 				}
 
@@ -1622,31 +1863,30 @@ export default class AudioMotionAnalyzer {
 					continue;
 
 				// set opacity for bar effects
-				if ( isLumiBars || isAlphaBars )
-					ctx.globalAlpha = barHeight;
+				if ( isLumi || isAlpha )
+					ctx.globalAlpha = barValue;
 				else if ( isOutline )
 					ctx.globalAlpha = fillAlpha;
 
+				// set fillStyle and strokeStyle for the current bar
+				setBarColor( barValue, barIndex );
+
 				// compute actual bar height on screen
-				barHeight = isLedDisplay ? ledPosY( barHeight ) : barHeight * maxBarHeight | 0;
+				let barHeight = isLumi ? maxBarHeight : isLeds ? ledPosY( barValue ) : barValue * maxBarHeight | 0;
 
 				// invert bar for radial channel 1
 				if ( isRadial && channel == 1 && channelLayout == CHANNEL_VERTICAL )
 					barHeight *= -1;
 
-				// bar width may need small adjustments for some bars, when barSpace == 0
-				let adjWidth = width,
-					posX     = bar.posX;
-
 				// Draw current bar or line segment
 
 				if ( mode == 10 ) {
-					// compute the average between the initial bar (i==0) and the next one
+					// compute the average between the initial bar (barIndex==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 : ( this._normalizedB( fftData[ this._bars[1].binLo ] ) * maxBarHeight * ( channel && isRadial && channelLayout == CHANNEL_VERTICAL ? -1 : 1 ) + barHeight ) / 2;
+					const nextBarAvg = barIndex ? 0 : ( this._normalizedB( fftData[ bars[1].binLo ] ) * maxBarHeight * ( channel && isRadial && channelLayout == CHANNEL_VERTICAL ? -1 : 1 ) + barHeight ) / 2;
 
 					if ( isRadial ) {
-						if ( i == 0 )
+						if ( barIndex == 0 )
 							ctx.lineTo( ...radialXY( 0, ( posX < 0 ? nextBarAvg : barHeight ), 1 ) );
 						// draw line to the current point, avoiding overlapping wrap-around frequencies
 						if ( posX >= 0 ) {
@@ -1656,7 +1896,7 @@ export default class AudioMotionAnalyzer {
 						}
 					}
 					else { // Linear
-						if ( i == 0 ) {
+						if ( barIndex == 0 ) {
 							// start the line off-screen using the previous FFT bin value as the initial amplitude
 							if ( mirrorMode != -1 ) {
 								const prevFFTData = binLo ? this._normalizedB( fftData[ binLo - 1 ] ) * maxBarHeight : barHeight; // use previous FFT bin value, when available
@@ -1672,57 +1912,50 @@ export default class AudioMotionAnalyzer {
 					}
 				}
 				else {
-					if ( mode > 0 ) {
-						if ( isLedDisplay )
-							posX += Math.max( ledSpaceH / 2, barSpacePx / 2 );
-						else {
-							if ( barSpace == 0 ) {
-								posX |= 0;
-								if ( i > 0 && posX > this._bars[ i - 1 ].posX + width ) {
-									posX--;
-									adjWidth++;
-								}
-							}
-							else
-								posX += barSpacePx / 2;
-						}
-					}
-
-					if ( isLedDisplay ) {
-						const x = posX + width / 2;
-						// draw "unlit" leds
-						if ( showBgColor && ! isOverlay ) {
+					if ( isLeds ) {
+						// draw "unlit" leds - avoid drawing it twice on 'dual-combined' channel layout
+						if ( showBgColor && ! isOverlay && ( channel == 0 || channelLayout != CHANNEL_COMBINED ) ) {
 							const alpha = ctx.globalAlpha;
-							ctx.beginPath();
-							ctx.moveTo( x, channelTop );
-							ctx.lineTo( x, analyzerBottom );
 							ctx.strokeStyle = LEDS_UNLIT_COLOR;
 							ctx.globalAlpha = 1;
-							ctx.stroke();
+							strokeBar( barCenter, channelTop, analyzerBottom );
 							// restore properties
 							ctx.strokeStyle = ctx.fillStyle;
 							ctx.globalAlpha = alpha;
 						}
-						ctx.beginPath();
-						ctx.moveTo( x, isLumiBars ? channelTop : analyzerBottom );
-						ctx.lineTo( x, isLumiBars ? channelBottom : analyzerBottom - barHeight );
-						ctx.stroke();
+						if ( isTrueLeds ) {
+							// ledPosY() is used below to fit one entire led height into the selected range
+							const colorIndex = isLumi ? 0 : colorStops.findLastIndex( item => ledPosY( barValue ) <= ledPosY( item.level ) );
+							let last = analyzerBottom;
+							for ( let i = colorCount - 1; i >= colorIndex; i-- ) {
+								ctx.strokeStyle = colorStops[ i ].color;
+								let y = analyzerBottom - ( i == colorIndex ? barHeight : ledPosY( colorStops[ i ].level ) );
+								strokeBar( barCenter, last, y );
+								last = y - ledSpaceV;
+							}
+						}
+						else
+							strokeBar( barCenter, analyzerBottom, analyzerBottom - barHeight );
 					}
 					else if ( posX >= initialX ) {
 						if ( isRadial )
-							radialPoly( posX, 0, adjWidth, barHeight, isOutline );
-						else {
-							const x = posX,
-								  y = isLumiBars ? channelTop : analyzerBottom,
-								  w = adjWidth,
-								  h = isLumiBars ? channelBottom : -barHeight;
+							radialPoly( posX, 0, width, barHeight, isOutline );
+						else if ( isRound ) {
+							const halfWidth = width / 2,
+								  y = analyzerBottom + halfWidth; // round caps have an additional height of half bar width
 
 							ctx.beginPath();
-							ctx.moveTo( x, y );
-							ctx.lineTo( x, y + h );
-							ctx.lineTo( x + w, y + h );
-							ctx.lineTo( x + w, y );
-
+							ctx.moveTo( posX, y );
+							ctx.lineTo( posX, y - barHeight );
+							ctx.arc( barCenter, y - barHeight, halfWidth, Math.PI, TAU );
+							ctx.lineTo( posX + width, y );
+							strokeIf( isOutline );
+							ctx.fill();
+						}
+						else {
+							const offset = isOutline ? ctx.lineWidth : 0;
+							ctx.beginPath();
+							ctx.rect( posX, analyzerBottom + offset, width, -barHeight - offset );
 							strokeIf( isOutline );
 							ctx.fill();
 						}
@@ -1731,36 +1964,44 @@ export default class AudioMotionAnalyzer {
 
 				// Draw peak
 				const peak = bar.peak[ channel ];
-				if ( peak > 0 && this.showPeaks && ! isLumiBars && posX >= initialX && posX < finalX ) {
-					// choose the best opacity for the peaks
+				if ( peak > 0 && this.showPeaks && ! isLumi && posX >= initialX && posX < finalX ) {
+					// set opacity
 					if ( isOutline && lineWidth > 0 )
 						ctx.globalAlpha = 1;
-					else if ( isAlphaBars )
+					else if ( isAlpha )
 						ctx.globalAlpha = peak;
 
+					// select the peak color for 'bar-level' colorMode or 'trueLeds'
+					if ( colorMode == COLOR_BAR_LEVEL || isTrueLeds )
+						setBarColor( peak );
+
 					// render peak according to current mode / effect
-					if ( isLedDisplay ) {
+					if ( isLeds ) {
 						const ledPeak = ledPosY( peak );
-						if ( ledPeak >= ledHeight ) // avoid peak below zero level
+						if ( ledPeak >= ledSpaceV ) // avoid peak below first led
 							ctx.fillRect( posX,	analyzerBottom - ledPeak, width, ledHeight );
 					}
 					else if ( ! isRadial )
-						ctx.fillRect( posX, analyzerBottom - peak * maxBarHeight, adjWidth, 2 );
+						ctx.fillRect( posX, analyzerBottom - peak * maxBarHeight, width, 2 );
 					else if ( mode != 10 ) // radial - no peaks for mode 10
-						radialPoly( posX, peak * maxBarHeight * ( channel && channelLayout == CHANNEL_VERTICAL ? -1 : 1 ), adjWidth, -2 );
+						radialPoly( posX, peak * maxBarHeight * ( channel && channelLayout == CHANNEL_VERTICAL ? -1 : 1 ), width, -2 );
 				}
 
-			} // for ( let i = 0; i < nBars; i++ )
+			} // for ( let barIndex = 0; barIndex < nBars; barIndex++ )
 
 			// if not using the canvas, move earlier to the next channel
 			if ( ! useCanvas )
 				continue;
 
+			ctx.restore(); // restore clip region
+
 			// restore global alpha
 			ctx.globalAlpha = 1;
 
 			// Fill/stroke drawing path for mode 10
 			if ( mode == 10 ) {
+				setBarColor(); // select channel gradient
+
 				if ( isRadial ) {
 					if ( mirrorMode ) {
 						let p;
@@ -1790,47 +2031,12 @@ export default class AudioMotionAnalyzer {
 				}
 			}
 
-			// Reflex effect
-			if ( this._reflexRatio > 0 && ! isLumiBars ) {
-				let posY, height;
-				if ( this.reflexFit || channelLayout == CHANNEL_VERTICAL ) { // always fit reflex in vertical stereo mode
-					posY   = channelLayout == CHANNEL_VERTICAL && channel == 0 ? channelHeight + channelGap : 0;
-					height = channelHeight - analyzerHeight;
-				}
-				else {
-					posY   = canvas.height - analyzerHeight * 2;
-					height = analyzerHeight;
-				}
-
-				// set alpha and brightness for the reflection
-				ctx.globalAlpha = this.reflexAlpha;
-				if ( this.reflexBright != 1 )
-					ctx.filter = `brightness(${this.reflexBright})`;
-
-				// create the reflection
-				ctx.setTransform( 1, 0, 0, -1, 0, canvas.height );
-				ctx.drawImage( canvas, 0, channelTop, canvas.width, analyzerHeight, 0, posY, canvas.width, height );
-
-				// reset changed properties
-				ctx.setTransform( 1, 0, 0, 1, 0, 0 );
-				ctx.filter = 'none';
-				ctx.globalAlpha = 1;
-			}
+			// create Reflex effect
+			doReflex( channel );
 
 		} // for ( let channel = 0; channel < nChannels; channel++ ) {
 
-		// Update energy
-		energy.val = currentEnergy / ( nBars << ( nChannels - 1 ) );
-		if ( energy.val >= energy.peak ) {
-			energy.peak = energy.val;
-			energy.hold = 30;
-		}
-		else {
-			if ( energy.hold > 0 )
-				energy.hold--;
-			else if ( energy.peak > 0 )
-				energy.peak *= ( 30 + energy.hold-- ) / 30; // decay (drops to zero in 30 frames)
-		}
+		updateEnergy( currentEnergy / ( nBars << ( nChannels - 1 ) ) );
 
 		if ( useCanvas ) {
 			// Mirror effect
@@ -1844,37 +2050,11 @@ export default class AudioMotionAnalyzer {
 			ctx.setLineDash([]);
 
 			// draw frequency scale (X-axis)
-			if ( this.showScaleX ) {
-				if ( isRadial ) {
-					ctx.save();
-					ctx.translate( centerX, centerY );
-					if ( this._spinSpeed )
-						ctx.rotate( this._spinAngle + HALF_PI );
-					ctx.drawImage( canvasR, -canvasR.width >> 1, -canvasR.width >> 1 );
-					ctx.restore();
-				}
-				else
-					ctx.drawImage( canvasX, 0, canvas.height - canvasX.height );
-			}
+			drawScaleX();
 		}
 
-		// calculate and update current frame rate
-
-		this._frame++;
-		const elapsed = timestamp - this._time;
-
-		if ( elapsed >= 1000 ) {
-			this._fps = this._frame / ( elapsed / 1000 );
-			this._frame = 0;
-			this._time = timestamp;
-		}
-		if ( this.showFPS ) {
-			const size = canvasX.height;
-			ctx.font = `bold ${size}px ${FONT_FAMILY}`;
-			ctx.fillStyle = FPS_COLOR;
-			ctx.textAlign = 'right';
-			ctx.fillText( Math.round( this._fps ), canvas.width - size, size * 2 );
-		}
+		// calculate and display (if enabled) the current frame rate
+		updateFPS();
 
 		// call callback function, if defined
 		if ( this.onCanvasDraw ) {
@@ -1925,18 +2105,17 @@ export default class AudioMotionAnalyzer {
 		const ctx            = this._canvasCtx,
 			  canvas         = ctx.canvas,
 			  channelLayout  = this._chLayout,
-			  isLumiBars     = this._isLumiBars,
+			  { isLumi }     = this._flg,
 			  isRadial       = this._radial,
-			  gradientHeight = isLumiBars ? canvas.height : canvas.height * ( 1 - this._reflexRatio * ( channelLayout != CHANNEL_VERTICAL ) ) | 0,
+			  gradientHeight = isLumi ? canvas.height : canvas.height * ( 1 - this._reflexRatio * ( channelLayout != CHANNEL_VERTICAL ) ) | 0,
 			  				   // for vertical stereo we keep the full canvas height and handle the reflex areas while generating the color stops
 			  analyzerRatio  = 1 - this._reflexRatio,
-			  initialX       = this._initialX;
+			  { analyzerWidth, initialX, radius } = this._aux;
 
 		// for radial mode
 		const centerX   = canvas.width >> 1,
 			  centerY   = canvas.height >> 1,
-			  maxRadius = Math.min( centerX, centerY ),
-			  radius    = this._radius;
+			  maxRadius = Math.min( centerX, centerY );
 
 		for ( const channel of [0,1] ) {
 			const currGradient = this._gradients[ this._selectedGrads[ channel ] ],
@@ -1948,26 +2127,23 @@ export default class AudioMotionAnalyzer {
 			if ( isRadial )
 				grad = ctx.createRadialGradient( centerX, centerY, maxRadius, centerX, centerY, radius - ( maxRadius - radius ) * ( channelLayout == CHANNEL_VERTICAL ) );
 			else
-				grad = ctx.createLinearGradient( ...( isHorizontal ? [ initialX, 0, initialX + this._analyzerWidth, 0 ] : [ 0, 0, 0, gradientHeight ] ) );
+				grad = ctx.createLinearGradient( ...( isHorizontal ? [ initialX, 0, initialX + analyzerWidth, 0 ] : [ 0, 0, 0, gradientHeight ] ) );
 
 			if ( colorStops ) {
 				const dual = channelLayout == CHANNEL_VERTICAL && ! this._splitGradient && ( ! isHorizontal || isRadial );
 
-				// helper function
-				const addColorStop = ( offset, colorInfo ) => grad.addColorStop( offset, colorInfo.color || colorInfo );
-
 				for ( let channelArea = 0; channelArea < 1 + dual; channelArea++ ) {
+					const maxIndex = colorStops.length - 1;
 
-					colorStops.forEach( ( colorInfo, index ) => {
-						const maxIndex = colorStops.length - 1;
-						let offset = colorInfo.pos !== undefined ? colorInfo.pos : index / Math.max( 1, maxIndex );
+					colorStops.forEach( ( colorStop, index ) => {
+						let offset = colorStop.pos;
 
 						// in dual mode (not split), use half the original offset for each channel
 						if ( dual )
 							offset /= 2;
 
 						// constrain the offset within the useful analyzer areas (avoid reflex areas)
-						if ( channelLayout == CHANNEL_VERTICAL && ! isLumiBars && ! isRadial && ! isHorizontal ) {
+						if ( channelLayout == CHANNEL_VERTICAL && ! isLumi && ! isRadial && ! isHorizontal ) {
 							offset *= analyzerRatio;
 							// skip the first reflex area in split mode
 							if ( ! dual && offset > .5 * analyzerRatio )
@@ -1977,26 +2153,26 @@ export default class AudioMotionAnalyzer {
 						// only for dual-vertical non-split gradient (creates full gradient on both halves of the canvas)
 						if ( channelArea == 1 ) {
 							// add colors in reverse order if radial or lumi are active
-							if ( isRadial || isLumiBars ) {
+							if ( isRadial || isLumi ) {
 								const revIndex = maxIndex - index;
-								colorInfo = colorStops[ revIndex ];
-								offset = 1 - ( colorInfo.pos !== undefined ? colorInfo.pos : revIndex / Math.max( 1, maxIndex ) ) / 2;
+								colorStop = colorStops[ revIndex ];
+								offset = 1 - colorStop.pos / 2;
 							}
 							else {
 								// if the first offset is not 0, create an additional color stop to prevent bleeding from the first channel
 								if ( index == 0 && offset > 0 )
-									addColorStop( .5, colorInfo );
+									grad.addColorStop( .5, colorStop.color );
 								// bump the offset to the second half of the gradient
 								offset += .5;
 							}
 						}
 
 						// add gradient color stop
-						addColorStop( offset, colorInfo );
+						grad.addColorStop( offset, colorStop.color );
 
 						// create additional color stop at the end of first channel to prevent bleeding
 						if ( channelLayout == CHANNEL_VERTICAL && index == maxIndex && offset < .5 )
-							addColorStop( .5, colorInfo );
+							grad.addColorStop( .5, colorStop.color );
 					});
 				} // for ( let channelArea = 0; channelArea < 1 + dual; channelArea++ )
 			}
@@ -2064,9 +2240,6 @@ export default class AudioMotionAnalyzer {
 		canvas.width  = newWidth;
 		canvas.height = newHeight;
 
-		// update internal variables
-		this._calcAux();
-
 		// if not in overlay mode, paint the canvas black
 		if ( ! this.overlay ) {
 			ctx.fillStyle = '#000';
@@ -2078,14 +2251,14 @@ export default class AudioMotionAnalyzer {
 
 		// update dimensions of the scale canvas
 		canvasX.width = newWidth;
-		canvasX.height = Math.max( 20 * pixelRatio, Math.min( newWidth, newHeight ) / 27 | 0 );
-
-		// (re)generate gradient
-		this._makeGrad();
+		canvasX.height = Math.max( 20 * pixelRatio, Math.min( newWidth, newHeight ) / 32 | 0 );
 
 		// calculate bar positions and led options
 		this._calcBars();
 
+		// (re)generate gradient
+		this._makeGrad();
+
 		// detect fullscreen changes (for Safari)
 		if ( this._fsStatus !== undefined && this._fsStatus !== isFullscreen )
 			reason = REASON_FSCHANGE;
@@ -2127,6 +2300,7 @@ export default class AudioMotionAnalyzer {
 			barSpace       : 0.1,
 			bgAlpha        : 0.7,
 			channelLayout  : CHANNEL_SINGLE,
+			colorMode      : COLOR_GRADIENT,
 			fftSize        : 8192,
 			fillAlpha      : 1,
 			frequencyScale : SCALE_LOG,
@@ -2151,6 +2325,7 @@ export default class AudioMotionAnalyzer {
 			reflexBright   : 1,
 			reflexFit      : true,
 			reflexRatio    : 0,
+			roundBars      : false,
 			showBgColor    : true,
 			showFPS        : false,
 			showPeaks      : true,
@@ -2160,6 +2335,7 @@ export default class AudioMotionAnalyzer {
 			spinSpeed      : 0,
 			splitGradient  : false,
 			start          : true,
+			trueLeds       : false,
 			useCanvas      : true,
 			volume         : 1,
 			weightingFilter: FILTER_NONE