audiomotion-analyzer 4.3.0 → 4.4.0

package/README.md

@@ -86,13 +86,20 @@ import AudioMotionAnalyzer from 'audiomotion-analyzer';
 
 ## Constructor
 
-`new AudioMotionAnalyzer( [container], [{options}] )`
+```js
+new AudioMotionAnalyzer()
+new AudioMotionAnalyzer( container )
+new AudioMotionAnalyzer( container, {options} )
+new AudioMotionAnalyzer( {options} )
+```
 
 Creates a new instance of **audioMotion-analyzer**.
 
-The analyzer canvas will be appended to the HTML element referenced by `container`, unless you set [`useCanvas: false`](#usecanvas-boolean) in the options.
+`container` is the DOM element into which the canvas created for the analyzer should be inserted.
 
-If `container` is undefined, the document's body will be used instead.
+If not defined, defaults to `document.body`, unless [`canvas`](#canvas-htmlcanvaselement-object) is defined in the options, in which case its parent element will be considered the container.
+
+`options` must be an [Options object](#options-object).
 
 Usage example:
 
@@ -107,11 +114,14 @@ const audioMotion = new AudioMotionAnalyzer(
 
 This will insert the analyzer canvas inside the *#container* element and start the visualization of audio coming from the *#audio* element.
 
+?> By default, audioMotion will try to use all available container space for the canvas. To prevent it from growing indefinitely, you must either constrain the dimensions of the container via CSS or explicitly define [`height`](#height-number) and/or [`width`](#width-number) properties in the constructor [options](#options-object).
+
 ### Options object
 
 Valid properties and default values are shown below.
 
-Properties marked as *constructor only* can only be set by the constructor call, the others can also be set anytime via [`setOptions()`](#setoptions-options-) method.
+Properties marked as *constructor only* can only be set in the constructor call, the others can also be set anytime via [`setOptions()`](#setoptions-options-) method or
+directly as [properties](#properties) of the audioMotion instance.
 
 options = {<br>
 &emsp;&emsp;[alphaBars](#alphabars-boolean): **false**,<br>
@@ -119,6 +129,7 @@ options = {<br>
 &emsp;&emsp;[audioCtx](#audioctx-audiocontext-object): *undefined*, // constructor only<br>
 &emsp;&emsp;[barSpace](#barspace-number): **0.1**,<br>
 &emsp;&emsp;[bgAlpha](#bgalpha-number): **0.7**,<br>
+&emsp;&emsp;[canvas](#canvas-htmlcanvaselement-object): *undefined*, // constructor only<br>
 &emsp;&emsp;[channelLayout](#channellayout-string): **'single'**,<br>
 &emsp;&emsp;[colorMode](#colormode-string): **'gradient'**,<br>
 &emsp;&emsp;[connectSpeakers](#connectspeakers-boolean): **true**, // constructor only<br>
@@ -150,6 +161,8 @@ options = {<br>
 &emsp;&emsp;[overlay](#overlay-boolean): **false**,<br>
 &emsp;&emsp;[peakLine](#peakline-boolean): **false**,<br>
 &emsp;&emsp;[radial](#radial-boolean): **false**,<br>
+&emsp;&emsp;[radialInvert](#radialinvert-boolean): **false**,<br>
+&emsp;&emsp;[radius](#radius-number): **0.3**,<br>
 &emsp;&emsp;[reflexAlpha](#reflexalpha-number): **0.15**,<br>
 &emsp;&emsp;[reflexBright](#reflexbright-number): **1**,<br>
 &emsp;&emsp;[reflexFit](#reflexfit-boolean): **true**,<br>
@@ -164,7 +177,7 @@ options = {<br>
 &emsp;&emsp;[source](#source-htmlmediaelement-or-audionode-object): *undefined*, // constructor only<br>
 &emsp;&emsp;[spinSpeed](#spinspeed-number): **0**,<br>
 &emsp;&emsp;[splitGradient](#splitgradient-boolean): **false**,<br>
-&emsp;&emsp;[start](#start-boolean): **true**,<br>
+&emsp;&emsp;[start](#start-boolean): **true**, // constructor only<br>
 &emsp;&emsp;[trueLeds](#trueleds-boolean): **false**,<br>
 &emsp;&emsp;[useCanvas](#usecanvas-boolean): **true**,<br>
 &emsp;&emsp;[volume](#volume-number): **1**,<br>
@@ -187,6 +200,14 @@ If neither is defined, a new audio context will be created. After instantiation,
 
 See [this live code](https://codesandbox.io/s/9y6qb) and the [multi-instance demo](/demo/multi.html) for more usage examples.
 
+#### `canvas` *HTMLCanvasElement object*
+
+*Available since v4.4.0*
+
+Allows you to provide an existing [*Canvas*](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) where audioMotion should render its visualizations.
+
+If not defined, a new canvas will be created. After instantiation, you can obtain its reference from the [`canvas`](#canvas-htmlcanvaselement-object-read-only) read-only property.
+
 #### `connectSpeakers` *boolean*
 
 *Available since v3.2.0*
@@ -321,11 +342,13 @@ Defaults to **0.7**.
 
 ### `canvas` *HTMLCanvasElement object* *(Read only)*
 
-[*Canvas*](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) element created by audioMotion.
+[*Canvas*](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) element where audioMotion renders its visualizations.
+
+See also the [`canvas`](#canvas-htmlcanvaselement-object) constructor option.
 
 ### `canvasCtx` *CanvasRenderingContext2D object* *(Read only)*
 
-[2D rendering context](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) used for drawing in audioMotion's *Canvas*.
+[2D rendering context](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) used for drawing in audioMotion's [`canvas`](#canvas-htmlcanvaselement-object-read-only).
 
 ### `channelLayout` *string*
 
@@ -480,13 +503,14 @@ See also [`gradient`](#gradient-string) and [`splitGradient`](#splitgradient-boo
 
 Nominal dimensions of the analyzer.
 
-If one or both of these are `undefined`, the analyzer will try to adjust to the container's width and/or height.
-If the container's width and/or height are 0 (inline elements), a reference size of **640 x 270 pixels** will be used to replace the missing dimension(s).
-This should be considered the minimum dimensions for proper visualization of all available modes and effects.
+Setting one or both properties to **_undefined_** (default) will trigger the fluid/responsive behavior and the analyzer will try to adjust to the container's height and/or width.
+In that case, it's important that you constrain the dimensions of the container via CSS to prevent the canvas from growing indefinitely.
 
 You can set both values at once using the [`setCanvasSize()`](#setcanvassize-width-height-) method.
 
-?> You can read the actual canvas dimensions at any time directly from the [`canvas`](#canvas-htmlcanvaselement-object-read-only) object.
+See also [`onCanvasResize`](#oncanvasresize-function).
+
+?> The actual dimensions of the canvas may differ from these values, depending on the device's [pixelRatio](#pixelratio-number-read-only), the [`loRes`](#lores-boolean) setting and while in fullscreen. For the actual pixel values, read `height` and `width` directly from the [`canvas`](#canvas-htmlcanvaselement-object-read-only) object.
 
 ### `isAlphaBars` *boolean* *(Read only)*
 
@@ -771,12 +795,36 @@ In radial view, [`ledBars`](#ledbars-boolean) and [`lumiBars`](#lumibars-boolean
 
 When [`channelLayout`](#channellayout-string) is set to *'dual-vertical'*, graphs for the right channel are rendered towards the center of the screen.
 
-See also [`spinSpeed`](#spinspeed-number).
+See also [`radialInvert`](#radialinvert-boolean), [`radius`](#radius-number) and [`spinSpeed`](#spinspeed-number).
 
 Defaults to **false**.
 
 !> [See related known issue](#alphabars-and-fillalpha-wont-work-with-radial-on-firefox)
 
+### `radialInvert` *boolean*
+
+*Available since v4.4.0*
+
+When set to *true* (and [`radial`](#radial-boolean) is also *true*) creates a radial spectrum with maximum size and bars growing towards the center of the screen.
+
+This property has no effect when [`channelLayout`](#channellayout-string) is set to *'dual-vertical'*.
+
+See also [`radius`](#radius-number).
+
+Defaults to **false**.
+
+### `radius` *number*
+
+*Available since v4.4.0*
+
+Defines the internal radius of [`radial`](#radial-boolean) spectrum. It should be a number between **0** and **1**.
+
+This property has no effect when [`channelLayout`](#channellayout-string) is set to *'dual-vertical'*.
+
+When [`radialInvert`](#radialinvert-boolean) is *true*, this property controls how close to the center of the screen the bars can get.
+
+Defaults to **0.3**.
+
 ### `reflexAlpha` *number*
 
 *Available since v2.1.0*
@@ -1213,6 +1261,19 @@ Please note that preset names are case-sensitive. If the specified preset is not
 
 Use this method inside your callback function to create additional visual effects. See the [fluid demo](/demo/fluid.html) or [this pen](https://codepen.io/hvianna/pen/poNmVYo) for examples.
 
+### `getOptions( [ignore] )`
+
+*Available since v4.4.0*
+
+Returns an [**Options object**](#options-object) with all the current analyzer settings.
+
+`ignore` can be a single property name or an array of property names that should not be included in the returned object.
+
+Callbacks and [constructor-specific properties](#constructor-specific-options) are NOT included in the object.
+
+?> If the same [gradient](#gradient-string) is selected for both channels, only the `gradient` property is included in the object; otherwise, only `gradientLeft` and `gradientRight` are included (not `gradient`). If 'gradient' is added to `ignore`, none of the gradient properties will be included.
+
+See also [`setOptions()`](#setoptions-options-).
 
 ### `registerGradient( name, options )`
 
@@ -1290,10 +1351,12 @@ You can try different values in the [fluid demo](https://audiomotion.dev/demo/fl
 
 Shorthand method for setting several analyzer [properties](#properties) at once.
 
-See **[Options object](#options-object)** for object structure and default values.
+`options` must be an [**Options object**](#options-object).
 
 ?> If called with no argument (or `options` is *undefined*), resets all configuration options to their default values.
 
+See also [`getOptions()`](#getoptions-ignore-).
+
 ### `setSensitivity( minDecibels, maxDecibels )`
 
 Adjust the analyzer's sensitivity. See [`minDecibels`](#mindecibels-number) and [`maxDecibels`](#maxdecibels-number) properties.
@@ -1456,7 +1519,7 @@ See [Changelog.md](Changelog.md)
 
 ## Contributing
 
-I kindly request that you only [open an issue](https://github.com/hvianna/audioMotion-analyzer/issues) for submitting a **bug report**.
+I kindly request that you only [open an issue](https://github.com/hvianna/audioMotion-analyzer/issues) for submitting **bug reports**.
 
 If you need help integrating *audioMotion-analyzer* with your project, have ideas for **new features** or any other questions or feedback,
 please use the [**Discussions**](https://github.com/hvianna/audioMotion-analyzer/discussions) section on GitHub.
@@ -1475,5 +1538,5 @@ And if you're feeling generous, maybe:
 
 ## License
 
-audioMotion-analyzer copyright (c) 2018-2023 [Henrique Avila Vianna](https://henriquevianna.com)<br>
+audioMotion-analyzer copyright (c) 2018-2024 [Henrique Avila Vianna](https://henriquevianna.com)<br>
 Licensed under the [GNU Affero General Public License, version 3 or later](https://www.gnu.org/licenses/agpl.html).

package/package.json

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

package/src/audioMotion-analyzer.js

@@ -2,12 +2,12 @@
  * audioMotion-analyzer
  * High-resolution real-time graphic audio spectrum analyzer JS module
  *
- * @version 4.3.0
+ * @version 4.4.0
  * @author  Henrique Avila Vianna <hvianna@gmail.com> <https://henriquevianna.com>
  * @license AGPL-3.0-or-later
  */
 
-const VERSION = '4.3.0';
+const VERSION = '4.4.0';
 
 // internal constants
 const PI      = Math.PI,
@@ -80,6 +80,60 @@ const PRISM = [ '#a35', '#c66', '#e94', '#ed0', '#9d5', '#4d8', '#2cb', '#0bc',
 	  }]
 ];
 
+// settings defaults
+const DEFAULT_SETTINGS = {
+	alphaBars      : false,
+	ansiBands      : false,
+	barSpace       : 0.1,
+	bgAlpha        : 0.7,
+	channelLayout  : CHANNEL_SINGLE,
+	colorMode      : COLOR_GRADIENT,
+	fftSize        : 8192,
+	fillAlpha      : 1,
+	frequencyScale : SCALE_LOG,
+	gradient       : GRADIENTS[0][0],
+	height         : undefined,
+	ledBars        : false,
+	linearAmplitude: false,
+	linearBoost    : 1,
+	lineWidth      : 0,
+	loRes          : false,
+	lumiBars       : false,
+	maxDecibels    : -25,
+	maxFPS         : 0,
+	maxFreq        : 22000,
+	minDecibels    : -85,
+	minFreq        : 20,
+	mirror         : 0,
+	mode           : 0,
+	noteLabels     : false,
+	outlineBars    : false,
+	overlay        : false,
+	peakLine       : false,
+	radial		   : false,
+	radialInvert   : false,
+	radius         : 0.3,
+	reflexAlpha    : 0.15,
+	reflexBright   : 1,
+	reflexFit      : true,
+	reflexRatio    : 0,
+	roundBars      : false,
+	showBgColor    : true,
+	showFPS        : false,
+	showPeaks      : true,
+	showScaleX     : true,
+	showScaleY     : false,
+	smoothing      : 0.5,
+	spinSpeed      : 0,
+	splitGradient  : false,
+	start          : true,
+	trueLeds       : false,
+	useCanvas      : true,
+	volume         : 1,
+	weightingFilter: FILTER_NONE,
+	width          : undefined
+};
+
 // custom error messages
 const ERR_AUDIO_CONTEXT_FAIL     = [ 'ERR_AUDIO_CONTEXT_FAIL', 'Could not create audio context. Web Audio API not supported?' ],
 	  ERR_INVALID_AUDIO_CONTEXT  = [ 'ERR_INVALID_AUDIO_CONTEXT', 'Provided audio context is not valid' ],
@@ -104,6 +158,13 @@ class AudioMotionError extends Error {
 // helper function - output deprecation warning message on console
 const deprecate = ( name, alternative ) => console.warn( `${name} is deprecated. Use ${alternative} instead.` );
 
+// helper function - check if a given object is empty (also returns `true` on null, undefined or any non-object value)
+const isEmpty = obj => {
+	for ( const p in obj )
+		return false;
+	return true;
+}
+
 // 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 ]() ) ) ];
@@ -152,12 +213,26 @@ export default class AudioMotionAnalyzer {
 		this._selectedGrads = [];   // names of the currently selected gradients for channels 0 and 1
 		this._sources = [];			// input nodes
 
+		// Check if options object passed as first argument
+		if ( ! ( container instanceof Element ) ) {
+			if ( isEmpty( options ) && ! isEmpty( container ) )
+				options = container;
+			container = null;
+		}
+
+		this._ownCanvas = ! ( options.canvas instanceof HTMLCanvasElement );
+
+		// Create a new canvas or use the one provided by the user
+		const canvas = this._ownCanvas ? document.createElement('canvas') : options.canvas;
+		canvas.style = 'max-width: 100%;';
+		this._ctx = canvas.getContext('2d');
+
 		// Register built-in gradients
 		for ( const [ name, options ] of GRADIENTS )
 			this.registerGradient( name, options );
 
 		// Set container
-		this._container = container || document.body;
+		this._container = container || ( ! this._ownCanvas && canvas.parentElement ) || document.body;
 
 		// Make sure we have minimal width and height dimensions in case of an inline container
 		this._defaultWidth  = this._container.clientWidth  || 640;
@@ -225,11 +300,6 @@ export default class AudioMotionAnalyzer {
 		if ( options.connectSpeakers !== false )
 			this.connectOutput();
 
-		// create analyzer canvas
-		const canvas = document.createElement('canvas');
-		canvas.style = 'max-width: 100%;';
-		this._ctx = canvas.getContext('2d');
-
 		// create auxiliary canvases for the X-axis and radial scale labels
 		for ( const ctx of [ '_scaleX', '_scaleR' ] )
 			this[ ctx ] = document.createElement('canvas').getContext('2d');
@@ -310,8 +380,8 @@ export default class AudioMotionAnalyzer {
 		// Set configuration options and use defaults for any missing properties
 		this._setProps( options, true );
 
-		// add canvas to the container
-		if ( this.useCanvas )
+		// Add canvas to the container (only when canvas not provided by user)
+		if ( this.useCanvas && this._ownCanvas )
 			this._container.appendChild( canvas );
 
 		// Finish canvas setup
@@ -571,6 +641,24 @@ export default class AudioMotionAnalyzer {
 		this._makeGrad();
 	}
 
+	get radialInvert() {
+		return this._radialInvert;
+	}
+	set radialInvert( value ) {
+		this._radialInvert = !! value;
+		this._calcBars();
+		this._makeGrad();
+	}
+
+	get radius() {
+		return this._radius;
+	}
+	set radius( value ) {
+		this._radius = +value || 0;
+		this._calcBars();
+		this._makeGrad();
+	}
+
 	get reflexRatio() {
 		return this._reflexRatio;
 	}
@@ -777,7 +865,7 @@ export default class AudioMotionAnalyzer {
 		if ( ! this._ready )
 			return;
 
-		const { audioCtx, canvas, _controller, _input, _merger, _observer, _ownContext, _splitter } = this;
+		const { audioCtx, canvas, _controller, _input, _merger, _observer, _ownCanvas, _ownContext, _splitter } = this;
 
 		this._destroyed = true;
 		this._ready = false;
@@ -804,8 +892,9 @@ export default class AudioMotionAnalyzer {
 		if ( _ownContext )
 			audioCtx.close();
 
-		// remove canvas from the DOM
-		canvas.remove();
+		// remove canvas from the DOM (if not provided by the user)
+		if ( _ownCanvas )
+			canvas.remove();
 
 		// reset flags
 		this._calcBars();
@@ -909,6 +998,29 @@ export default class AudioMotionAnalyzer {
 		return energy / ( endBin - startBin + 1 ) / chnCount;
 	}
 
+	/**
+	 * Returns current analyzer settings in object format
+	 *
+	 * @param [{string|array}] a property name or an array of property names to not include in the returned object
+	 * @returns {object} Options object
+	 */
+	getOptions( ignore ) {
+		if ( ! Array.isArray( ignore ) )
+			ignore = [ ignore ];
+		let options = {};
+		for ( const prop of Object.keys( DEFAULT_SETTINGS ) ) {
+			if ( ! ignore.includes( prop ) ) {
+				if ( prop == 'gradient' && this.gradientLeft != this.gradientRight ) {
+					options.gradientLeft = this.gradientLeft;
+					options.gradientRight = this.gradientRight;
+				}
+				else if ( prop != 'start' )
+					options[ prop ] = this[ prop ];
+			}
+		}
+		return options;
+	}
+
 	/**
 	 * Registers a custom gradient
 	 *
@@ -1115,7 +1227,7 @@ export default class AudioMotionAnalyzer {
 			return;
 		}
 
-		const { _ansiBands, _barSpace, canvas, _chLayout, _maxFreq, _minFreq, _mirror, _mode, _radial, _reflexRatio } = this,
+		const { _ansiBands, _barSpace, canvas, _chLayout, _maxFreq, _minFreq, _mirror, _mode, _radial, _radialInvert, _reflexRatio } = this,
 			  centerX          = canvas.width >> 1,
 			  centerY          = canvas.height >> 1,
 			  isDualVertical   = _chLayout == CHANNEL_VERTICAL && ! _radial,
@@ -1145,9 +1257,13 @@ export default class AudioMotionAnalyzer {
 			  // TODO: improve this, make it configurable?
 			  channelGap     = isDualVertical ? canvas.height - channelHeight * 2 : 0,
 
-			  initialX       = centerX * ( _mirror == -1 && ! isDualHorizontal && ! _radial ),
-			  innerRadius    = Math.min( canvas.width, canvas.height ) * ( _chLayout == CHANNEL_VERTICAL ? .375 : .125 ) | 0,
-			  outerRadius    = Math.min( centerX, centerY );
+			  initialX       = centerX * ( _mirror == -1 && ! isDualHorizontal && ! _radial );
+
+		let innerRadius = Math.min( canvas.width, canvas.height ) * .375 * ( _chLayout == CHANNEL_VERTICAL ? 1 : this._radius ) | 0,
+			outerRadius = Math.min( centerX, centerY );
+
+		if ( _radialInvert && _chLayout != CHANNEL_VERTICAL )
+			[ innerRadius, outerRadius ] = [ outerRadius, innerRadius ];
 
 		/**
 		 *	CREATE ANALYZER BANDS
@@ -1479,8 +1595,9 @@ export default class AudioMotionAnalyzer {
 			  freqLabels       = [],
 			  isDualHorizontal = this._chLayout == CHANNEL_HORIZONTAL,
 			  isDualVertical   = this._chLayout == CHANNEL_VERTICAL,
+			  minDimension     = Math.min( canvas.width, canvas.height ),
 			  scale            = [ 'C',, 'D',, 'E', 'F',, 'G',, 'A',, 'B' ], // for note labels (no sharp notes)
-			  scaleHeight      = Math.min( canvas.width, canvas.height ) / 34 | 0, // circular scale height (radial mode)
+			  scaleHeight      = minDimension / 34 | 0, // circular scale height (radial mode)
   			  fontSizeX        = canvasX.height >> 1,
 			  fontSizeR        = scaleHeight >> 1,
 			  labelWidthX      = fontSizeX * ( _noteLabels ? .7 : 1.5 ),
@@ -1510,7 +1627,7 @@ export default class AudioMotionAnalyzer {
 		}
 
 		// 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 = ( innerRadius << 1 ) + ( isDualVertical * scaleHeight );
+		canvasR.width = canvasR.height = Math.max( minDimension * .15, ( innerRadius << 1 ) + ( isDualVertical * scaleHeight ) );
 
 		const centerR = canvasR.width >> 1,
 			  radialY = centerR - scaleHeight * .7;	// vertical position of text labels in the circular scale
@@ -1678,8 +1795,8 @@ export default class AudioMotionAnalyzer {
 			  dbRange 		   = maxDecibels - minDecibels,
 			  [ ledCount, ledSpaceH, ledSpaceV, ledHeight ] = this._leds || [];
 
-		if ( _energy.val > 0 )
-			this._spinAngle += this._spinSpeed * TAU / ( 60 * _fps ); // spinSpeed * angle increment per frame for 1 RPM
+		if ( _energy.val > 0 && _fps > 0 )
+			this._spinAngle += this._spinSpeed * TAU / 60 / _fps; // spinSpeed * angle increment per frame for 1 RPM
 
 		/* HELPER FUNCTIONS */
 
@@ -2157,8 +2274,10 @@ export default class AudioMotionAnalyzer {
 					}
 					else if ( ! _radial )
 						_ctx.fillRect( posX, analyzerBottom - peak * maxBarHeight, width, 2 );
-					else if ( _mode != MODE_GRAPH ) // radial - peaks for graph mode are done by the peak line code
-						radialPoly( posX, peak * maxBarHeight, width, -2 );
+					else if ( _mode != MODE_GRAPH ) { // radial (peaks for graph mode are done by the peakLine code)
+						const y = peak * maxBarHeight;
+						radialPoly( posX, y, width, ! this._radialInvert || isDualVertical || y + innerRadius >= 2 ? -2 : 2 );
+					}
 				}
 
 			} // for ( let barIndex = 0; barIndex < nBars; barIndex++ )
@@ -2278,7 +2397,7 @@ export default class AudioMotionAnalyzer {
 		if ( this.onCanvasDraw ) {
 			_ctx.save();
 			_ctx.fillStyle = _ctx.strokeStyle = _canvasGradients[0];
-			this.onCanvasDraw( this, { timestamp, _canvasGradients } );
+			this.onCanvasDraw( this, { timestamp, canvasGradients: _canvasGradients } );
 			_ctx.restore();
 		}
 	}
@@ -2437,8 +2556,8 @@ export default class AudioMotionAnalyzer {
 		this._fsWidth    = screenWidth;
 		this._fsHeight   = screenHeight;
 
-		// if canvas dimensions haven't changed, quit
-		if ( canvas.width == newWidth && canvas.height == newHeight )
+		// if this is not the constructor call and canvas dimensions haven't changed, quit
+		if ( reason != REASON_CREATE && canvas.width == newWidth && canvas.height == newHeight )
 			return;
 
 		// apply new dimensions
@@ -2497,68 +2616,17 @@ export default class AudioMotionAnalyzer {
 	 * Set object properties
 	 */
 	_setProps( options, useDefaults ) {
-
-		// settings defaults
-		const defaults = {
-			alphaBars      : false,
-			ansiBands      : false,
-			barSpace       : 0.1,
-			bgAlpha        : 0.7,
-			channelLayout  : CHANNEL_SINGLE,
-			colorMode      : COLOR_GRADIENT,
-			fftSize        : 8192,
-			fillAlpha      : 1,
-			frequencyScale : SCALE_LOG,
-			gradient       : GRADIENTS[0][0],
-			ledBars        : false,
-			linearAmplitude: false,
-			linearBoost    : 1,
-			lineWidth      : 0,
-			loRes          : false,
-			lumiBars       : false,
-			maxDecibels    : -25,
-			maxFPS         : 0,
-			maxFreq        : 22000,
-			minDecibels    : -85,
-			minFreq        : 20,
-			mirror         : 0,
-			mode           : 0,
-			noteLabels     : false,
-			outlineBars    : false,
-			overlay        : false,
-			peakLine       : false,
-			radial		   : false,
-			reflexAlpha    : 0.15,
-			reflexBright   : 1,
-			reflexFit      : true,
-			reflexRatio    : 0,
-			roundBars      : false,
-			showBgColor    : true,
-			showFPS        : false,
-			showPeaks      : true,
-			showScaleX     : true,
-			showScaleY     : false,
-			smoothing      : 0.5,
-			spinSpeed      : 0,
-			splitGradient  : false,
-			start          : true,
-			trueLeds       : false,
-			useCanvas      : true,
-			volume         : 1,
-			weightingFilter: FILTER_NONE
-		};
-
 		// callback functions properties
 		const callbacks = [ 'onCanvasDraw', 'onCanvasResize' ];
 
-		// properties undefined by default
-		const defaultUndefined = [ 'gradientLeft', 'gradientRight', 'height', 'width', 'stereo' ];
+		// properties not in the defaults (`stereo` is deprecated)
+		const extraProps = [ 'gradientLeft', 'gradientRight', 'stereo' ];
 
 		// 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, defaultUndefined );
+		const validProps = Object.keys( DEFAULT_SETTINGS ).filter( e => e != 'start' ).concat( callbacks, extraProps );
 
 		if ( useDefaults || options === undefined )
-			options = { ...defaults, ...options }; // merge options with defaults
+			options = { ...DEFAULT_SETTINGS, ...options }; // merge options with defaults
 
 		for ( const prop of Object.keys( options ) ) {
 			if ( callbacks.includes( prop ) && typeof options[ prop ] !== 'function' ) // check invalid callback
@@ -2567,6 +2635,7 @@ export default class AudioMotionAnalyzer {
 				this[ prop ] = options[ prop ];
 		}
 
+		// deprecated - move this to the constructor in the next major release (`start` should be constructor-specific)
 		if ( options.start !== undefined )
 			this.toggleAnalyzer( options.start );
 	}

package/src/index.d.ts

@@ -49,6 +49,8 @@ export interface Options {
   overlay?: boolean;
   peakLine?: boolean;
   radial?: boolean;
+  radialInvert?: boolean;
+  radius?: number;
   reflexAlpha?: number;
   reflexBright?: number;
   reflexFit?: boolean;
@@ -83,6 +85,7 @@ export interface AnalyzerBarData {
 
 export interface ConstructorOptions extends Options {
   audioCtx?: AudioContext;
+  canvas?: HTMLCanvasElement;
   connectSpeakers?: boolean;
   fsElement?: HTMLElement;
   source?: HTMLMediaElement | AudioNode;
@@ -114,6 +117,7 @@ export interface LedParameters {
 
 declare class AudioMotionAnalyzer {
   constructor(container?: HTMLElement, options?: ConstructorOptions);
+  constructor(options?: ConstructorOptions);
 
   get alphaBars(): boolean;
   set alphaBars(value: boolean);
@@ -234,6 +238,12 @@ declare class AudioMotionAnalyzer {
   get radial(): boolean;
   set radial(value: boolean);
 
+  get radialInvert(): boolean;
+  set radialInvert(value: boolean);
+
+  get radius(): number;
+  set radius(value: number);
+
   public reflexAlpha: number;
   public reflexBright: number;
   public reflexFit: boolean;
@@ -292,6 +302,8 @@ declare class AudioMotionAnalyzer {
   public getEnergy(preset?: EnergyPreset): number;
   public getEnergy(startFreq: number, endFreq?: number): number;
 
+  public getOptions(ignore?: string | string[]): Options;
+
   public registerGradient(name: string, options: GradientOptions): void;
 
   public setCanvasSize(width: number, height: number): void;