{"id":13410168,"url":"https://github.com/hvianna/audioMotion-analyzer","last_synced_at":"2025-03-14T15:32:16.085Z","repository":{"id":45456923,"uuid":"191051179","full_name":"hvianna/audioMotion-analyzer","owner":"hvianna","description":"High-resolution real-time graphic audio spectrum analyzer JavaScript module with no dependencies.","archived":false,"fork":false,"pushed_at":"2024-07-24T20:21:37.000Z","size":69568,"stargazers_count":698,"open_issues_count":19,"forks_count":70,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-04T23:35:59.022Z","etag":null,"topics":["audio-analysis","audio-visualizer","javascript","spectrum-analyser","spectrum-analyzer","web-audio"],"latest_commit_sha":null,"homepage":"https://audioMotion.dev","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hvianna.png","metadata":{"files":{"readme":"README.md","changelog":"Changelog.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"ko_fi":"hvianna"}},"created_at":"2019-06-09T20:15:29.000Z","updated_at":"2025-03-03T03:46:10.000Z","dependencies_parsed_at":"2023-01-29T23:15:45.794Z","dependency_job_id":"f074bc36-11cc-4e25-a4ab-b855c33853e2","html_url":"https://github.com/hvianna/audioMotion-analyzer","commit_stats":{"total_commits":646,"total_committers":4,"mean_commits":161.5,"dds":"0.010835913312693513","last_synced_commit":"5bd82dc5a20f43b5c240dd39dced47718eacf500"},"previous_names":[],"tags_count":46,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hvianna%2FaudioMotion-analyzer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hvianna%2FaudioMotion-analyzer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hvianna%2FaudioMotion-analyzer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hvianna%2FaudioMotion-analyzer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hvianna","download_url":"https://codeload.github.com/hvianna/audioMotion-analyzer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243600715,"owners_count":20317323,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["audio-analysis","audio-visualizer","javascript","spectrum-analyser","spectrum-analyzer","web-audio"],"created_at":"2024-07-30T20:01:05.316Z","updated_at":"2025-03-14T15:32:16.073Z","avatar_url":"https://github.com/hvianna.png","language":"JavaScript","funding_links":["https://ko-fi.com/hvianna","https://ko-fi.com/Q5Q6157GZ"],"categories":["JavaScript","HarmonyOS"],"sub_categories":["Windows Manager"],"readme":"\n## About\n\n**audioMotion-analyzer** is a high-resolution real-time audio spectrum analyzer built upon **Web Audio** and **Canvas** JavaScript APIs.\n\nIt was originally conceived as part of my full-featured media player called [**audioMotion**](https://audiomotion.app), but I later decided\nto make the spectrum analyzer available as a self-contained module, so other developers could use it in their own JS projects.\n\nMy goal is to make this the best looking, most accurate and customizable spectrum analyzer around, in a small-footprint and high-performance package.\n\nWhat users are saying:\n\n\u003cdiv class=\"quotes-container\"\u003e\n\t\u003cp class=\"quote\"\u003e\n\t\t\u003cstrong\u003eI still, to this day, haven't found anything close to audioMotion in terms of beauty.\u003c/strong\u003e\n\t\t\u003cspan class=\"author\"\u003e\u0026mdash; Weakky@github\u003c/span\u003e\n\t\u003c/p\u003e\n\t\u003cp class=\"quote\"\u003e\n\t\t\u003cstrong\u003eI've been visualizing input with FFT with p5.js for a while, but got sick of how much code was needed.\u003cbr\u003eThis looks way better and works better too.\u003c/strong\u003e\n\t\t\u003cspan class=\"author\"\u003e\u0026mdash; Staijn1@github\u003c/span\u003e\n\t\u003c/p\u003e\n\t\u003cp class=\"quote\"\u003e\n\t\t\u003cstrong\u003eIt works amazing! The spectrum is so easy readable even for complex sound.\u003c/strong\u003e\n\t\t\u003cspan class=\"author\"\u003e\u0026mdash; davay42@github\u003c/span\u003e\n\t\u003c/p\u003e\n\u003c/div\u003e\n\n## Features\n\n+ Dual-channel high-resolution real-time audio spectrum analyzer\n+ Logarithmic, linear and perceptual (Bark and Mel) frequency scales, with customizable range\n+ Visualization of discrete FFT frequencies or up to 240 frequency bands (supports ANSI and equal-tempered octave bands)\n+ Decibel and linear amplitude scales, with customizable sensitivity\n+ Optional A, B, C, D and ITU-R 468 weighting filters\n+ Additional effects: LED bars, luminance bars, mirroring and reflection, radial spectrum\n+ Choose from 5 built-in color gradients or easily add your own!\n+ Fullscreen support, ready for retina / HiDPI displays\n+ Zero-dependency native ES6+ module (ESM), \\~30kB minified\n\n## Online demos\n\n[![demo-animation](img/demo.webp)](https://audiomotion.dev/demo/)\n\n?\u003e https://audiomotion.dev/demo/\n\n## Live code examples\n\n- [Quick and easy spectrum analyzer](https://codepen.io/hvianna/pen/pobMLNL)\n- [Using microphone input](https://codepen.io/hvianna/pen/VwKZgEE)\n- [Creating additional effects with `getEnergy()`](https://codepen.io/hvianna/pen/poNmVYo)\n- [No canvas example](https://codepen.io/hvianna/pen/ZEKWWJb) (create your own visualization using analyzer data)\n- Example integrations with other audio libraries:\n  - [Icecast Metadata Player](https://codepen.io/hvianna/pen/YzrgWVe)\n  - [Pizzicato](https://codesandbox.io/s/9y6qb)\n  - [jPlayer](https://codepen.io/hvianna/pen/dyVrMJX)\n- [See more code examples on CodePen](https://codepen.io/collection/ABbbKr)\n\n## Usage\n\n### Node.js project\n\nInstall via npm:\n\n```console\nnpm i audiomotion-analyzer\n```\n\nUse ES6 import:\n\n```js\nimport AudioMotionAnalyzer from 'audiomotion-analyzer';\n```\n\nOr CommonJS require:\n\n```js\nconst { AudioMotionAnalyzer } = require('audioMotion-analyzer');\n```\n\n### In the browser using native ES6 module (ESM)\n\nLoad from Skypack CDN:\n\n```html\n\u003cscript type=\"module\"\u003e\n  import AudioMotionAnalyzer from 'https://cdn.skypack.dev/audiomotion-analyzer?min';\n  // your code here\n\u003c/script\u003e\n```\n\nOr download the [latest version](https://github.com/hvianna/audioMotion-analyzer/releases) and copy the `audioMotion-analyzer.js` file from the `src/` folder into your project folder.\n\n### In the browser using global variable\n\nLoad from Unpkg CDN:\n\n```html\n\u003cscript src=\"https://unpkg.com/audiomotion-analyzer/dist\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  // available as AudioMotionAnalyzer global\n\u003c/script\u003e\n```\n\n\n## Constructor\n\n```js\nnew AudioMotionAnalyzer()\nnew AudioMotionAnalyzer( container )\nnew AudioMotionAnalyzer( container, {options} )\nnew AudioMotionAnalyzer( {options} )\n```\n\nCreates a new instance of **audioMotion-analyzer**.\n\n`container` is the DOM element into which the canvas created for the analyzer should be inserted.\n\nIf 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.\n\n`options` must be an [Options object](#options-object).\n\nUsage example:\n\n```js\nconst audioMotion = new AudioMotionAnalyzer(\n\tdocument.getElementById('container'),\n\t{\n\t\tsource: document.getElementById('audio')\n\t}\n);\n```\n\nThis will insert the analyzer canvas inside the *#container* element and start the visualization of audio coming from the *#audio* element.\n\n?\u003e 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).\n\n### Options object\n\nValid properties and default values are shown below.\n\nProperties 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\ndirectly as [properties](#properties) of the audioMotion instance.\n\noptions = {\u003cbr\u003e\n\u0026emsp;\u0026emsp;[alphaBars](#alphabars-boolean): **false**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[ansiBands](#ansibands-boolean): **false**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[audioCtx](#audioctx-audiocontext-object): *undefined*, // constructor only\u003cbr\u003e\n\u0026emsp;\u0026emsp;[barSpace](#barspace-number): **0.1**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[bgAlpha](#bgalpha-number): **0.7**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[canvas](#canvas-htmlcanvaselement-object): *undefined*, // constructor only\u003cbr\u003e\n\u0026emsp;\u0026emsp;[channelLayout](#channellayout-string): **'single'**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[colorMode](#colormode-string): **'gradient'**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[connectSpeakers](#connectspeakers-boolean): **true**, // constructor only\u003cbr\u003e\n\u0026emsp;\u0026emsp;[fadePeaks](#fadepeaks-boolean): **false**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[fftSize](#fftsize-number): **8192**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[fillAlpha](#fillalpha-number): **1**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[frequencyScale](#frequencyscale-string): **'log'**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[fsElement](#fselement-htmlelement-object): *undefined*, // constructor only\u003cbr\u003e\n\u0026emsp;\u0026emsp;[gradient](#gradient-string): **'classic'**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[gradientLeft](#gradientleft-string): *undefined*,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[gradientRight](#gradientright-string): *undefined*,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[gravity](#gravity-number): **3.8**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[height](#height-number): *undefined*,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[ledBars](#ledbars-boolean): **false**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[linearAmplitude](#linearamplitude-boolean): **false**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[linearBoost](#linearboost-number): **1**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[lineWidth](#linewidth-number): **0**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[loRes](#lores-boolean): **false**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[lumiBars](#lumibars-boolean): **false**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[maxDecibels](#maxdecibels-number): **-25**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[maxFPS](#maxfps-number): **0**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[maxFreq](#maxfreq-number): **22000**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[minDecibels](#mindecibels-number): **-85**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[minFreq](#minfreq-number): **20**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[mirror](#mirror-number): **0**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[mode](#mode-number): **0**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[noteLabels](#notelabels-boolean): **false**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[onCanvasDraw](#oncanvasdraw-function): *undefined*,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[onCanvasResize](#oncanvasresize-function): *undefined*,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[outlineBars](#outlinebars-boolean): **false**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[overlay](#overlay-boolean): **false**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[peakFadeTime](#peakfadetime-number): **750**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[peakHoldTime](#peakholdtime-number): **500**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[peakLine](#peakline-boolean): **false**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[radial](#radial-boolean): **false**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[radialInvert](#radialinvert-boolean): **false**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[radius](#radius-number): **0.3**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[reflexAlpha](#reflexalpha-number): **0.15**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[reflexBright](#reflexbright-number): **1**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[reflexFit](#reflexfit-boolean): **true**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[reflexRatio](#reflexratio-number): **0**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[roundBars](#roundbars-boolean): **false**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[showBgColor](#showbgcolor-boolean): **true**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[showFPS](#showfps-boolean): **false**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[showPeaks](#showpeaks-boolean): **true**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[showScaleX](#showscalex-boolean): **true**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[showScaleY](#showscaley-boolean): **false**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[smoothing](#smoothing-number): **0.5**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[source](#source-htmlmediaelement-or-audionode-object): *undefined*, // constructor only\u003cbr\u003e\n\u0026emsp;\u0026emsp;[spinSpeed](#spinspeed-number): **0**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[splitGradient](#splitgradient-boolean): **false**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[start](#start-boolean): **true**, // constructor only\u003cbr\u003e\n\u0026emsp;\u0026emsp;[trueLeds](#trueleds-boolean): **false**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[useCanvas](#usecanvas-boolean): **true**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[volume](#volume-number): **1**,\u003cbr\u003e\n\u0026emsp;\u0026emsp;[weightingFilter](#weightingFilter-string): **''**\u003cbr\u003e\n\u0026emsp;\u0026emsp;[width](#width-number): *undefined*\u003cbr\u003e\n}\n\n### Constructor-specific options\n\n#### `audioCtx` *AudioContext object*\n\n*Available since v2.0.0*\n\nAllows you to provide an external [*AudioContext*](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext)\nfor **audioMotion-analyzer**, for connection with other Web Audio nodes or sound-processing modules.\n\nSince version 3.2.0, `audioCtx` will be automatically inferred from the [`source`](#source-htmlmediaelement-or-audionode-object) property if that's an *AudioNode*.\n\nIf neither is defined, a new audio context will be created. After instantiation, [`audioCtx`](#audioctx-audiocontext-object-read-only) will be available as a read-only property.\n\nSee [this live code](https://codesandbox.io/s/9y6qb) and the [multi-instance demo](/demo/multi.html) for more usage examples.\n\n#### `canvas` *HTMLCanvasElement object*\n\n*Available since v4.4.0*\n\nAllows you to provide an existing [*Canvas*](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) where audioMotion should render its visualizations.\n\nIf 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.\n\n#### `connectSpeakers` *boolean*\n\n*Available since v3.2.0*\n\nWhether or not to connect the analyzer output to the speakers (technically, the *AudioContext* `destination` node).\n\nSome scenarios where you may want to set this to `false`:\n\n1. when running multiple instances of **audioMotion-analyzer** sharing the same audio input (see the [multi demo](/demo/multi.html)),\nonly one of them needs to be connected to the speakers, otherwise the volume will be amplified due to multiple outputs;\n1. when audio input comes from the microphone and you're not using headphones, to prevent a feedback loop from the speakers;\n1. when you're using **audioMotion-analyzer** with an audio player which already outputs sound to the speakers (same reason as 1).\n\nAfter instantiation, use [`connectOutput()`](#connectoutput-node-) and [`disconnectOutput()`](#disconnectoutput-node-) to connect or disconnect the output from the speakers (or other nodes).\n\nSee also [`connectedTo`](#connectedto-array-read-only).\n\nDefaults to **true**.\n\n#### `fsElement` *HTMLElement object*\n\n*Available since v3.4.0*\n\nHTML element affected by the [`toggleFullscreen()`](#togglefullscreen) method.\n\nIf not defined, defaults to the [`canvas`](#canvas-htmlcanvaselement-object-read-only).\n**Set it to a container `\u003cdiv\u003e` to keep additional interface elements available in fullscreen mode.**\n\nSee the [overlay demo](/demo/overlay.html) or [this pen](https://codepen.io/hvianna/pen/LYREBYQ) for usage examples.\n\nAfter instantiation, [`fsElement`](#fselement-htmlelement-object-read-only) is available as a read-only property.\n\n#### `source` *HTMLMediaElement or AudioNode object*\n\nIf `source` is specified, connects an [*HTMLMediaElement*](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) (`\u003caudio\u003e` or `\u003cvideo\u003e` HTML element)\nor [*AudioNode*](https://developer.mozilla.org/en-US/docs/Web/API/AudioNode) object to the analyzer.\n\nAt least one audio source is required for the analyzer to work. You can also connect audio sources after instantiation, using the [`connectInput()`](#connectinput-source-) method.\n\n#### `start` *boolean*\n\nIf `start: false` is specified, the analyzer will be created stopped. You can then start it with the [`start()`](#start) or [`toggleAnalyzer()`](#toggleanalyzer-boolean-) methods.\n\nDefaults to **true**, so the analyzer will start running right after initialization.\n\n## Properties\n\n### `alphaBars` *boolean*\n\n*Available since v3.6.0*\n\nWhen set to *true* each bar's amplitude affects its opacity, i.e., higher bars are rendered more opaque while shorter bars are more transparent.\n\nThis is similar to the [`lumiBars`](#lumibars-boolean) effect, but bars' amplitudes are preserved and it also works on **Discrete** [mode](#mode-number) and [radial](#radial-boolean) spectrum.\n\nFor effect priority when combined with other settings, see [`isAlphaBars`](#isalphabars-boolean-read-only).\n\nDefaults to **false**.\n\n!\u003e [See related known issue](#alphabars-and-fillalpha-wont-work-with-radial-on-firefox)\n\n### `ansiBands` *boolean*\n\n*Available since v4.0.0*\n\nWhen set to *true*, ANSI/IEC preferred frequencies are used to generate the bands for **octave bands** modes (see [`mode`](#mode-number)).\nThe preferred base-10 scale is used to compute the center and bandedge frequencies, as specified in the [ANSI S1.11-2004 standard](https://archive.org/details/gov.law.ansi.s1.11.2004).\n\nWhen *false*, bands are based on the [equal-tempered scale](http://hyperphysics.phy-astr.gsu.edu/hbase/Music/et.html), so that in 1/12 octave bands\nthe center of each band is perfectly tuned to a musical note.\n\nansiBands | bands standard | octaves' center frequencies\n----------|----------------|----------------------------\nfalse     | Equal temperament (A-440 Hz) | ![scale-log-equal-temperament](img/scale-log-equal-temperament.png)\ntrue      | ANSI S1.11-2004 | ![scale-log-ansi](img/scale-log-ansi.png)\n\nDefaults to **false**.\n\n### `audioCtx` *AudioContext object* *(Read only)*\n\n[*AudioContext*](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext) used by **audioMotion-analyzer**.\n\nUse this object to create additional audio sources to be connected to the analyzer, like oscillator nodes, gain nodes and media streams.\n\nThe code fragment below creates an oscillator and a gain node using audioMotion's *AudioContext*, and then connects them to the analyzer:\n\n```js\nconst audioMotion = new AudioMotionAnalyzer( document.getElementById('container') ),\n      audioCtx    = audioMotion.audioCtx,\n      oscillator  = audioCtx.createOscillator(),\n      gainNode    = audioCtx.createGain();\n\noscillator.frequency.value = 440; // set 440Hz frequency\noscillator.connect( gainNode ); // connect oscillator -\u003e gainNode\n\ngainNode.gain.value = .5; // set volume to 50%\naudioMotion.connectInput( gainNode ); // connect gainNode -\u003e audioMotion\n\noscillator.start(); // play tone\n```\n\nYou can provide your own *AudioContext* via the [`audioCtx`](#audioctx-audiocontext-object) property in the [constructor](#constructor) options.\n\nSee also the [fluid demo](/demo/fluid.html) and the [multi-instance demo](/demo/multi.html) for more usage examples.\n\n### `barSpace` *number*\n\n*Available since v2.0.0*\n\nCustomize the spacing between bars in frequency bands modes (see [`mode`](#mode-number)).\n\nUse a value between 0 and 1 for spacing proportional to the band width. Values \u003e= 1 will be considered as a literal number of pixels.\n\nFor example, `barSpace = 0.5` will use half the width available to each band for spacing and half for the bar itself.\nOn the other hand, `barSpace = 2` will set a fixed spacing of 2 pixels, independent of the width of bars.\nPrefer proportional spacing to obtain consistent results among different resolutions and screen sizes.\n\n`barSpace = 0` will effectively show contiguous bars, except when [`ledBars`](#ledbars-boolean) is *true*, in which case a minimum spacing is enforced\n(this can be customized via [`setLedParams()`](#setledparams-params-) method).\n\nDefaults to **0.1**.\n\n### `bgAlpha` *number*\n\n*Available since v2.2.0*\n\nControls the opacity of the background, when [`overlay`](#overlay-boolean) and [`showBgColor`](#showbgcolor-boolean) are both set to *true*.\n\nIt must be a number between 0 (completely transparent) and 1 (completely opaque).\n\nDefaults to **0.7**.\n\n### `canvas` *HTMLCanvasElement object* *(Read only)*\n\n[*Canvas*](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) element where audioMotion renders its visualizations.\n\nSee also the [`canvas`](#canvas-htmlcanvaselement-object) constructor option.\n\n### `canvasCtx` *CanvasRenderingContext2D object* *(Read only)*\n\n[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).\n\n### `channelLayout` *string*\n\n*Available since v4.0.0*\n\nDefines the number and layout of analyzer channels.\n\nchannelLayout     | Description | Note\n------------------|-------------|------\n'single'          | Single channel analyzer, representing the combined output of both left and right channels.\n'dual-combined'   | Dual channel analyzer, both channels overlaid. Works best with semi-transparent **Graph** [`mode`](#mode-number) or [`outlineBars`](#outlinebars-boolean).\n'dual-horizontal' | Dual channel, side by side - see [`mirror`](#mirror-number) for additional layout options. | *since v4.3.0*\n'dual-vertical'   | Dual channel, left channel at the top half of the canvas and right channel at the bottom.\n\n!\u003e When a *dual* layout is selected, any mono (single channel) audio source connected to the analyzer will output sound only from the left speaker,\nunless a stereo source is simultaneously connected to the analyzer, which will force the mono input to be upmixed to stereo.\n\nSee also [`gradientLeft`](#gradientleft-string), [`gradientRight`](#gradientright-string) and [`splitGradient`](#splitgradient-boolean).\n\n### `colorMode` *string*\n\n*Available since v4.1.0*\n\nSelects the desired mode for coloring the analyzer bars. This property has no effect in **Graph** [`mode`](#mode-number).\n\ncolorMode   | Description | Preview ('prism' gradient)\n------------|-------------|----------------------------\n'gradient'  | Analyzer bars are painted with the currently selected [`gradient`](#gradient-string). This is the default behavior. | ![prism](img/gradient-prism.png)\n'bar-index' | Each analyzer bar is painted with a **single color** from the selected gradient's *colorStops*, starting with the first color applied to the first bar, and so on, cycling through the available colorStops. | ![prism-bar-index](img/gradient-prism-bar-index.png)\n'bar-level' | Colors from the selected gradient are used to paint each bar, according to its current level (amplitude). | ![prism-bar-level](img/gradient-prism-bar-level.png)\n\nSee also [`registerGradient()`](#registergradient-name-options-).\n\nDefaults to **'gradient'**.\n\n### `connectedSources` *array* *(Read only)*\n\n*Available since v3.0.0*\n\nAn array of *AudioNode* objects connected to the analyzer **input** via the [`source`](#source-htmlmediaelement-or-audionode-object) constructor option, or by using the [`connectInput()`](#connectinput-source-) method.\n\n### `connectedTo` *array* *(Read only)*\n\n*Available since v3.2.0*\n\nAn array of *AudioNode* objects to which the analyzer **output** is connected.\n\nBy default, **audioMotion-analyzer** is connected to the *AudioContext* `destination` node (the speakers) upon instantiation, unless you set [`connectSpeakers: false`](#connectspeakers-boolean) in the constructor options.\n\nSee also [`connectOutput()`](#connectoutput-node-).\n\n### `fadePeaks` *boolean*\n\n*Available since v4.5.0*\n\nWhen *true*, peaks fade out instead of falling down. It has no effect when [`peakLine`](#peakline-boolean) is active.\n\nFade time can be customized via [`peakFadeTime`](#peakfadetime-number).\n\nSee also [`peakHoldTime`](#peakholdtime-number) and [`showPeaks`](#showpeaks-boolean).\n\nDefaults to **false**.\n\n### `fftSize` *number*\n\nNumber of samples used for the FFT performed by the [*AnalyzerNode*](https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode).\nIt must be a power of 2 between 32 and 32768, so valid values are: 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192, 16384, and 32768.\n\nHigher values provide more detail in the frequency domain, but less detail in the time domain (slower response), so you may need to adjust [`smoothing`](#smoothing-number) accordingly.\n\nDefaults to **8192**.\n\n### `fillAlpha` *number*\n\n*Available since v2.0.0*\n\nOpacity of the area fill in [Graph mode](#mode-number), or inner fill of bars in [frequency bands modes](#mode-number) when [`outlineBars`](#outlinebars-boolean) is *true*.\n\nIt must be a number between 0 (completely transparent) and 1 (completely opaque).\n\nPlease note that the line stroke (when [`lineWidth`](#linewidth-number) \u003e 0) is always drawn at full opacity, regardless of the `fillAlpha` value.\n\nAlso, for [frequency bands modes](#mode-number), [`alphaBars`](#alphabars-boolean) set to *true* takes precedence over `fillAlpha`.\n\nDefaults to **1**.\n\n!\u003e [See related known issue](#alphabars-and-fillalpha-wont-work-with-radial-on-firefox)\n\n### `fps` *number* *(Read only)*\n\nCurrent frame rate.\n\n### `frequencyScale` *string*\n\n*Available since v4.0.0*\n\nScale used to represent frequencies in the horizontal axis.\n\nfrequencyScale | description | scale preview (10Hz - 24kHz range)\n---------------|-------------|-----------------------------------\n'bark' | Bark scale | ![scale-bark](img/scale-bark.png)\n'linear' | Linear scale | ![scale-linear](img/scale-linear.png)\n'log' | Logarithmic scale | ![scale-log-ansi](img/scale-log-ansi.png)\n'mel' | Mel scale | ![scale-mel](img/scale-mel.png)\n\nLogarithmic scale allows visualization of proper **octave bands** (see [`mode`](#mode-number)) and it's also recommended when using [`noteLabels`](#notelabels-boolean).\n\n[*Bark*](https://en.wikipedia.org/wiki/Bark_scale) and [*Mel*](https://en.wikipedia.org/wiki/Mel_scale) are perceptual pitch scales, which may provide better visualization of mid-range frequencies, when compared to log or linear scales.\n\nDefaults to **'log'**.\n\n### `fsElement` *HTMLElement object* *(Read only)*\n\n*Available since v3.4.0*\n\nHTML element affected by the [`toggleFullscreen()`](#togglefullscreen) method.\n\nSee [`fsElement`](#fselement-htmlelement-object) in the constructor options context for more information.\n\n### `fsHeight` *number* *(Read only)*\n### `fsWidth` *number* *(Read only)*\n\nCanvas dimensions used during fullscreen mode. These take the current pixel ratio into account and will change accordingly when [low-resolution mode](#lores-boolean) is set.\n\n### `gradient` *string*\n\nName of the color gradient used for analyzer graphs.\n\nIt must be a built-in or registered gradient name (see [`registerGradient()`](#registergradient-name-options-)).\n\n`gradient` sets the gradient for both analyzer channels, but its read value represents only the gradient on the left (or single) channel.\n\nWhen using a dual [`channelLayout`](#channellayout-string), use [`gradientLeft`](#gradientleft-string) and [`gradientRight`](#gradientright-string) to set/read the gradient on each channel individually.\n\nBuilt-in gradients are shown below:\n\ngradient    | preview\n------------|---------\n'classic'   | ![classic](img/gradient-classic.png)\n'orangered' | ![orangered](img/gradient-orangered.png)\n'prism'     | ![prism](img/gradient-prism.png)\n'rainbow'   | ![rainbow](img/gradient-rainbow.png)\n'steelblue' | ![steelblue](img/gradient-steelblue.png)\n\nSee also [`splitGradient`](#splitgradient-boolean).\n\nDefaults to **'classic'**.\n\n### `gradientLeft` *string*\n### `gradientRight` *string*\n\n*Available since v4.0.0*\n\nSelect gradients for the left and right analyzer channels independently, for use with a dual [`channelLayout`](#channellayout-string).\n\n**_Single_** channel layout will use the gradient selected by `gradientLeft`.\n\nFor **_dual-combined_** channel layout or [`radial`](#radial-boolean) spectrum, only the background color defined by `gradientLeft` will be applied when [`showBgColor`](#showbgcolor-boolean) is *true*.\n\nSee also [`gradient`](#gradient-string) and [`splitGradient`](#splitgradient-boolean).\n\n### `gravity` *number*\n\n*Available since v4.5.0*\n\nCustomize the acceleration of falling peaks.\n\nIt must be a number **greater than zero,** representing _thousands of pixels per second squared_. Invalid values are ignored and no error is thrown.\n\nWith the default value and analyzer height of 1080px, a peak at maximum amplitude takes approximately 750ms to fall to zero.\n\nYou can use the [peak drop analysis tool](/tools/peak-drop.html) to see the decay curve for different values of gravity.\n\nSee also [`peakHoldTime`](#peakholdtime-number) and [`showPeaks`](#showpeaks-boolean).\n\nDefaults to **3.8**.\n\n### `height` *number*\n### `width` *number*\n\nNominal dimensions of the analyzer.\n\nSetting 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.\nIn that case, it's important that you constrain the dimensions of the container via CSS to prevent the canvas from growing indefinitely.\n\nYou can set both values at once using the [`setCanvasSize()`](#setcanvassize-width-height-) method.\n\nSee also [`onCanvasResize`](#oncanvasresize-function).\n\n?\u003e 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.\n\n### `isAlphaBars` *boolean* *(Read only)*\n\n*Available since v3.6.0*\n\n***true*** when alpha bars are effectively being displayed, i.e., [`alphaBars`](#alphabars-boolean) is set to *true* and [`mode`](#mode-number) is set to discrete frequencies\nor one of the frequency bands modes, in which case [`lumiBars`](#lumibars-boolean) must be set to *false* or [`radial`](#radial-boolean) must be set to *true*.\n\n### `isBandsMode` *boolean* *(Read only)*\n\n*Available since v4.0.0*\n\n***true*** when [`mode`](#mode-number) is set to one of the bands mode (modes 1 to 8).\n\nSee also [`isOctaveBands`](#isoctavebands-boolean-read-only).\n\n### `isDestroyed` *boolean* *(Read only)*\n\n*Available since v4.2.0*\n\n***true*** when the object has been destroyed with [`destroy()`](#destroy).\n\n### `isFullscreen` *boolean* *(Read only)*\n\n***true*** when the analyzer is being displayed in fullscreen, or ***false*** otherwise.\n\nSee [`toggleFullscreen()`](#togglefullscreen).\n\n### `isLedBars` *boolean* *(Read only)*\n\n*Available since v3.6.0; formerly `isLedDisplay` (since v3.0.0)*\n\n***true*** when LED bars are effectively being displayed, i.e., [`isBandsMode`](#isbandsmode-boolean-read-only) is *true*, [`ledBars`](#ledBars-boolean) is set to *true* and [`radial`](#radial-boolean) is set to *false*.\n\n### `isLumiBars` *boolean* *(Read only)*\n\n*Available since v3.0.0*\n\n***true*** when luminance bars are effectively being displayed, i.e., [`isBandsMode`](#isbandsmode-boolean-read-only) is *true*, [`lumiBars`](#lumibars-boolean) is set to *true* and [`radial`](#radial-boolean) is set to *false*.\n\n### `isOctaveBands` *boolean* *(Read only)*\n\n*Available since v3.0.0*\n\n***true*** when [`isBandsMode`](#isbandsmode-boolean-read-only) is *true* and [`frequencyScale`](#frequencyscale-string) is set to *'log'*.\n\n### `isOn` *boolean* *(Read only)*\n\n***true*** if the analyzer process is running, or *false* if it's stopped.\n\nSee [`start()`](#start), [`stop()`](#stop) and [`toggleAnalyzer()`](#toggleanalyzer-boolean-).\n\n### `isOutlineBars` *boolean* *(Read only)*\n\n*Available since v3.6.0*\n\n***true*** when outlined bars are effectively being displayed, i.e., [`isBandsMode`](#isbandsmode-boolean-read-only) is *true*, [`outlineBars`](#outlinebars-boolean) is set to *true*\nand both [`ledBars`](#ledbars-boolean) and [`lumiBars`](#lumibars-boolean) are set to *false*, or [`radial`](#radial-boolean) is set to *true*.\n\n### `isRoundBars` *boolean* *(Read only)*\n\n*Available since v4.1.0*\n\n***true*** when round bars are effectively being displayed, i.e., [`isBandsMode`](#isbandsmode-boolean-read-only) is *true*, [`roundBars`](#roundbars-boolean) is set to *true*\nand [`ledBars`](#ledbars-boolean) and [`lumiBars`](#lumibars-boolean) are both set to *false*.\n\n### `ledBars` *boolean*\n\n*Available since v3.6.0; formerly `showLeds` (since v1.0.0)*\n\n*true* to activate the LED bars effect for frequency bands modes (see [`mode`](#mode-number)).\n\nThis effect can be customized via [`setLedParams()`](#setledparams-params-) method.\n\nFor effect priority when combined with other settings, see [`isLedBars`](#isledbars-boolean-read-only).\n\nSee also [`trueLeds`](#trueleds-boolean).\n\nDefaults to **false**.\n\n### `linearAmplitude` *boolean*\n\n*Available since v4.0.0*\n\nWhen set to *true*, spectrum amplitudes are represented in linear scale instead of decibels (logarithmic).\n\nThis may improve the visualization of predominant tones, especially at higher frequencies, but it will make the entire spectrum look much quieter.\n\nSee also [`linearBoost`](#linearboost-number).\n\nDefaults to **false**.\n\n### `linearBoost` *number*\n\n*Available since v4.0.0*\n\nPerforms an *n*th-root operation to amplify low energy values when using linear scale for the amplitude.\n\nIt should be a number \u003e= 1, while 1 means no boosting. Only effective when [`linearAmplitude`](#linearamplitude-boolean) is set to *true*.\n\nDefaults to **1**.\n\n### `lineWidth` *number*\n\n*Available since v2.0.0*\n\nLine width for [Graph mode](#mode-number), or outline stroke in [frequency bands modes](#mode-number) when [`outlineBars`](#outlinebars-boolean) is *true*.\n\nFor the line to be distinguishable, set also [`fillAlpha`](#fillalpha-number) \u003c 1.\n\nDefaults to **0**.\n\n### `loRes` *boolean*\n\n*true* for low resolution mode. Defaults to **false**.\n\nLow resolution mode halves the effective pixel ratio, resulting in four times less pixels to render. This may improve performance significantly, especially in 4K+ monitors.\n\n?\u003e If you want to allow users to interactively toggle low resolution mode, you may need to set a fixed size for the canvas via CSS, like so:\n\n```css\ncanvas {\n    display: block;\n    width: 100%;\n}\n```\n\nThis will prevent the canvas size from changing, when switching the low resolution mode on and off.\n\n### `lumiBars` *boolean*\n\n*Available since v1.1.0*\n\nThis is only effective for frequency bands modes (see [`mode`](#mode-number)).\n\nWhen set to *true* all analyzer bars will be displayed at full height with varying luminance (opacity, actually) instead.\n\n`lumiBars` takes precedence over [`alphaBars`](#alphabars-boolean) and [`outlineBars`](#outlinebars-boolean), except on [`radial`](#radial-boolean) spectrum.\n\nFor effect priority when combined with other settings, see [`isLumiBars`](#islumibars-boolean-read-only).\n\nDefaults to **false**.\n\n### `maxDecibels` *number*\n### `minDecibels` *number*\n\nHighest and lowest decibel values represented in the Y-axis of the analyzer. The loudest volume possible is **0**.\n\nYou can set both values at once using the [`setSensitivity()`](#setsensitivity-mindecibels-maxdecibels-) method.\n\nFor more info, see [AnalyserNode.minDecibels](https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/minDecibels).\n\n*minDecibels* defaults to **-85** and *maxDecibels* defaults to **-25**.\n\n### `maxFPS` *number*\n\n*Available since v4.2.0*\n\nSets the maximum desired animation frame rate. This can help reducing CPU usage, especially on high refresh rate monitors.\n\nIt must be a number, indicating frames per second. A value of **0** means the animation will run at the highest frame rate possible.\n\nDefaults to **0**.\n\n### `maxFreq` *number*\n### `minFreq` *number*\n\nHighest and lowest frequencies represented in the X-axis of the analyzer. Values in Hertz.\n\nThe minimum allowed value is **1**. Trying to set a lower value will throw an `ERR_FREQUENCY_TOO_LOW` [error](#custom-errors).\n\nThe maximum allowed value is half the sampling rate ([`audioCtx.sampleRate`](#audioctx-audiocontext-object-read-only)), known as the [Nyquist frequency](https://en.wikipedia.org/wiki/Nyquist_frequency).\nValues higher than that will be capped.\n\nIt is preferable to use the [`setFreqRange()`](#setfreqrange-minfreq-maxfreq-) method and set both values at once, to prevent `minFreq` being higher than the current `maxFreq` or vice-versa at a given moment.\n\n*minFreq* defaults to **20** and *maxFreq* defaults to **22000**.\n\n### `mirror` *number*\n\n*Available since v3.3.0*\n\nWhen [`channelLayout`](#channellayout-string) is **dual-horizontal**, this property controls the orientation of the X-axis (frequencies) on both channels.\n\nFor other layouts, it horizontally mirrors the spectrum image to the left or right side.\n\nValid values are:\n\nmirror | Description\n:-----:|-------------\n-1     | Low frequencies meet at the center of the screen (mirror left)\n0      | No mirror effect or change to axis orientation (default)\n1      | High frequencies meet at the center of the screen (mirror right)\n\n**Note:** On [`radial`](#radial-boolean) spectrum with channel layouts other than *dual-horizontal*, both `1` and `-1` have the same effect.\n\nDefaults to **0**.\n\n### `mode` *number*\n\nVisualization mode.\n\nmode | description | notes\n----:|:-----------:|------\n0 | Discrete frequencies | *default*\n1 | 1/24th octave bands or 240 bands | *use 'log' `frequencyScale` for octave bands*\n2 | 1/12th octave bands or 120 bands | *use 'log' `frequencyScale` for octave bands*\n3 | 1/8th octave bands or 80 bands | *use 'log' `frequencyScale` for octave bands*\n4 | 1/6th octave bands or 60 bands | *use 'log' `frequencyScale` for octave bands*\n5 | 1/4th octave bands or 40 bands | *use 'log' `frequencyScale` for octave bands*\n6 | 1/3rd octave bands or 30 bands | *use 'log' `frequencyScale` for octave bands*\n7 | Half octave bands or 20 bands | *use 'log' `frequencyScale` for octave bands*\n8 | Full octave bands or 10 bands | *use 'log' `frequencyScale` for octave bands*\n9 | *(not valid)* | *reserved*\n10 | Graph | *since v1.1.0*\n\n+ **Mode 0** provides the highest resolution, allowing you to visualize individual frequencies as provided by the [FFT](https://en.wikipedia.org/wiki/Fast_Fourier_transform) computation;\n+ **Modes 1 - 8** divide the frequency spectrum in bands; when using the default **logarithmic** [`frequencyScale`](#frequencyscale-string), each band represents the *n*th part of an octave; otherwise, a fixed number of bands is used for each mode;\n+ **Mode 10** uses the discrete FFT data points to draw a continuous line and/or a filled area graph (see [`fillAlpha`](#fillalpha-number) and [`lineWidth`](#linewidth-number) properties).\n\nSee also [`ansiBands`](#ansibands-boolean).\n\nDefaults to **0**.\n\n### `noteLabels` *boolean*\n\n*Available since v4.0.0*\n\nWhen set to *true* displays musical note labels instead of frequency values, in the X axis (when [`showScaleX`](#showscalex-boolean) is also set to *true*).\n\nFor best visualization in [octave bands modes](#mode-number), make sure [`frequencyScale`](#frequencyscale-string) is set to *'log'*\nand [`ansiBands`](#ansibands-boolean) is set to *false*, so bands are tuned to the equal temperament musical scale.\n\nDefaults to **false**.\n\n### `outlineBars` *boolean*\n\n*Available since v3.6.0*\n\nWhen *true* and [`mode`](#mode-number) is set to one of the **bands** modes, analyzer bars are rendered outlined, with customizable [`fillAlpha`](#fillalpha-number) and [`lineWidth`](#linewidth-number).\n\nFor effect priority when combined with other settings, see [`isOutlineBars`](#isoutlinebars-boolean-read-only).\n\nDefaults to **false**.\n\n### `overlay` *boolean*\n\n*Available since v2.2.0*\n\nAllows the analyzer to be displayed over other content, by making the canvas background transparent, when set to *true*.\n\nWhen [`showBgColor`](#showbgcolor-boolean) is also *true*, [`bgAlpha`](#bgalpha-number) controls the background opacity.\n\nDefaults to **false**.\n\n?\u003e In order to keep elements other than the canvas visible in fullscreen, you'll need to set the [`fsElement`](#fselement-htmlelement-object) property in the [constructor](#constructor) options.\n\n### `peakFadeTime` *number*\n\n*Available since v4.5.0*\n\nTime in milliseconds for peaks to completely fade out, when [`fadePeaks`](#fadepeaks-boolean) is active.\n\nIt must be a number greater than or equal to zero. Invalid values are ignored and no error is thrown.\n\nSee also [`peakHoldTime`](#peakholdtime-number) and [`showPeaks`](#showpeaks-boolean).\n\nDefaults to **750**.\n\n### `peakHoldTime` *number*\n\n*Available since v4.5.0*\n\nTime in milliseconds for peaks to hold their value before they begin to fall or fade.\n\nIt must be a number greater than or equal to zero. Invalid values are ignored and no error is thrown.\n\nSee also [`fadePeaks`](#fadepeaks-boolean), [`gravity`](#gravity-number), [`peakFadeTime`](#peakfadetime-number) and [`showPeaks`](#showpeaks-boolean).\n\nDefaults to **500**.\n\n### `peakLine` *boolean*\n\n*Available since v4.2.0*\n\nWhen *true* and [`mode`](#mode-number) is *10* (**Graph**) and [`showPeaks`](#showpeaks-boolean) is *true*, peaks are connected into a continuous line. It has no effect in other modes.\n\nDefaults to **false**.\n\n### `pixelRatio` *number* *(Read only)*\n\nCurrent [devicePixelRatio](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio).\nThis is usually **1** for standard displays and **2** for retina / Hi-DPI screens.\n\nWhen [`loRes`](#lores-boolean) is *true*, the value of `pixelRatio` is halved, i.e. **0.5** for standard displays and **1** for retina / Hi-DPI.\n\nYou can refer to this value to adjust any additional drawings done in the canvas (via [callback function](#oncanvasdraw-function)).\n\n### `radial` *boolean*\n\n*Available since v2.4.0*\n\nWhen *true*, the spectrum analyzer is rendered in a circular shape, with radial frequency bars spreading from its center.\n\nIn radial view, [`ledBars`](#ledbars-boolean) and [`lumiBars`](#lumibars-boolean) effects are disabled.\n\nWhen [`channelLayout`](#channellayout-string) is set to *'dual-vertical'*, graphs for the right channel are rendered towards the center of the screen.\n\nSee also [`radialInvert`](#radialinvert-boolean), [`radius`](#radius-number) and [`spinSpeed`](#spinspeed-number).\n\nDefaults to **false**.\n\n!\u003e [See related known issue](#alphabars-and-fillalpha-wont-work-with-radial-on-firefox)\n\n### `radialInvert` *boolean*\n\n*Available since v4.4.0*\n\nWhen 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.\n\nThis property has no effect when [`channelLayout`](#channellayout-string) is set to *'dual-vertical'*.\n\nSee also [`radius`](#radius-number).\n\nDefaults to **false**.\n\n### `radius` *number*\n\n*Available since v4.4.0*\n\nDefines the internal radius of [`radial`](#radial-boolean) spectrum. It should be a number between **0** and **1**.\n\nThis property has no effect when [`channelLayout`](#channellayout-string) is set to *'dual-vertical'*.\n\nWhen [`radialInvert`](#radialinvert-boolean) is *true*, this property controls how close to the center of the screen the bars can get.\n\nDefaults to **0.3**.\n\n### `reflexAlpha` *number*\n\n*Available since v2.1.0*\n\nReflection opacity (when [`reflexRatio`](#reflexratio-number) \u003e 0).\n\nIt must be a number between 0 (completely transparent) and 1 (completely opaque).\n\nDefaults to **0.15**.\n\n### `reflexBright` *number*\n\n*Available since v2.3.0*\n\nReflection brightness (when [`reflexRatio`](#reflexratio-number) \u003e 0).\n\nIt must be a number. Values below 1 darken the reflection and above 1 make it brighter.\nA value of 0 will render the reflected image completely black, while a value of 1 will preserve the original brightness.\n\nDefaults to **1**.\n\n!\u003e [See related known issue](#reflexbright-wont-work-on-some-browsers)\n\n### `reflexFit` *boolean*\n\n*Available since v2.1.0*\n\nWhen *true*, the reflection will be adjusted (stretched or shrinked) to fit the canvas. If set to *false* the reflected image may be cut at the bottom (when [`reflexRatio`](#reflexratio-number) \u003c 0.5) or not fill the entire canvas (when [`reflexRatio`](#reflexratio-number) \u003e 0.5).\n\nDefaults to **true**.\n\n### `reflexRatio` *number*\n\n*Available since v2.1.0*\n\nPercentage of canvas height used for reflection. It must be a number greater than or equal to 0, and less than 1. Trying to set a value out of this range will throw an `ERR_REFLEX_OUT_OF_RANGE` [error](#custom-errors).\n\nFor a perfect mirrored effect, set `reflexRatio` to 0.5 and both [`reflexAlpha`](#reflexalpha-number) and [`reflexBright`](#reflexbright-number) to 1.\n\nThis has no effect when [`lumiBars`](#lumibars-boolean) is *true*.\n\nDefaults to **0** (no reflection).\n\n### `roundBars` *boolean*\n\n*Available since v4.1.0*\n\nWhen *true* and [`mode`](#mode-number) is set to one of the **bands** modes, analyzer bars are rendered with rounded corners at the top.\n\nIn [`radial`](#radial-boolean) view this makes the top and bottom of bars to follow the curvatures of the outer and inner circles, respectivelly, although the effect\ncan be barely noticeable with a band count greater than 20 (half-octave bands).\n\nThis has no effect when [`ledBars`](#ledbars-boolean) or [`lumiBars`](#lumibars-boolean) are set to *true*.\n\nSee also [`isRoundBars`](#isroundbars-boolean-read-only).\n\nDefaults to **false**.\n\n### `showBgColor` *boolean*\n\nDetermines whether the canvas background should be painted.\n\nIf ***true***, the background color defined by the current gradient will be used.\nOpacity can be adjusted via [`bgAlpha`](#bgalpha-number) property, when [`overlay`](#overlay-boolean) is ***true***.\n\nIf ***false***, the canvas background will be painted black when [`overlay`](#overlay-boolean) is ***false***,\nor transparent when [`overlay`](#overlay-boolean) is ***true***.\n\nSee also [`registerGradient()`](#registergradient-name-options-).\n\nDefaults to **true**.\n\n?\u003e Please note that when [`overlay`](#overlay-boolean) is ***false*** and [`ledBars`](#ledbars-boolean) is ***true***, the background color will always be black,\nand setting `showBgColor` to ***true*** will make the \"unlit\" LEDs visible instead.\n\n### `showFPS` *boolean*\n\n*true* to display the current frame rate. Defaults to **false**.\n\n### `showPeaks` *boolean*\n\n*true* to show amplitude peaks.\n\nSee also [`gravity`](#gravity-number), [`peakFadeTime`](#peakfadetime-number), [`peakHoldTime`](#peakholdtime-number) and [`peakLine`](#peakline-boolean).\n\nDefaults to **true**.\n\n### `showScaleX` *boolean*\n\n*Available since v3.0.0; formerly `showScale` (since v1.0.0)*\n\n*true* to display scale labels on the X axis.\n\nSee also [`noteLabels`](#notelabels-boolean).\n\nDefaults to **true**.\n\n### `showScaleY` *boolean*\n\n*Available since v2.4.0*\n\n*true* to display the level/amplitude scale on the Y axis.\n\nThis option has no effect when [`radial`](#radial-boolean) or [`lumiBars`](#lumibars-boolean) are set to *true*.\n\nWhen [`linearAmplitude`](#linearamplitude-boolean) is set to *false* (default), labels are shown in decibels (dB);\notherwise, values represent a percentage (0-100%) of the maximum amplitude.\n\nSee also [`minDecibels`](#mindecibels-number) and [`maxDecibels`](#maxdecibels-number).\n\nDefaults to **false**.\n\n### `smoothing` *number*\n\nSets the analyzer's [smoothingTimeConstant](https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/smoothingTimeConstant).\n\nIt must be a number between 0 and 1. Lower values make the analyzer respond faster to changes.\n\nDefaults to **0.5**.\n\n### `spinSpeed` *number*\n\n*Available since v2.4.0*\n\nWhen [`radial`](#radial-boolean) is *true*, this property defines the analyzer rotation speed, in revolutions per minute.\n\nPositive values will make the analyzer rotate clockwise, while negative values will make it rotate counterclockwise. A value of 0 results in no rotation.\n\nDefaults to **0**.\n\n### `splitGradient` *boolean*\n\n*Available since v3.0.0*\n\nWhen set to *true* and [`channelLayout`](#channellayout-string) is **_dual-vertical_**, the gradient will be split between channels.\n\nWhen *false*, both channels will use the full gradient. The effect is illustrated below, using the *'classic'* gradient.\n\n| splitGradient: *false* | splitGradient: *true* |\n|:--:|:--:|\n| ![split-off](img/splitGradient_off.png) | ![split-on](img/splitGradient_on.png) |\n\nThis option has no effect on horizontal gradients, except on [`radial`](#radial-boolean) spectrum - see note in [`registerGradient()`](#registergradient-name-options-).\n\nDefaults to **false**.\n\n### `stereo` **(DEPRECATED)** *boolean*\n\n**This property will be removed in version 5** - Use [`channelLayout`](#channellayout-string) instead.\n\n### `trueLeds` *boolean*\n\n*Available since v4.1.0*\n\nWhen set to *true*, LEDs are painted with individual colors from the current gradient, instead of using the gradient itself.\n\nThe effect is illustrated below, using the *'classic'* gradient.\n\n| trueLeds: *false* | trueLeds: *true* |\n|:--:|:--:|\n| ![split-off](img/trueleds_off.png) | ![split-on](img/trueleds_on.png) |\n\nThe threshold for each color can be adjusted via the `level` property when registering a gradient. See [`registerGradient()`](#registergradient-name-options-).\n\nThis option is only effective for frequency bands [modes](#mode-number), when [`ledBars`](#ledbars-boolean) is *true* and [`colorMode`](#colormode-string) is set to *'gradient'*.\n\nDefaults to **false**.\n\n### `useCanvas` *boolean*\n\n*Available since v3.5.0*\n\nWhen set to *false*, analyzer graphics are not rendered to the [`canvas`](#canvas-htmlcanvaselement-object-read-only).\nSetting it to *false* in the [**constructor**](#constructor) options also prevents the canvas from being added to the document/container.\n\nPlease note that the analyzer processing runs regardless of the value of `useCanvas` and any callback defined for [`onCanvasDraw`](#oncanvasdraw-function)\nwill still be triggered on every animation frame, so you can use the [`getBars()`](#getbars) method to create your own visualizations.\n\nIf you want to completely stop the analyzer's data processing, see [`stop()`](#stop).\n\nDefaults to **true**.\n\n### `volume` *number*\n\n*Available since v3.0.0*\n\nRead or set the output volume.\n\nA value of **0** (zero) will mute the sound output, while a value of **1** will keep the same input volume.\nHigher values can be used to amplify the input, but it may cause distortion.\n\nPlease note that changing the audio element volume directly will affect the amplitude of analyzer graphs, while this property does not.\n\nDefaults to **1**.\n\n### `weightingFilter` *string*\n\n*Available since v4.0.0*\n\n[Weighting filter](https://en.wikipedia.org/wiki/Weighting_filter) applied to frequency data for spectrum visualization.\n\n?\u003e Selecting a weighting filter **does NOT** affect the audio output.\n\nEach filter applies a different curve of gain/attenuation to specific frequency ranges, but the general idea is to adjust the\nvisualization of frequencies to which the human ear is more or less sensitive.\n\nRefer to the [weighting filters viewer tool](/tools/weighting-filters.html) for response tables and an interactive version of the curves graph seen below.\n\n\u003cimg src=\"img/weigthing-filters-curves.png\" class=\"align-right\"\u003e\n\nweightingFilter | description\n------|------------------------------\n'' (empty string) | No weighting applied (default)\n'A'   | A-weighting\n'B'   | B-weighting\n'C'   | C-weighting\n'D'   | D-weighting\n'468' | ITU-R 468 weighting\n\nDefaults to **''**.\n\n\n## Static properties\n\n### `AudioMotionAnalyzer.version` *string* *(Read only)*\n\n*Available since v3.0.0*\n\nReturns the version of the **audioMotion-analyzer** package.\n\nSince this is a static property, you should always access it as `AudioMotionAnalyzer.version` - this allows you to check the package version even before instantiating your object.\n\n\n## Callback functions\n\n### `onCanvasDraw` *function*\n\nIf defined, this function will be called after **audioMotion-analyzer** finishes rendering each animation frame.\n\nThe callback function is passed two arguments: an *AudioMotionAnalyzer* object, and an object with the following properties:\n- `timestamp`, a [*DOMHighResTimeStamp*](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp)\nwhich indicates the elapsed time in milliseconds since the analyzer started running;\n- `canvasGradients`, an array of [*CanvasGradient*](https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient])\nobjects currently in use on the left (or single) and right analyzer channels.\n\nThe canvas properties `fillStyle` and `strokeStyle` will be set to the left/single channel gradient before the function is called.\n\nUsage example:\n\n```js\nconst audioMotion = new AudioMotionAnalyzer(\n    document.getElementById('container'),\n    {\n        source: document.getElementById('audio'),\n        onCanvasDraw: drawCallback\n    }\n);\n\nfunction drawCallback( instance, info ) {\n    const baseSize  = ( instance.isFullscreen ? 40 : 20 ) * instance.pixelRatio,\n          canvas    = instance.canvas,\n          centerX   = canvas.width / 2,\n          centerY   = canvas.height / 2,\n          ctx       = instance.canvasCtx,\n          maxHeight = centerY / 2,\n          maxWidth  = centerX - baseSize * 5,\n          time      = info.timestamp / 1e4;\n\n    // the energy value is used here to increase the font size and make the logo pulsate to the beat\n    ctx.font = `${ baseSize + instance.getEnergy() * 25 * instance.pixelRatio }px Orbitron, sans-serif`;\n\n    // use the right-channel gradient to fill text\n    ctx.fillStyle = info.canvasGradients[1];\n    ctx.textAlign = 'center';\n    ctx.globalCompositeOperation = 'lighter';\n\n    // the timestamp can be used to create effects and animations based on the elapsed time\n    ctx.fillText( 'audioMotion', centerX + maxWidth * Math.cos( time % Math.PI * 2 ), centerY + maxHeight * Math.sin( time % Math.PI * 16 ) );\n}\n```\n\nFor more examples, see the fluid demo [source code](https://github.com/hvianna/audioMotion-analyzer/blob/master/demo/fluid.js) or [this pen](https://codepen.io/hvianna/pen/LYZwdvG).\n\n### `onCanvasResize` *function*\n\nIf defined, this function will be called whenever the canvas is resized.\n\nThe callback function is passed two arguments: a string which indicates the reason that triggered the call (see below) and the *AudioMotionAnalyzer* object.\n\nReason | Description\n-------|------------\n`'create'` | canvas created by the **audioMotion-analyzer** [constructor](#constructor)\n`'fschange'` | analyzer entered or left fullscreen mode\n`'lores'` | [low resolution option](#lores-boolean) toggled on or off\n`'resize'` | browser window or canvas container element were resized\n`'user'` | canvas dimensions changed by user script, via [`height`](#height-number) and [`width`](#width-number) properties, [`setCanvasSize()`](#setcanvassize-width-height-) or [`setOptions()`](#setoptions-options-) methods\n\n?\u003e As of [version 2.5.0](https://github.com/hvianna/audioMotion-analyzer/releases/tag/2.5.0), the `'resize'` reason is no longer sent on fullscreen changes and\nthe callback is triggered only when canvas dimensions *effectively* change from the previous state.\n\nUsage example:\n\n```js\nconst audioMotion = new AudioMotionAnalyzer(\n    document.getElementById('container'),\n    {\n        source: document.getElementById('audio'),\n        onCanvasResize: ( reason, instance ) =\u003e {\n            console.log( `[${reason}] canvas size is: ${instance.canvas.width} x ${instance.canvas.height}` );\n        }\n    }\n);\n```\n\n## Methods\n\n### `connectInput( source )`\n\n*Available since v3.0.0*\n\nConnects an [HTMLMediaElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) or an [AudioNode](https://developer.mozilla.org/en-US/docs/Web/API/AudioNode)\n(or any of its descendants) to the analyzer.\n\nIf `source` is an *HTMLMediaElement*, the method returns a [MediaElementAudioSourceNode](https://developer.mozilla.org/en-US/docs/Web/API/MediaElementAudioSourceNode) created\nfor that element; if `source` is an *AudioNode* instance, it returns the `source` object itself; if it's neither an [ERR_INVALID_AUDIO_SOURCE](#custom-errors) error is thrown.\n\nSee also [`disconnectInput()`](#disconnectinput-node-stoptracks-) and [`connectedSources`](#connectedsources-array-read-only).\n\n### `connectOutput( [node] )`\n\n*Available since v3.0.0*\n\nThis method allows connecting the analyzer **output** to other audio processing modules that use the Web Audio API.\n\n`node` must be an [*AudioNode*](https://developer.mozilla.org/en-US/docs/Web/API/AudioNode) instance.\n\nBy default, the analyzer is connected to the speakers upon instantiation, unless you set [`connectSpeakers: false`](#connectspeakers-boolean) in the constructor options.\n\nSee also [`disconnectOutput()`](#disconnectoutput-node-) and [`connectedTo`](#connectedto-array-read-only).\n\n?\u003e If called with no argument, analyzer output is connected to the speakers (the *AudioContext* `destination` node).\n\n### `destroy()`\n\n*Available since v4.2.0*\n\nDestroys the **audioMotion-analyzer** instance and release resources. A destroyed analyzer cannot be started again.\n\nThis method:\n\n+ Stops the analyzer data processing and animation;\n+ Disconnects all input and output nodes;\n+ Clears event listeners and callback functions;\n+ Stops the *AudioContext* created by this instance (won't affect context provided to the [constructor](#constructor) via [`audioCtx`](#audioctx-audiocontext-object) property or an *AudioNode* [`source`](#source-htmlmediaelement-or-audionode-object));\n+ Removes the [`canvas`](#canvas-htmlcanvaselement-object-read-only) from the DOM.\n\nSee usage example in the [minimal demo](/demo/minimal.html).\n\nSee also [`isDestroyed`](#isdestroyed-boolean-read-only).\n\n### `disconnectInput( [node], [stopTracks] )`\n\n*Available since v3.0.0; `stopTracks` parameter since v4.2.0*\n\nDisconnects audio source nodes previously connected to the analyzer.\n\n`node` may be an *AudioNode* instance or an **array** of such objects. If it's **undefined** (or any [*falsy*](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) value),\n**all connected sources are disconnected.**\n\n`stopTracks` is a boolean value; if **true**, permanently stops all audio tracks from any [*MediaStream*](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream)s being\ndisconnected, e.g. a microphone. Use it to effectively release the stream if it's no longer needed.\n\nPlease note that when you have connected an `\u003caudio\u003e` or `\u003cvideo\u003e` element, you need to disconnect the respective [MediaElementAudioSourceNode](https://developer.mozilla.org/en-US/docs/Web/API/MediaElementAudioSourceNode)\ncreated for it. The node reference is returned by [`connectInput()`](#connectinput-source-), or can be obtained from [`connectedSources`](#connectedsources-array-read-only)\nif the element was connected via [`source`](#source-htmlmediaelement-or-audionode-object) constructor option.\n\n### `disconnectOutput( [node] )`\n\n*Available since v3.0.0*\n\nDisconnects the analyzer output from previously connected audio nodes.\n\n`node` must be a connected *AudioNode*.\n\nSee also [`connectOutput()`](#connectoutput-node-).\n\n?\u003e If called with no argument, analyzer output is disconnected from all nodes, **including the speakers!**\n\n### `getBars()`\n\n*Available since v3.5.0*\n\nReturns an array with current data for each analyzer bar. Each array element is an object with the format below:\n\n```js\n{\n\tposX: \u003cnumber\u003e,   // horizontal position of this bar on the canvas\n\tfreq: \u003cnumber\u003e,   // center frequency for this bar (added in v4.0.0)\n\tfreqLo: \u003cnumber\u003e, // lower edge frequency\n\tfreqHi: \u003cnumber\u003e, // upper edge frequency\n\tpeak: \u003carray\u003e,    // peak values for left and right channels\n\thold: \u003carray\u003e,    // peak hold frames for left and right channels - values \u003c 0 mean the peak is falling down\n\tvalue: \u003carray\u003e    // current amplitude on left and right channels\n}\n```\n\n`peak` and `value` elements are floats between 0 and 1, relative to the lowest and highest volume levels defined by [`minDecibels`](#mindecibels-number) and [`maxDecibels`](#maxdecibels-number).\n\n`hold` values are integers and indicate the hold time (in frames) for the current peak. The maximum value is 30 and means the peak has just been set, while negative values mean the peak is currently falling down.\n\nPlease note that `hold` and `value` will have only one element when [`channelLayout`](#channellayout-string) is set to *'single'*, but `peak` is always a two-element array.\n\nYou can use this method to create your own visualizations using the analyzer data. See [this pen](https://codepen.io/hvianna/pen/ZEKWWJb) for usage example.\n\n### `getEnergy( [preset | startFreq [, endFreq] ] )`\n\n*Available since v3.2.0*\n\nReturns a number between 0 and 1, representing the amplitude of a specific frequency, or the average energy of a frequency range.\n\n**If called with no parameters, it returns the overall spectrum energy** obtained by the average of amplitudes of the *currently displayed frequency bands*.\n\nPreset strings are available for predefined ranges plus the \"peak\" functionality (see table below), or you can specify the desired frequency and an optional ending frequency for a range.\nFrequency values must be specified in Hz.\n\npreset    | description\n----------|-------------\n'peak'    | peak overall energy value of the last 30 frames (approximately 0.5s)\n'bass'    | average energy between 20 and 250 Hz\n'lowMid'  | average energy between 250 and 500 Hz\n'mid'     | average energy between 500 and 2000 Hz\n'highMid' | average energy between 2000 and 4000 Hz\n'treble'  | average energy between 4000 and 16000 Hz\n\nPlease note that preset names are case-sensitive. If the specified preset is not recognized the method will return *null*.\n\nUse 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.\n\n### `getOptions( [ignore] )`\n\n*Available since v4.4.0*\n\nReturns an [**Options object**](#options-object) with all the current analyzer settings.\n\n`ignore` can be a single property name or an array of property names that should not be included in the returned object.\n\nCallbacks and [constructor-specific properties](#constructor-specific-options) are NOT included in the object.\n\n?\u003e 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.\n\nSee also [`setOptions()`](#setoptions-options-).\n\n### `registerGradient( name, options )`\n\nRegisters a custom color gradient.\n\n`name` must be a non-empty string that will be used to select this gradient, via the [`gradient`](#gradient-string) property. Names are case sensitive.\n\n`options` must be an object as shown below:\n\n```js\naudioMotion.registerGradient( 'myGradient', {\n    bgColor: '#011a35', // background color (optional) - defaults to '#111'\n    dir: 'h',           // add this property to create a horizontal gradient (optional)\n    colorStops: [       // list your gradient colors in this array (at least one color is required)\n        'hsl( 0, 100%, 50% )',        // colors can be defined in any valid CSS format\n        { color: 'yellow', pos: .6 }, // in an object, use `pos` to adjust the offset (0 to 1) of a colorStop\n        { color: '#0f0', level: .5 }  // use `level` to set the max bar amplitude (0 to 1) to use this color\n    ]\n});\n```\n\nThe `dir` property has no effect on [`radial`](#radial-boolean) spectrum or when [`trueLeds`](#trueleds-boolean) is in effect.\n\nEach element of `colorStops` may be either a string (color only), or an object with at least a `color` property and optional `pos` and `level` properties.\n- `pos` defines the relative position of a color in the gradient, when [`colorMode`](#colormode-string) is set to **'gradient'**. It must be a number between `0` and `1`, where `0` represents the top of the screen and `1` the bottom\n(or left and right sides, for horizontal gradients);\n- `level` defines the level threshold of a color, when [`colorMode`](#colormode-string) is set to **'bar-level'** or [`trueLeds`](#trueleds-boolean) is active.\nThe color will be applied to bars (or LED elements) with amplitude **less than or equal to** `level`. It must be a number between `0` and `1`, where `1` is the maximum\namplitude (top of screen);\n- If `pos` or `level` are not explicitly defined, colors will be evenly distributed across the gradient or amplitude range;\n- Defining `level: 0` for a colorStop will effectively prevent that color from being used for *'bar-level'* colorMode and *trueLeds* effect.\n\n?\u003e Any gradient, including the built-in ones, may be modified at any time by (re-)registering the same gradient name.\n\n### `setCanvasSize( width, height )`\n\nSets the analyzer nominal dimensions in pixels. See [`height`](#height-number) and [`width`](#width-number) properties for details.\n\n### `setFreqRange( minFreq, maxFreq )`\n\nSets the desired frequency range. Values are expressed in Hz (Hertz).\n\nSee [`minFreq` and `maxFreq`](#minfreq-number) for lower and upper limit values.\n\n### `setLedParams( [params] )`\n\n*Available since v3.2.0*\n\nCustomize parameters used to create the [`ledBars`](#ledbars-boolean) effect.\n\n`params` should be an object with the following structure:\n\n```js\nconst params = {\n    maxLeds: 128, // integer, \u003e 0\n    spaceV: 1,    // \u003e 0\n    spaceH: .5    // \u003e= 0\n}\n```\n\nproperty  | description\n----------|-------------\n`maxLeds` | **maximum** desired number of LED elements per analyzer bar\n`spaceV`  | vertical spacing ratio, relative to the LED height (**1** means spacing is the same as the LED height)\n`spaceH`  | **minimum** horizontal spacing ratio, relative to the available width for each band, or a literal pixel value if **\u003e= 1**;\u003cbr\u003ethis behaves exactly like [`barSpace`](#barspace-number) and the largest spacing (resulting from either `barSpace` or `spaceH`) will prevail.\n\nThe available canvas height is initially divided by `maxLeds` and vertical spacing is calculated observing the `spaceV` ratio;\nif necessary, the led count is decreased until both the led segment and the vertical spacing are at least 2px tall.\n\nYou can try different values in the [fluid demo](https://audiomotion.dev/demo/fluid.html).\n\n?\u003e If called with no arguments or any invalid property, clears custom parameters previously set.\n\n### `setOptions( [options] )`\n\nShorthand method for setting several analyzer [properties](#properties) at once.\n\n`options` must be an [**Options object**](#options-object).\n\n?\u003e If called with no argument (or `options` is *undefined*), resets all configuration options to their default values.\n\nSee also [`getOptions()`](#getoptions-ignore-).\n\n### `setSensitivity( minDecibels, maxDecibels )`\n\nAdjust the analyzer's sensitivity. See [`minDecibels`](#mindecibels-number) and [`maxDecibels`](#maxdecibels-number) properties.\n\n### `start()`\n\n*Available since v4.2.0*\n\nStarts the analyzer data processing and animation.\n\nThe analyzer is started by default after initialization, unless you specify [`start: false`](#start-boolean) in the [constructor](#constructor) options.\n\nSee also [`stop()`](#stop), [`toggleAnalyzer()`](#toggleanalyzer-boolean-) and [`isOn`](#ison-boolean-read-only).\n\n### `stop()`\n\n*Available since v4.2.0*\n\nStops the analyzer process.\n\nWhen the analyzer is off, no audio data is processed and no callbacks to [`onCanvasDraw`](#oncanvasdraw-function) will be triggered.\n\nThe analyzer can be resumed with [`start()`](#start) or [`toggleAnalyzer()`](#toggleanalyzer-boolean-).\n\nSee also [`destroy()`](#destroy) and [`isOn`](#ison-boolean-read-only).\n\n### `toggleAnalyzer( [boolean] )`\n\nToggles the analyzer data processing and animation. The boolean argument can be used to force the desired state: *true* to start or *false* to stop the analyzer.\n\nReturns the resulting state.\n\nSee also [`start()`](#start), [`stop()`](#stop) and [`isOn`](#ison-boolean-read-only).\n\n### `toggleFullscreen()`\n\nToggles fullscreen mode on / off.\n\nBy default, only the canvas is sent to fullscreen.\nYou can set the [`fsElement`](#fselement-htmlelement-object) constructor option to a parent container, to keep desired interface elements visible during fullscreen.\n\n?\u003e Fullscreen requests must be triggered by user action, like a key press or mouse click, so you must call this method from within a user-generated event handler.\n\n\n## Custom Errors\n\n*Available since v2.0.0*\n\n**audioMotion-analyzer** uses a custom error object to throw errors for some critical operations.\n\nThe `code` property is a string label that can be checked to identify the specific error in a reliable way.\n\ncode                       | Error description\n---------------------------|--------------------\nERR_AUDIO_CONTEXT_FAIL     | Could not create audio context. The user agent may lack support for the Web Audio API.\nERR_INVALID_AUDIO_CONTEXT  | [Audio context](#audioctx-audiocontext-object-read-only) provided by user is not valid.\nERR_INVALID_AUDIO_SOURCE   | Audio source provided in [`source`](#source-htmlmediaelement-or-audionode-object) option or [`connectInput()`](#connectinput-source-) method is not an instance of HTMLMediaElement or AudioNode.\nERR_INVALID_MODE           | User tried to set the visualization [`mode`](#mode-number) to an invalid value.\nERR_FREQUENCY_TOO_LOW      | User tried to set the [`minFreq`](#minfreq-number) or [`maxFreq`](#maxfreq-number) properties to a value lower than 1.\nERR_GRADIENT_INVALID_NAME  | The `name` parameter for [`registerGradient()`](#registergradient-name-options-) must be a non-empty string.\nERR_GRADIENT_NOT_AN_OBJECT | The `options` parameter for [`registerGradient()`](#registergradient-name-options-) must be an object.\nERR_GRADIENT_MISSING_COLOR | The `options` parameter for [`registerGradient()`](#registergradient-name-options-) must define at least two color-stops.\nERR_REFLEX_OUT_OF_RANGE    | Tried to assign a value \u003c 0 or \u003e= 1 to [`reflexRatio`](#reflexratio-number) property.\nERR_UNKNOWN_GRADIENT       | User tried to [select a gradient](#gradient-string) not previously registered.\n\n\n## Known Issues\n\n### reflexBright won't work on some browsers \u003c!-- {docsify-ignore} --\u003e\n\n[`reflexBright`](#reflexbright-number) feature relies on the [`filter`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter) property of the Canvas API,\nwhich is [currently not supported in some browsers](https://caniuse.com/#feat=mdn-api_canvasrenderingcontext2d_filter) (notably, Opera and Safari).\n\n### alphaBars and fillAlpha won't work with Radial on Firefox \u003c!-- {docsify-ignore} --\u003e\n\nOn Firefox, [`alphaBars`](#alphaBars-boolean) and [`fillAlpha`](#fillalpha-number) won't work with [`radial`](#radial-boolean) spectrum when using hardware acceleration, due to [this bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1164912).\n\n### Visualization of live streams won't work on Safari {docsify-ignore}\n\nSafari's implementation of Web Audio won't return analyzer data for live streams, as documented in [this bug report](https://bugs.webkit.org/show_bug.cgi?id=195043).\n\n\n## Troubleshooting\n\nCommon problems and solutions. Remember to check the browser console for error messages.\n\n### Error message: `Cannot use import statement outside a module` \u003c!-- {docsify-ignore} --\u003e\n\nThe `import` statement must be inside a `script` which has the `type=\"module\"` property (and no `type=\"text/javascript\"`), like so:\n\n```html\n  \u003cscript type=\"module\"\u003e\n    import AudioMotionAnalyzer from 'https://cdn.skypack.dev/audiomotion-analyzer?min';\n\n    // your code here\n  \u003c/script\u003e\n```\n\nOr\n\n```html\n  \u003cscript src=\"main.js\" type=\"module\"\u003e\u003c/script\u003e\n```\n\n### Error message: `MediaElementAudioSource outputs zeroes due to CORS access restrictions` \u003c!-- {docsify-ignore} --\u003e\n\nMake sure the media element (`audio` or `video` tag) connected to **audioMotion-analyzer** has the `crossorigin = \"anonymous\"` property, like so:\n\n```html\n\u003caudio id=\"myAudio\" src=\"https://example.com/stream\" controls crossorigin=\"anonymous\"\u003e\u003c/audio\u003e\n```\n\nYou can also set the `crossOrigin` (mind the uppercase \"O\") property via JavaScript, like so:\n\n```js\nmyAudio.crossOrigin = 'anonymous';\n```\n\n### Sound only plays after the user clicks somewhere on the page. \u003c!-- {docsify-ignore} --\u003e\n\nBrowser autoplay policy dictates that audio output can only be initiated by a user gesture, and this policy is enforced by Web Audio API\nby putting [*AudioContext*](#audioctx-audiocontext-object-read-only) objects into *suspended* mode if they're not created on user action.\n\n**audioMotion-analyzer** tries to automatically start its *AudioContext* on the first click on the page. However, if you're using an `audio`\nor `video` element with the `controls` property, clicks on those native media controls cannot be detected by JavaScript, so the audio will\nonly be enabled if/when the user clicks somewhere else.\n\nPossible solutions are:\n\n1. Ensure your users have to click somewhere else before using the native media controls, like a \"power on\" button;\n\n1. Don't use the native controls at all, and create your own custom play and stop buttons;\n\n1. Even better, instantiate your **audioMotion-analyzer** object within a function triggered by a user click. This will allow the *AudioContext* to\nbe started right away and will also prevent the *\"The AudioContext was not allowed to start\"* warning message from appearing in the browser console.\n\nSee the [minimal demo](/demo/minimal.html) code for an example.\n\n\n## References and acknowledgments\n\n* Thanks to my wife, Virginia, for her never-ending love and support! 💞\n* Thanks to [Yuji Koike](http://www.ykcircus.com) for his awesome [Soniq Viewer for iOS](https://itunes.apple.com/us/app/soniq-viewer/id448343005), which inspired me to create **audioMotion**\n* [HTML Canvas Reference @W3Schools](https://www.w3schools.com/tags/ref_canvas.asp)\n* [Web Audio API specification](https://webaudio.github.io/web-audio-api/)\n* [Web Audio API documentation @MDN](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)\n* [What does the FFT data in the Web Audio API correspond to?](https://stackoverflow.com/a/14789992/2370385)\n* [Equations for equal-tempered scale frequencies](http://pages.mtu.edu/~suits/NoteFreqCalcs.html)\n* [Making Audio Reactive Visuals](https://www.airtightinteractive.com/2013/10/making-audio-reactive-visuals/)\n* The font used in audioMotion's logo is [Orbitron](https://fonts.google.com/specimen/Orbitron) by Matt McInerney\n* The _prism_ and _rainbow_ gradients use the [12-bit rainbow palette](https://iamkate.com/data/12-bit-rainbow/) by Kate Morley\n* The cover page animation was recorded with [ScreenToGif](https://github.com/NickeManarin/ScreenToGif) by Nicke Manarin\n* This documentation website is powered by [GitHub Pages](https://pages.github.com/), [docsify](https://docsify.js.org/) and [docsify-themeable](https://jhildenbiddle.github.io/docsify-themeable)\n\n\n## Changelog\n\nSee [Changelog.md](Changelog.md)\n\n\n## Contributing\n\nI kindly request that you only [open an issue](https://github.com/hvianna/audioMotion-analyzer/issues) for submitting **bug reports**.\n\nIf you need help integrating *audioMotion-analyzer* with your project, have ideas for **new features** or any other questions or feedback,\nplease use the [**Discussions**](https://github.com/hvianna/audioMotion-analyzer/discussions) section on GitHub.\n\nAdditionally, I would love it if you could showcase your project using *audioMotion-analyzer* in [**Show and Tell**](https://github.com/hvianna/audioMotion-analyzer/discussions/categories/show-and-tell),\nand share your custom gradients with the community in [**Gradients**](https://github.com/hvianna/audioMotion-analyzer/discussions/categories/gradients)!\n\nWhen submitting a **Pull Request**, please branch it off the project's `develop` branch.\n\nAnd if you're feeling generous, maybe:\n\n* [Buy me a coffee](https://ko-fi.com/Q5Q6157GZ) on Ko-fi ☕😁\n* Gift me something from my [Bandcamp wishlist](https://bandcamp.com/henriquevianna/wishlist) 🎁🎶🥰\n* Tip me via [Brave Rewards](https://brave.com/brave-rewards/) using Brave browser 🤓\n\n\n## License\n\naudioMotion-analyzer copyright (c) 2018-2024 [Henrique Avila Vianna](https://henriquevianna.com)\u003cbr\u003e\nLicensed under the [GNU Affero General Public License, version 3 or later](https://www.gnu.org/licenses/agpl.html).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhvianna%2FaudioMotion-analyzer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhvianna%2FaudioMotion-analyzer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhvianna%2FaudioMotion-analyzer/lists"}