audiomotion-analyzer 4.5.2 → 5.0.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1078 -738
- package/dist/index.js +952 -603
- package/package.json +1 -1
- package/src/audioMotion-analyzer.js +964 -658
- package/src/index.d.ts +117 -81
package/README.md
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
|
|
2
1
|
## About
|
|
3
2
|
|
|
3
|
+
> **WARNING:** code in **alpha** stage is subject to major, drastic changes! **DO NOT USE THIS IN PRODUCTION!**
|
|
4
|
+
|
|
4
5
|
**audioMotion-analyzer** is a high-resolution real-time audio spectrum analyzer built upon **Web Audio** and **Canvas** JavaScript APIs.
|
|
5
6
|
|
|
6
7
|
It was originally conceived as part of my full-featured media player called [**audioMotion**](https://audiomotion.app), but I later decided
|
|
@@ -32,16 +33,16 @@ What users are saying:
|
|
|
32
33
|
+ Visualization of discrete FFT frequencies or up to 240 frequency bands (supports ANSI and equal-tempered octave bands)
|
|
33
34
|
+ Decibel and linear amplitude scales, with customizable sensitivity
|
|
34
35
|
+ Optional A, B, C, D and ITU-R 468 weighting filters
|
|
35
|
-
+ Additional effects: LED bars,
|
|
36
|
-
+ Choose from 5 built-in color
|
|
36
|
+
+ Additional effects: LED bars, radial spectrum, variable opacity bars, mirroring and reflection
|
|
37
|
+
+ Choose from 5 built-in color themes or easily add your own!
|
|
37
38
|
+ Fullscreen support, ready for retina / HiDPI displays
|
|
38
39
|
+ Zero-dependency native ES6+ module (ESM), \~30kB minified
|
|
39
40
|
|
|
40
41
|
## Online demos
|
|
41
42
|
|
|
42
|
-
[](https://audiomotion.dev/demo/)
|
|
43
|
+
[](https://audiomotion.dev/demo/alpha/)
|
|
43
44
|
|
|
44
|
-
?> https://audiomotion.dev/demo/
|
|
45
|
+
?> https://audiomotion.dev/demo/alpha/
|
|
45
46
|
|
|
46
47
|
## Live code examples
|
|
47
48
|
|
|
@@ -57,12 +58,12 @@ What users are saying:
|
|
|
57
58
|
|
|
58
59
|
## Usage
|
|
59
60
|
|
|
60
|
-
### Node.js project
|
|
61
|
+
### Node.js project <!-- {docsify-ignore} -->
|
|
61
62
|
|
|
62
63
|
Install via npm:
|
|
63
64
|
|
|
64
65
|
```console
|
|
65
|
-
npm i audiomotion-analyzer
|
|
66
|
+
npm i audiomotion-analyzer@alpha
|
|
66
67
|
```
|
|
67
68
|
|
|
68
69
|
Use ES6 import:
|
|
@@ -77,25 +78,25 @@ Or CommonJS require:
|
|
|
77
78
|
const { AudioMotionAnalyzer } = require('audioMotion-analyzer');
|
|
78
79
|
```
|
|
79
80
|
|
|
80
|
-
### In the browser using native ES6 module (ESM)
|
|
81
|
+
### In the browser using native ES6 module (ESM) <!-- {docsify-ignore} -->
|
|
81
82
|
|
|
82
83
|
Load from Skypack CDN:
|
|
83
84
|
|
|
84
85
|
```html
|
|
85
86
|
<script type="module">
|
|
86
|
-
import AudioMotionAnalyzer from 'https://cdn.skypack.dev/audiomotion-analyzer?min';
|
|
87
|
+
import AudioMotionAnalyzer from 'https://cdn.skypack.dev/audiomotion-analyzer@alpha?min';
|
|
87
88
|
// your code here
|
|
88
89
|
</script>
|
|
89
90
|
```
|
|
90
91
|
|
|
91
92
|
Or 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.
|
|
92
93
|
|
|
93
|
-
### In the browser using global variable
|
|
94
|
+
### In the browser using global variable <!-- {docsify-ignore} -->
|
|
94
95
|
|
|
95
96
|
Load from Unpkg CDN:
|
|
96
97
|
|
|
97
98
|
```html
|
|
98
|
-
<script src="https://unpkg.com/audiomotion-analyzer/dist"></script>
|
|
99
|
+
<script src="https://unpkg.com/audiomotion-analyzer@alpha/dist"></script>
|
|
99
100
|
<script>
|
|
100
101
|
// available as AudioMotionAnalyzer global
|
|
101
102
|
</script>
|
|
@@ -104,20 +105,18 @@ Load from Unpkg CDN:
|
|
|
104
105
|
|
|
105
106
|
## Constructor
|
|
106
107
|
|
|
107
|
-
```js
|
|
108
|
-
new AudioMotionAnalyzer()
|
|
109
|
-
new AudioMotionAnalyzer( container )
|
|
110
|
-
new AudioMotionAnalyzer( container, {options} )
|
|
111
|
-
new AudioMotionAnalyzer( {options} )
|
|
112
|
-
```
|
|
113
|
-
|
|
114
108
|
Creates a new instance of **audioMotion-analyzer**.
|
|
115
109
|
|
|
116
|
-
|
|
110
|
+
**Syntax:**
|
|
117
111
|
|
|
118
|
-
|
|
112
|
+
```js
|
|
113
|
+
new AudioMotionAnalyzer(container, options)
|
|
114
|
+
```
|
|
119
115
|
|
|
120
|
-
|
|
116
|
+
parameter | description
|
|
117
|
+
------------|--------------
|
|
118
|
+
`container` | *(optional)* The DOM element into which the analyzer canvas (if created) should be inserted. If not defined, defaults to `document.body`, unless [`canvas`](#canvas) is defined in the options, in which case its parent element will be considered the container.
|
|
119
|
+
`options` | *(optional)* Configuration options - see [Options object](#options-object).
|
|
121
120
|
|
|
122
121
|
Usage example:
|
|
123
122
|
|
|
@@ -132,108 +131,100 @@ const audioMotion = new AudioMotionAnalyzer(
|
|
|
132
131
|
|
|
133
132
|
This will insert the analyzer canvas inside the *#container* element and start the visualization of audio coming from the *#audio* element.
|
|
134
133
|
|
|
135
|
-
|
|
134
|
+
!> By default, audioMotion will dynamically try to use all available container space for its canvas. To prevent it from growing indefinitely, you must either constrain the dimensions of the container via CSS or explicitly define [`height`](#height) and/or [`width`](#width) properties in the constructor [options](#options-object).
|
|
136
135
|
|
|
137
136
|
### Options object
|
|
138
137
|
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
  [showScaleX](#showscalex-boolean): **true**,<br>
|
|
197
|
-
  [showScaleY](#showscaley-boolean): **false**,<br>
|
|
198
|
-
  [smoothing](#smoothing-number): **0.5**,<br>
|
|
199
|
-
  [source](#source-htmlmediaelement-or-audionode-object): *undefined*, // constructor only<br>
|
|
200
|
-
  [spinSpeed](#spinspeed-number): **0**,<br>
|
|
201
|
-
  [splitGradient](#splitgradient-boolean): **false**,<br>
|
|
202
|
-
  [start](#start-boolean): **true**, // constructor only<br>
|
|
203
|
-
  [trueLeds](#trueleds-boolean): **false**,<br>
|
|
204
|
-
  [useCanvas](#usecanvas-boolean): **true**,<br>
|
|
205
|
-
  [volume](#volume-number): **1**,<br>
|
|
206
|
-
  [weightingFilter](#weightingFilter-string): **''**<br>
|
|
207
|
-
  [width](#width-number): *undefined*<br>
|
|
208
|
-
}
|
|
138
|
+
Used in the [Constructor](#constructor) call and [`setOptions()`](#setoptions) method to set several [instance properties](#instance-properties) at once.
|
|
139
|
+
|
|
140
|
+
property | type | default | notes
|
|
141
|
+
--------------------------------------|-----------|---------|-------------------------------
|
|
142
|
+
[`alphaBars`](#alphabars) | *string* | `"off"` |
|
|
143
|
+
[`ansiBands`](#ansibands) | *boolean* | `false` |
|
|
144
|
+
[`audioCtx`](#audioctx) | *AudioContext object* | *creates new object* | constructor only
|
|
145
|
+
[`barSpace`](#barspace) | *number* | `0.1` |
|
|
146
|
+
[`canvas`](#canvas) | *HTMLCanvasElement object* | *creates new object* | constructor only
|
|
147
|
+
[`channelLayout`](#channellayout) | *string* | `"single"` |
|
|
148
|
+
[`colorMode`](#colormode) | *string* | `"gradient"` |
|
|
149
|
+
[`connectSpeakers`](#connectspeakers) | *boolean* | `true` | constructor only
|
|
150
|
+
[`fftSize`](#fftsize) | *number* | `8192` |
|
|
151
|
+
[`fillAlpha`](#fillalpha) | *number* | `0.5` |
|
|
152
|
+
[`frequencyScale`](#frequencyscale) | *string* | `"log"` |
|
|
153
|
+
[`fsElement`](#fselement) | *HTMLElement object* | [`canvas`](#canvas) | constructor only
|
|
154
|
+
[`height`](#height) | *number* or *undefined* | `undefined` |
|
|
155
|
+
[`ledBars`](#ledbars) | *string* | `"off"` |
|
|
156
|
+
[`linearAmplitude`](#linearamplitude) | *boolean* | `false` |
|
|
157
|
+
[`linearBoost`](#linearboost) | *number* | `1` |
|
|
158
|
+
[`lineWidth`](#linewidth) | *number* | `1` |
|
|
159
|
+
[`loRes`](#lores) | *boolean* | `false` |
|
|
160
|
+
[`maxDecibels`](#maxdecibels) | *number* | `-25` |
|
|
161
|
+
[`maxFPS`](#maxfps) | *number* | `0` |
|
|
162
|
+
[`maxFreq`](#maxfreq) | *number* | `22000` |
|
|
163
|
+
[`minDecibels`](#mindecibels) | *number* | `-85` |
|
|
164
|
+
[`minFreq`](#minfreq) | *number* | `20` |
|
|
165
|
+
[`mirror`](#mirror) | *number* | `0` |
|
|
166
|
+
[`mode`](#mode) | *string* | `"bars"` |
|
|
167
|
+
[`noteLabels`](#notelabels) | *boolean* | `false` |
|
|
168
|
+
[`onCanvasDraw`](#oncanvasdraw) | *function* or *undefined* | `undefined` |
|
|
169
|
+
[`onCanvasResize`](#oncanvasresize) | *function* or *undefined* | `undefined` |
|
|
170
|
+
[`outlineBars`](#outlinebars) | *boolean* | `false` |
|
|
171
|
+
[`peakDecayTime`](#peakdecaytime) | *number* | `750` |
|
|
172
|
+
[`peakHoldTime`](#peakholdtime) | *number* | `500` |
|
|
173
|
+
[`peakLine`](#peakline) | *boolean* | `false` |
|
|
174
|
+
[`peaks`](#peaks) | *string* | `"drop"` |
|
|
175
|
+
[`radial`](#radial) | *number* | `0` |
|
|
176
|
+
[`radius`](#radius) | *number* | `0.5` |
|
|
177
|
+
[`reflexAlpha`](#reflexalpha) | *number* | `0.15` |
|
|
178
|
+
[`reflexBright`](#reflexbright) | *number* | `1` |
|
|
179
|
+
[`reflexFit`](#reflexfit) | *boolean* | `true` |
|
|
180
|
+
[`reflexRatio`](#reflexratio) | *number* | `0` |
|
|
181
|
+
[`roundBars`](#roundbars) | *boolean* | `false` |
|
|
182
|
+
[`showFPS`](#showfps) | *boolean* | `false` |
|
|
183
|
+
[`showLedMask`](#showledmask) | *boolean* | `true` |
|
|
184
|
+
[`showScaleX`](#showscalex) | *boolean* | `true` |
|
|
185
|
+
[`showScaleY`](#showscaley) | *boolean* | `false` |
|
|
186
|
+
[`smoothing`](#smoothing) | *number* | `0.5` |
|
|
187
|
+
[`source`](#source) | *AudioNode* or *HTMLMediaElement object* | *none* | constructor only
|
|
188
|
+
[`spinSpeed`](#spinspeed) | *number* | `0` |
|
|
189
|
+
[`spreadGradient`](#spreadgradient) | *boolean* | `false` |
|
|
190
|
+
[`start`](#start) | *boolean* | `true` | constructor only
|
|
191
|
+
[`useCanvas`](#usecanvas) | *boolean* | `true` |
|
|
192
|
+
[`volume`](#volume) | *number* | `1` |
|
|
193
|
+
[`weightingFilter`](#weightingFilter) | *string* | `""` |
|
|
194
|
+
[`width`](#width) | *number* or *undefined* | `undefined` |
|
|
209
195
|
|
|
210
196
|
### Constructor-specific options
|
|
211
197
|
|
|
212
|
-
#### `audioCtx`
|
|
198
|
+
#### `audioCtx`
|
|
213
199
|
|
|
214
200
|
*Available since v2.0.0*
|
|
215
201
|
|
|
216
|
-
|
|
217
|
-
|
|
202
|
+
**Value:** an [*AudioContext*](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext) object.
|
|
203
|
+
|
|
204
|
+
Allows you to provide an existing AudioContext to **audioMotion-analyzer**. This can also be done implicitly, by passing an [*AudioNode*](https://developer.mozilla.org/en-US/docs/Web/API/AudioNode) as the [`source`](#source) property instead.
|
|
218
205
|
|
|
219
|
-
|
|
206
|
+
By default, a new AudioContext will be created, which can be obtained via the [`audioCtx`](#audioctx-read-only) read-only property, after instantiation.
|
|
220
207
|
|
|
221
|
-
|
|
208
|
+
!> All audio nodes or sound-processing modules you connect to or from audioMotion must share the same AudioContext.
|
|
222
209
|
|
|
223
210
|
See [this live code](https://codesandbox.io/s/9y6qb) and the [multi-instance demo](/demo/multi.html) for more usage examples.
|
|
224
211
|
|
|
225
|
-
#### `canvas`
|
|
212
|
+
#### `canvas`
|
|
226
213
|
|
|
227
214
|
*Available since v4.4.0*
|
|
228
215
|
|
|
229
|
-
|
|
216
|
+
**Value:** a [*HTMLCanvasElement*](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) object.
|
|
217
|
+
|
|
218
|
+
Allows you to provide an existing Canvas where audioMotion should render its visualizations.
|
|
230
219
|
|
|
231
|
-
If not defined, a new
|
|
220
|
+
If not defined, a new Canvas will be created. After instantiation, you can obtain its reference from the [`canvas`](#canvas-read-only) read-only property.
|
|
232
221
|
|
|
233
|
-
#### `connectSpeakers`
|
|
222
|
+
#### `connectSpeakers`
|
|
234
223
|
|
|
235
224
|
*Available since v3.2.0*
|
|
236
225
|
|
|
226
|
+
**Value:** a *boolean* value. The default value is `true`.
|
|
227
|
+
|
|
237
228
|
Whether or not to connect the analyzer output to the speakers (technically, the *AudioContext* `destination` node).
|
|
238
229
|
|
|
239
230
|
Some scenarios where you may want to set this to `false`:
|
|
@@ -243,76 +234,150 @@ only one of them needs to be connected to the speakers, otherwise the volume wil
|
|
|
243
234
|
1. when audio input comes from the microphone and you're not using headphones, to prevent a feedback loop from the speakers;
|
|
244
235
|
1. when you're using **audioMotion-analyzer** with an audio player which already outputs sound to the speakers (same reason as 1).
|
|
245
236
|
|
|
246
|
-
After instantiation, use [`connectOutput()`](#connectoutput
|
|
247
|
-
|
|
248
|
-
See also [`connectedTo`](#connectedto-array-read-only).
|
|
237
|
+
After instantiation, use [`connectOutput()`](#connectoutput) and [`disconnectOutput()`](#disconnectoutput) to connect or disconnect the output from the speakers (or other nodes).
|
|
249
238
|
|
|
250
|
-
|
|
239
|
+
See also [`connectedTo`](#connectedto-read-only).
|
|
251
240
|
|
|
252
|
-
#### `fsElement`
|
|
241
|
+
#### `fsElement`
|
|
253
242
|
|
|
254
243
|
*Available since v3.4.0*
|
|
255
244
|
|
|
245
|
+
**Value:** a *HTMLElement* object.
|
|
246
|
+
|
|
256
247
|
HTML element affected by the [`toggleFullscreen()`](#togglefullscreen) method.
|
|
257
248
|
|
|
258
|
-
If not defined, defaults to the [`canvas`](#canvas-
|
|
249
|
+
If not defined, defaults to the [`canvas`](#canvas-read-only).
|
|
259
250
|
**Set it to a container `<div>` to keep additional interface elements available in fullscreen mode.**
|
|
260
251
|
|
|
261
252
|
See the [overlay demo](/demo/overlay.html) or [this pen](https://codepen.io/hvianna/pen/LYREBYQ) for usage examples.
|
|
262
253
|
|
|
263
|
-
After instantiation, [`fsElement`](#fselement-
|
|
254
|
+
After instantiation, [`fsElement`](#fselement-read-only) is available as a read-only property.
|
|
264
255
|
|
|
265
|
-
#### `source`
|
|
256
|
+
#### `source`
|
|
266
257
|
|
|
267
|
-
|
|
268
|
-
or [*AudioNode*](https://developer.mozilla.org/en-US/docs/Web/API/AudioNode) object to the analyzer.
|
|
258
|
+
**Value:** an [*AudioNode*](https://developer.mozilla.org/en-US/docs/Web/API/AudioNode) or [*HTMLMediaElement*](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) object.
|
|
269
259
|
|
|
270
|
-
|
|
260
|
+
If `source` is specified, connects an AudioNode or an `<audio>` or `<video>` HTML element to the analyzer.
|
|
271
261
|
|
|
272
|
-
|
|
262
|
+
At least one audio source is required for the analyzer to work. You can also connect audio sources after instantiation, using the [`connectInput()`](#connectinput) method.
|
|
273
263
|
|
|
274
|
-
|
|
264
|
+
#### `start`
|
|
275
265
|
|
|
276
|
-
|
|
266
|
+
**Value:** a *boolean* value. The default value is `true`.
|
|
277
267
|
|
|
278
|
-
|
|
268
|
+
Whether or not to start the analyzer. When set to `false`, the analyzer will need to be manually started with the [`start()`](#start) or [`toggleAnalyzer()`](#toggleanalyzer) methods.
|
|
279
269
|
|
|
280
|
-
|
|
270
|
+
|
|
271
|
+
## Constants
|
|
272
|
+
|
|
273
|
+
Several constants are provided to simplify setting or checking property values.
|
|
274
|
+
You can import them into your code as follows:
|
|
275
|
+
|
|
276
|
+
|
|
277
|
+
```js
|
|
278
|
+
import {
|
|
279
|
+
ALPHABARS_FULL,
|
|
280
|
+
ALPHABARS_OFF,
|
|
281
|
+
ALPHABARS_ON,
|
|
282
|
+
BANDS_FFT,
|
|
283
|
+
BANDS_OCTAVE_FULL,
|
|
284
|
+
BANDS_OCTAVE_HALF,
|
|
285
|
+
BANDS_OCTAVE_3RD,
|
|
286
|
+
BANDS_OCTAVE_4TH,
|
|
287
|
+
BANDS_OCTAVE_6TH,
|
|
288
|
+
BANDS_OCTAVE_8TH,
|
|
289
|
+
BANDS_OCTAVE_12TH,
|
|
290
|
+
BANDS_OCTAVE_24TH,
|
|
291
|
+
COLORMODE_GRADIENT,
|
|
292
|
+
COLORMODE_INDEX,
|
|
293
|
+
COLORMODE_LEVEL,
|
|
294
|
+
ENERGY_BASS,
|
|
295
|
+
ENERGY_HIGHMID,
|
|
296
|
+
ENERGY_LOWMID,
|
|
297
|
+
ENERGY_MIDRANGE,
|
|
298
|
+
ENERGY_PEAK,
|
|
299
|
+
ENERGY_TREBLE,
|
|
300
|
+
ERR_AUDIO_CONTEXT_FAIL,
|
|
301
|
+
ERR_INVALID_AUDIO_CONTEXT,
|
|
302
|
+
ERR_INVALID_AUDIO_SOURCE,
|
|
303
|
+
FILTER_NONE,
|
|
304
|
+
FILTER_A,
|
|
305
|
+
FILTER_B,
|
|
306
|
+
FILTER_C,
|
|
307
|
+
FILTER_D,
|
|
308
|
+
FILTER_468,
|
|
309
|
+
LAYOUT_COMBINED,
|
|
310
|
+
LAYOUT_HORIZONTAL,
|
|
311
|
+
LAYOUT_SINGLE,
|
|
312
|
+
LAYOUT_VERTICAL,
|
|
313
|
+
LEDS_MODERN,
|
|
314
|
+
LEDS_OFF,
|
|
315
|
+
LEDS_VINTAGE,
|
|
316
|
+
MODE_BARS,
|
|
317
|
+
MODE_GRAPH,
|
|
318
|
+
PEAKS_DROP,
|
|
319
|
+
PEAKS_FADE,
|
|
320
|
+
PEAKS_OFF,
|
|
321
|
+
RADIAL_INNER,
|
|
322
|
+
RADIAL_OFF,
|
|
323
|
+
RADIAL_OUTER,
|
|
324
|
+
REASON_CREATE,
|
|
325
|
+
REASON_FULLSCREENCHANGE,
|
|
326
|
+
REASON_LORES,
|
|
327
|
+
REASON_RESIZE,
|
|
328
|
+
REASON_USER,
|
|
329
|
+
SCALE_BARK,
|
|
330
|
+
SCALE_LINEAR,
|
|
331
|
+
SCALE_LOG,
|
|
332
|
+
SCALE_MEL
|
|
333
|
+
} from 'audiomotion-analyzer';
|
|
334
|
+
```
|
|
335
|
+
|
|
336
|
+
|
|
337
|
+
## Instance properties
|
|
338
|
+
|
|
339
|
+
### `alphaBars`
|
|
281
340
|
|
|
282
341
|
*Available since v3.6.0*
|
|
283
342
|
|
|
284
|
-
|
|
343
|
+
**Value:** a *string*. The default value is `"off"`.
|
|
285
344
|
|
|
286
|
-
|
|
345
|
+
Determines whether each bar's opacity is affected by its amplitude. Only effective in **Bars** [`mode`](#mode).
|
|
287
346
|
|
|
288
|
-
|
|
347
|
+
value | [Constant](#constants) | Description
|
|
348
|
+
---------|------------------------|--------------
|
|
349
|
+
`"off"` | `ALPHABARS_OFF` | Disables effect
|
|
350
|
+
`"on"` | `ALPHABARS_ON` | Bars with higher amplitude are rendered more opaque while those with lower amplitude are mode transparent
|
|
351
|
+
`"full"` | `ALPHABARS_FULL` | All bars are rendered with full amplitude and variable opacity only (legacy "Lumi bars" effect).<br>**This setting disables the display of [`reflexRatio`](#reflexratio), [`roundBars`](#roundbars), [`outlineBars`](#outlinebars) and [`showScaleY`](#showscaley).**
|
|
289
352
|
|
|
290
|
-
|
|
353
|
+
For effect priority when combined with other settings, see [`isAlphaBars`](#isalphabars-read-only).
|
|
291
354
|
|
|
292
355
|
!> [See related known issue](#alphabars-and-fillalpha-wont-work-with-radial-on-firefox)
|
|
293
356
|
|
|
294
|
-
### `ansiBands`
|
|
357
|
+
### `ansiBands`
|
|
295
358
|
|
|
296
359
|
*Available since v4.0.0*
|
|
297
360
|
|
|
298
|
-
|
|
299
|
-
The 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).
|
|
361
|
+
**Value:** a *boolean* value. The default value is `false`.
|
|
300
362
|
|
|
301
|
-
|
|
302
|
-
the center of each band is perfectly tuned to a musical note.
|
|
363
|
+
Whether to use the ANSI/IEC preferred frequencies, instead of the musical scale, to compute the center and edge frequencies of [octave bands](#bandresolution).
|
|
303
364
|
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
false
|
|
307
|
-
true
|
|
365
|
+
value | Reference | Octaves' center frequencies
|
|
366
|
+
--------|-----------------|----------------------------
|
|
367
|
+
`false` | [A 440 pitch standard](http://hyperphysics.phy-astr.gsu.edu/hbase/Music/et.html) (equal temperament scale) | 
|
|
368
|
+
`true` | [ANSI S1.11-2004 standard](https://archive.org/details/gov.law.ansi.s1.11.2004) (base-10 scale) | 
|
|
308
369
|
|
|
309
|
-
|
|
370
|
+
Only effective when [`frequencyScale`](#frequencyScale) is set to `"log"` and [`bandResolution`](#bandresolution) > `0`.
|
|
310
371
|
|
|
311
|
-
|
|
372
|
+
When using the equal-tempered scale, the center frequency of each band is tuned to a standard musical note.
|
|
312
373
|
|
|
313
|
-
[
|
|
374
|
+
See also [`noteLabels`](#notelabels).
|
|
314
375
|
|
|
315
|
-
|
|
376
|
+
### `audioCtx` *(read only)*
|
|
377
|
+
|
|
378
|
+
The [*AudioContext*](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext) used by **audioMotion-analyzer** for audio processing.
|
|
379
|
+
|
|
380
|
+
Use this object to create audio sources that can be connected to the analyzer, like oscillator nodes, gain nodes and media streams.
|
|
316
381
|
|
|
317
382
|
The code fragment below creates an oscillator and a gain node using audioMotion's *AudioContext*, and then connects them to the analyzer:
|
|
318
383
|
|
|
@@ -331,353 +396,311 @@ audioMotion.connectInput( gainNode ); // connect gainNode -> audioMotion
|
|
|
331
396
|
oscillator.start(); // play tone
|
|
332
397
|
```
|
|
333
398
|
|
|
334
|
-
You can provide your own *AudioContext* via the [`audioCtx`](#audioctx
|
|
399
|
+
You can provide your own *AudioContext* via the [`audioCtx`](#audioctx) property in the [constructor](#constructor) options.
|
|
335
400
|
|
|
336
401
|
See also the [fluid demo](/demo/fluid.html) and the [multi-instance demo](/demo/multi.html) for more usage examples.
|
|
337
402
|
|
|
338
|
-
### `
|
|
403
|
+
### `bandResolution`
|
|
339
404
|
|
|
340
|
-
*Available since
|
|
405
|
+
*Available since v5.0.0*
|
|
341
406
|
|
|
342
|
-
|
|
407
|
+
**Value:** a *number*. The default value is `0`.
|
|
343
408
|
|
|
344
|
-
|
|
409
|
+
How much of an octave should each analyzer band represent, or how many bands should be displayed. Only effective in **Bars** [`mode`](#mode).
|
|
345
410
|
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
Prefer proportional spacing to obtain consistent results among different resolutions and screen sizes.
|
|
411
|
+
When [`frequencyScale`](#frequencyscale-string) is set to `"log"`, this setting defines which fraction of an octave is included in each bar.
|
|
412
|
+
Otherwise, the frequency spectrum is divided into a fixed amount of bars, with the bandwidth of each bar varying according to the selected frequency scale.
|
|
349
413
|
|
|
350
|
-
|
|
351
|
-
|
|
414
|
+
value | [Constant](#constants) | Description
|
|
415
|
+
:----:|------------------------|-----------------
|
|
416
|
+
`0` | `BANDS_FFT` | Discrete frequencies provided by the [FFT](https://en.wikipedia.org/wiki/Fast_Fourier_transform) computation
|
|
417
|
+
`1` | `BANDS_OCTAVE_FULL` | Full octave bands or 10 bands
|
|
418
|
+
`2` | `BANDS_OCTAVE_HALF` | Half-octave bands or 20 bands
|
|
419
|
+
`3` | `BANDS_OCTAVE_3RD` | 1/3rd-octave bands or 30 bands
|
|
420
|
+
`4` | `BANDS_OCTAVE_4TH` | 1/4th-octave bands or 40 bands
|
|
421
|
+
`5` | `BANDS_OCTAVE_6TH` | 1/6th-octave bands or 60 bands
|
|
422
|
+
`6` | `BANDS_OCTAVE_8TH` | 1/8th-octave bands or 80 bands
|
|
423
|
+
`7` | `BANDS_OCTAVE_12TH` | 1/12th-octave bands or 120 bands
|
|
424
|
+
`8` | `BANDS_OCTAVE_24TH` | 1/24th-octave bands or 240 bands
|
|
352
425
|
|
|
353
|
-
|
|
426
|
+
See also [`ansiBands`](#ansibands).
|
|
354
427
|
|
|
355
|
-
### `
|
|
428
|
+
### `barSpace`
|
|
356
429
|
|
|
357
|
-
*Available since v2.
|
|
430
|
+
*Available since v2.0.0*
|
|
358
431
|
|
|
359
|
-
|
|
432
|
+
**Value:** a *number*. The default value is `0.1`.
|
|
360
433
|
|
|
361
|
-
|
|
434
|
+
Customize the spacing between analyzer bars. Has no effect when [`bandResolution`](#bandresolution) is `0` or [`mode`](#mode) is set to `"graph"`.
|
|
362
435
|
|
|
363
|
-
|
|
436
|
+
A value equal or greater than `0.0` but less than `1.0` represents spacing proportional to the band width. Values >= `1` will be considered as a literal number of pixels.
|
|
364
437
|
|
|
365
|
-
|
|
438
|
+
For example, `barSpace = 0.5` will use half the width available to each band for spacing and half for the bar itself.
|
|
439
|
+
On the other hand, `barSpace = 2` will set a fixed spacing of 2 pixels, independent of the width of bars.
|
|
440
|
+
Prefer proportional spacing to obtain consistent results among different resolutions and screen sizes.
|
|
366
441
|
|
|
367
|
-
|
|
442
|
+
### `canvas` *(read only)*
|
|
368
443
|
|
|
369
|
-
|
|
444
|
+
**Value:** a [*HTMLCanvasElement*](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) object.
|
|
370
445
|
|
|
371
|
-
|
|
446
|
+
*Canvas* element where audioMotion renders its visualizations.
|
|
372
447
|
|
|
373
|
-
|
|
448
|
+
See also the [`canvas`](#canvas) constructor option.
|
|
374
449
|
|
|
375
|
-
### `
|
|
450
|
+
### `canvasCtx` *(read only)*
|
|
451
|
+
|
|
452
|
+
**Value:** a [*CanvasRenderingContext2D*](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) object.
|
|
453
|
+
|
|
454
|
+
[2D rendering context] used for drawing in audioMotion's [`canvas`](#canvas-read-only).
|
|
455
|
+
|
|
456
|
+
### `channelLayout`
|
|
376
457
|
|
|
377
458
|
*Available since v4.0.0*
|
|
378
459
|
|
|
460
|
+
**Value:** a *string*. The default value is `"single"`.
|
|
461
|
+
|
|
379
462
|
Defines the number and layout of analyzer channels.
|
|
380
463
|
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
464
|
+
value | [Constant](#constants) | Description
|
|
465
|
+
--------------------|------------------------|-----------------
|
|
466
|
+
`"single"` | `LAYOUT_SINGLE` | Single channel analyzer, representing the combined output of both left and right channels.
|
|
467
|
+
`"dual-combined"` | `LAYOUT_COMBINED` | Dual channel analyzer, both channels overlaid. Works best with semi-transparent **Graph** [`mode`](#mode) or [`outlineBars`](#outlinebars).
|
|
468
|
+
`"dual-horizontal"` | `LAYOUT_HORIZONTAL` |Dual channel, side by side - see [`mirror`](#mirror) for additional layout options.
|
|
469
|
+
`"dual-vertical"` | `LAYOUT_VERTICAL` |Dual channel, left channel at the top half of the canvas and right channel at the bottom.
|
|
387
470
|
|
|
388
471
|
!> When a *dual* layout is selected, any mono (single channel) audio source connected to the analyzer will output sound only from the left speaker,
|
|
389
472
|
unless a stereo source is simultaneously connected to the analyzer, which will force the mono input to be upmixed to stereo.
|
|
390
473
|
|
|
391
|
-
See also [`
|
|
474
|
+
See also [`setTheme()`](#settheme) and [`spreadGradient`](#spreadgradient).
|
|
392
475
|
|
|
393
|
-
### `colorMode`
|
|
476
|
+
### `colorMode`
|
|
394
477
|
|
|
395
478
|
*Available since v4.1.0*
|
|
396
479
|
|
|
397
|
-
|
|
480
|
+
**Value:** a *string*. The default value is `"gradient"`.
|
|
398
481
|
|
|
399
|
-
|
|
400
|
-
------------|-------------|----------------------------
|
|
401
|
-
'gradient' | Analyzer bars are painted with the currently selected [`gradient`](#gradient-string). This is the default behavior. | 
|
|
402
|
-
'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. | 
|
|
403
|
-
'bar-level' | Colors from the selected gradient are used to paint each bar, according to its current level (amplitude). | 
|
|
482
|
+
Selects the desired mode for coloring the analyzer bars. This property has no effect in **Graph** [`mode`](#mode).
|
|
404
483
|
|
|
405
|
-
|
|
484
|
+
value | [Constant](#constants) | Description | Preview ('prism' theme)
|
|
485
|
+
--------------|------------------------|-------------|-------------------------
|
|
486
|
+
`"gradient"` | `COLORMODE_GRADIENT` | Analyzer bars are painted with a gradient of the selected [`theme`](#theme-string)'s colors. This is the default behavior. | 
|
|
487
|
+
`"bar-index"` | `COLORMODE_INDEX` | Each analyzer bar is painted with a **single color** from the selected theme's colors, starting with the first color applied to the first bar, and so on, cycling through the available colors. | 
|
|
488
|
+
`"bar-level"` | `COLORMODE_LEVEL` | Colors from the selected theme are used to paint each bar, according to its current level (amplitude). | 
|
|
406
489
|
|
|
407
|
-
|
|
490
|
+
See also [`registerTheme()`](#registertheme).
|
|
408
491
|
|
|
409
|
-
### `connectedSources` *
|
|
492
|
+
### `connectedSources` *(read only)*
|
|
410
493
|
|
|
411
494
|
*Available since v3.0.0*
|
|
412
495
|
|
|
413
|
-
An array of *AudioNode* objects connected to the analyzer **input** via the [`source`](#source
|
|
496
|
+
An **array** of *AudioNode* objects connected to the analyzer **input** via the [`source`](#source) constructor option, or by using the [`connectInput()`](#connectinput) method.
|
|
414
497
|
|
|
415
|
-
### `connectedTo` *
|
|
498
|
+
### `connectedTo` *(read only)*
|
|
416
499
|
|
|
417
500
|
*Available since v3.2.0*
|
|
418
501
|
|
|
419
|
-
An array of *AudioNode* objects to which the analyzer **output** is connected.
|
|
502
|
+
An **array** of *AudioNode* objects to which the analyzer **output** is connected.
|
|
420
503
|
|
|
421
|
-
By default, **audioMotion-analyzer** is connected to the *AudioContext* `destination` node (the speakers) upon instantiation, unless you set [`connectSpeakers: false`](#connectspeakers
|
|
504
|
+
By default, **audioMotion-analyzer** is connected to the *AudioContext* `destination` node (the speakers) upon instantiation, unless you set [`connectSpeakers: false`](#connectspeakers) in the constructor options.
|
|
422
505
|
|
|
423
|
-
See also [`connectOutput()`](#connectoutput
|
|
506
|
+
See also [`connectOutput()`](#connectoutput).
|
|
424
507
|
|
|
425
|
-
### `
|
|
508
|
+
### `fftSize`
|
|
426
509
|
|
|
427
|
-
*
|
|
428
|
-
|
|
429
|
-
When *true*, peaks fade out instead of falling down. It has no effect when [`peakLine`](#peakline-boolean) is active.
|
|
430
|
-
|
|
431
|
-
Fade time can be customized via [`peakFadeTime`](#peakfadetime-number).
|
|
432
|
-
|
|
433
|
-
See also [`peakHoldTime`](#peakholdtime-number) and [`showPeaks`](#showpeaks-boolean).
|
|
434
|
-
|
|
435
|
-
Defaults to **false**.
|
|
436
|
-
|
|
437
|
-
### `fftSize` *number*
|
|
510
|
+
**Value:** a *number*. The default value is `8192`.
|
|
438
511
|
|
|
439
512
|
Number of samples used for the FFT performed by the [*AnalyzerNode*](https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode).
|
|
440
513
|
It 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.
|
|
441
514
|
|
|
442
|
-
Higher 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
|
|
443
|
-
|
|
444
|
-
Defaults to **8192**.
|
|
515
|
+
Higher 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) accordingly.
|
|
445
516
|
|
|
446
|
-
### `fillAlpha`
|
|
517
|
+
### `fillAlpha`
|
|
447
518
|
|
|
448
519
|
*Available since v2.0.0*
|
|
449
520
|
|
|
450
|
-
|
|
521
|
+
**Value:** a *number* between `0.0` and `1.0`. The default value is `0.5`.
|
|
451
522
|
|
|
452
|
-
|
|
523
|
+
Determines the opacity of the area fill in [Graph mode](#mode), or inner fill of bars in [frequency bands modes](#mode) when [`outlineBars`](#outlinebars) is *true*.
|
|
524
|
+
A value of `0` means completely transparent, while `1` is completely opaque.
|
|
453
525
|
|
|
454
|
-
Please note that the line stroke (when [`lineWidth`](#linewidth
|
|
526
|
+
Please note that the line stroke (when [`lineWidth`](#linewidth) > `0`) is always drawn at full opacity, regardless of the `fillAlpha` value.
|
|
455
527
|
|
|
456
|
-
Also, for [frequency bands modes](#mode
|
|
457
|
-
|
|
458
|
-
Defaults to **1**.
|
|
528
|
+
Also, for [frequency bands modes](#mode), [`alphaBars`](#alphabars) set to *true* takes precedence over `fillAlpha`.
|
|
459
529
|
|
|
460
530
|
!> [See related known issue](#alphabars-and-fillalpha-wont-work-with-radial-on-firefox)
|
|
461
531
|
|
|
462
|
-
### `fps` *
|
|
532
|
+
### `fps` *(read only)*
|
|
533
|
+
|
|
534
|
+
**Value:** a *number*.
|
|
463
535
|
|
|
464
536
|
Current frame rate.
|
|
465
537
|
|
|
466
|
-
### `frequencyScale`
|
|
538
|
+
### `frequencyScale`
|
|
467
539
|
|
|
468
540
|
*Available since v4.0.0*
|
|
469
541
|
|
|
542
|
+
**Value:** a *string*. The default value is `"log"`.
|
|
543
|
+
|
|
470
544
|
Scale used to represent frequencies in the horizontal axis.
|
|
471
545
|
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
546
|
+
value | [Constant](#constants) | Description | Scale preview (10Hz - 24kHz range)
|
|
547
|
+
-----------|------------------------|-------------|-------------------------------------
|
|
548
|
+
`"bark"` | `SCALE_BARK` | Bark scale | 
|
|
549
|
+
`"linear"` | `SCALE_LINEAR` | Linear scale | 
|
|
550
|
+
`"log"` | `SCALE_LOG` | Logarithmic scale | 
|
|
551
|
+
`"mel"` | `SCALE_MEL` | Mel scale | 
|
|
478
552
|
|
|
479
|
-
Logarithmic scale allows visualization of proper **octave bands** (see [`
|
|
553
|
+
Logarithmic scale allows visualization of proper **octave bands** (see [`bandResolution`](#bandresolution)) and it's also recommended when using [`noteLabels`](#notelabels).
|
|
480
554
|
|
|
481
555
|
[*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.
|
|
482
556
|
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
### `fsElement` *HTMLElement object* *(Read only)*
|
|
557
|
+
### `fsElement` *(read only)*
|
|
486
558
|
|
|
487
559
|
*Available since v3.4.0*
|
|
488
560
|
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
See [`fsElement`](#fselement-htmlelement-object) in the constructor options context for more information.
|
|
561
|
+
**Value:** a *HTMLElement* object.
|
|
492
562
|
|
|
493
|
-
|
|
494
|
-
### `fsWidth` *number* *(Read only)*
|
|
495
|
-
|
|
496
|
-
Canvas 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.
|
|
497
|
-
|
|
498
|
-
### `gradient` *string*
|
|
499
|
-
|
|
500
|
-
Name of the color gradient used for analyzer graphs.
|
|
501
|
-
|
|
502
|
-
It must be a built-in or registered gradient name (see [`registerGradient()`](#registergradient-name-options-)).
|
|
503
|
-
|
|
504
|
-
`gradient` sets the gradient for both analyzer channels, but its read value represents only the gradient on the left (or single) channel.
|
|
505
|
-
|
|
506
|
-
When using a dual [`channelLayout`](#channellayout-string), use [`gradientLeft`](#gradientleft-string) and [`gradientRight`](#gradientright-string) to set/read the gradient on each channel individually.
|
|
507
|
-
|
|
508
|
-
Built-in gradients are shown below:
|
|
509
|
-
|
|
510
|
-
gradient | preview
|
|
511
|
-
------------|---------
|
|
512
|
-
'classic' | 
|
|
513
|
-
'orangered' | 
|
|
514
|
-
'prism' | 
|
|
515
|
-
'rainbow' | 
|
|
516
|
-
'steelblue' | 
|
|
517
|
-
|
|
518
|
-
See also [`splitGradient`](#splitgradient-boolean).
|
|
519
|
-
|
|
520
|
-
Defaults to **'classic'**.
|
|
521
|
-
|
|
522
|
-
### `gradientLeft` *string*
|
|
523
|
-
### `gradientRight` *string*
|
|
524
|
-
|
|
525
|
-
*Available since v4.0.0*
|
|
526
|
-
|
|
527
|
-
Select gradients for the left and right analyzer channels independently, for use with a dual [`channelLayout`](#channellayout-string).
|
|
528
|
-
|
|
529
|
-
**_Single_** channel layout will use the gradient selected by `gradientLeft`.
|
|
530
|
-
|
|
531
|
-
For **_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*.
|
|
532
|
-
|
|
533
|
-
See also [`gradient`](#gradient-string) and [`splitGradient`](#splitgradient-boolean).
|
|
534
|
-
|
|
535
|
-
### `gravity` *number*
|
|
536
|
-
|
|
537
|
-
*Available since v4.5.0*
|
|
538
|
-
|
|
539
|
-
Customize the acceleration of falling peaks.
|
|
540
|
-
|
|
541
|
-
It must be a number **greater than zero,** representing _thousands of pixels per second squared_. Invalid values are ignored and no error is thrown.
|
|
563
|
+
HTML element affected by the [`toggleFullscreen()`](#togglefullscreen) method.
|
|
542
564
|
|
|
543
|
-
|
|
565
|
+
See [`fsElement`](#fselement) in the constructor options context for more information.
|
|
544
566
|
|
|
545
|
-
|
|
567
|
+
### `fsHeight` *(read only)*
|
|
568
|
+
### `fsWidth` *(read only)*
|
|
546
569
|
|
|
547
|
-
|
|
570
|
+
Canvas dimensions used during fullscreen mode. These take the current pixel ratio into account and will change accordingly when [low-resolution mode](#lores) is set.
|
|
548
571
|
|
|
549
|
-
|
|
572
|
+
### `height`
|
|
550
573
|
|
|
551
|
-
|
|
552
|
-
### `width` *number*
|
|
574
|
+
**Value:** a *number* or *undefined*. The default value is `undefined`.
|
|
553
575
|
|
|
554
|
-
Nominal
|
|
576
|
+
Nominal height of the analyzer.
|
|
555
577
|
|
|
556
|
-
Setting
|
|
557
|
-
In that case, it's important that you constrain the
|
|
578
|
+
Setting either `height` or [`width`](#width) to `undefined` (default) will trigger the fluid/responsive behavior and the analyzer will try to adjust to the container's height and/or width.
|
|
579
|
+
In that case, it's important that you constrain the height of the container via CSS to prevent the canvas from growing indefinitely.
|
|
558
580
|
|
|
559
|
-
You can set both
|
|
581
|
+
You can set both `height` and [`width`](#width) at once using the [`setCanvasSize()`](#setcanvassize) method.
|
|
560
582
|
|
|
561
583
|
See also [`onCanvasResize`](#oncanvasresize-function).
|
|
562
584
|
|
|
563
|
-
?> The actual dimensions of the canvas may differ from
|
|
585
|
+
?> The actual dimensions of the canvas may differ from values set to `height` and `width`, depending on the device's [pixelRatio](#pixelratio-read-only), the [`loRes`](#lores) setting and while in fullscreen. For the actual values in pixels, read `height` and `width` directly on the [`canvas`](#canvas-htmlcanvaselement-object-read-only) object.
|
|
564
586
|
|
|
565
|
-
### `isAlphaBars` *
|
|
587
|
+
### `isAlphaBars` *(read only)*
|
|
566
588
|
|
|
567
589
|
*Available since v3.6.0*
|
|
568
590
|
|
|
569
|
-
|
|
570
|
-
or 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*.
|
|
591
|
+
Returns `true` when alpha bars are effectively being displayed, i.e., [`alphaBars`](#alphabars) is set to `"on"` or `"full"` and [`mode`](#mode) is set to `"bars"`.
|
|
571
592
|
|
|
572
|
-
### `isBandsMode` *
|
|
593
|
+
### `isBandsMode` *(read only)*
|
|
573
594
|
|
|
574
595
|
*Available since v4.0.0*
|
|
575
596
|
|
|
576
|
-
|
|
597
|
+
Returns `true` when [`bandResolution`](#bandresolution) is > `0`.
|
|
577
598
|
|
|
578
|
-
See also [`isOctaveBands`](#isoctavebands-
|
|
599
|
+
See also [`isOctaveBands`](#isoctavebands-read-only).
|
|
579
600
|
|
|
580
|
-
### `isDestroyed` *
|
|
601
|
+
### `isDestroyed` *(read only)*
|
|
581
602
|
|
|
582
603
|
*Available since v4.2.0*
|
|
583
604
|
|
|
584
|
-
|
|
605
|
+
Returns `true` when the object has been destroyed with [`destroy()`](#destroy).
|
|
585
606
|
|
|
586
|
-
### `isFullscreen` *
|
|
607
|
+
### `isFullscreen` *(read only)*
|
|
587
608
|
|
|
588
|
-
|
|
609
|
+
Returns `true` when the analyzer is being displayed in fullscreen.
|
|
589
610
|
|
|
590
611
|
See [`toggleFullscreen()`](#togglefullscreen).
|
|
591
612
|
|
|
592
|
-
### `isLedBars` *
|
|
613
|
+
### `isLedBars` *(read only)*
|
|
593
614
|
|
|
594
615
|
*Available since v3.6.0; formerly `isLedDisplay` (since v3.0.0)*
|
|
595
616
|
|
|
596
|
-
|
|
617
|
+
Returns `true` when LED bars are effectively being displayed, i.e., [`isBandsMode`](#isbandsmode-read-only) is `true`, [`ledBars`](#ledBars) is set to `"modern"` or `"vintage"` and [`radial`](#radial) is set to `0`.
|
|
597
618
|
|
|
598
|
-
### `
|
|
619
|
+
### `isOctaveBands` *(read only)*
|
|
599
620
|
|
|
600
621
|
*Available since v3.0.0*
|
|
601
622
|
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
### `isOctaveBands` *boolean* *(Read only)*
|
|
623
|
+
Returns `true` when [`isBandsMode`](#isbandsmode-read-only) is `true` and [`frequencyScale`](#frequencyscale-string) is set to `"log"`.
|
|
605
624
|
|
|
606
|
-
|
|
625
|
+
### `isOn` *(read only)*
|
|
607
626
|
|
|
608
|
-
|
|
627
|
+
Returns `true` if the analyzer process is running, or `false` if it's stopped.
|
|
609
628
|
|
|
610
|
-
|
|
629
|
+
See [`start()`](#start), [`stop()`](#stop) and [`toggleAnalyzer()`](#toggleanalyzer-).
|
|
611
630
|
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
See [`start()`](#start), [`stop()`](#stop) and [`toggleAnalyzer()`](#toggleanalyzer-boolean-).
|
|
615
|
-
|
|
616
|
-
### `isOutlineBars` *boolean* *(Read only)*
|
|
631
|
+
### `isOutlineBars` *(read only)*
|
|
617
632
|
|
|
618
633
|
*Available since v3.6.0*
|
|
619
634
|
|
|
620
|
-
|
|
621
|
-
|
|
635
|
+
Returns `true` when outlined bars are effectively being displayed, i.e., [`outlineBars`](#outlinebars) is set to `true`, [`mode`](#mode) is set to `"bars"`,
|
|
636
|
+
[`alphaBars`](#alphabars) is NOT set to `"full"`, [`isBandsMode`](#isbandsmode-read-only) is `true` and [`isLedBars`](#isledbars-read-only) is `false`.
|
|
622
637
|
|
|
623
|
-
### `isRoundBars` *
|
|
638
|
+
### `isRoundBars` *(read only)*
|
|
624
639
|
|
|
625
640
|
*Available since v4.1.0*
|
|
626
641
|
|
|
627
|
-
|
|
628
|
-
|
|
642
|
+
Returns `true` when round bars are effectively being displayed, i.e., [`roundBars`](#roundbars) is set to `true`, [`mode`](#mode) is set to `"bars"`,
|
|
643
|
+
[`alphaBars`](#alphabars) is NOT set to `"full"`, [`isBandsMode`](#isbandsmode-read-only) is `true` and [`isLedBars`](#isledbars-read-only) is `false`.
|
|
629
644
|
|
|
630
|
-
### `ledBars`
|
|
645
|
+
### `ledBars`
|
|
631
646
|
|
|
632
647
|
*Available since v3.6.0; formerly `showLeds` (since v1.0.0)*
|
|
633
648
|
|
|
634
|
-
|
|
649
|
+
**Value:** a *string*. The default value is `"off"`.
|
|
650
|
+
|
|
651
|
+
Determines the appearance of the LED bars. Only effective in **Bars** [`mode`](#mode), when [`bandResolution`](#bandresolution) > `0` and [`radial`](#radial) set to `0`.
|
|
635
652
|
|
|
636
|
-
|
|
653
|
+
value | [Constant](#constants) | Description | Preview
|
|
654
|
+
------------|------------------------|-------------|----------
|
|
655
|
+
`"off"` | `LEDS_OFF` | Disables effect | 
|
|
656
|
+
`"modern"` | `LEDS_MODERN` | Gradient-colored LEDs when [`colorMode`](#colormode) is set to `"gradient"` | 
|
|
657
|
+
`"vintage"` | `LEDS_VINTAGE` | Single color LEDs, determined by the `level` property of each color - see [registerTheme()](#registertheme) | 
|
|
637
658
|
|
|
638
|
-
|
|
659
|
+
Please note that `"modern"` and `"vintage"` will have the same look when [`colorMode`](#colormode) is set to `"bar-level"` or `"bar-index"`, as each bar will be a single color anyway.
|
|
639
660
|
|
|
640
|
-
|
|
661
|
+
?> The height and spacing of LED elements can be customized via [`setLeds()`](#setleds) method.
|
|
641
662
|
|
|
642
|
-
|
|
663
|
+
For effect priority when combined with other settings, see [`isLedBars`](#isledbars-read-only).
|
|
643
664
|
|
|
644
|
-
### `linearAmplitude`
|
|
665
|
+
### `linearAmplitude`
|
|
645
666
|
|
|
646
667
|
*Available since v4.0.0*
|
|
647
668
|
|
|
648
|
-
|
|
669
|
+
**Value:** a *boolean* value. The default value is `false`.
|
|
649
670
|
|
|
650
|
-
|
|
671
|
+
Whether to represent spectrum amplitudes in linear scale, instead of decibels (logarithmic).
|
|
651
672
|
|
|
652
|
-
|
|
673
|
+
This may improve the visualization of predominant tones, especially at higher frequencies, but it will make the entire spectrum look much quieter.
|
|
653
674
|
|
|
654
|
-
|
|
675
|
+
See also [`linearBoost`](#linearboost).
|
|
655
676
|
|
|
656
|
-
### `linearBoost`
|
|
677
|
+
### `linearBoost`
|
|
657
678
|
|
|
658
679
|
*Available since v4.0.0*
|
|
659
680
|
|
|
660
|
-
|
|
681
|
+
**Value:** a *number*. The default value is `1`.
|
|
661
682
|
|
|
662
|
-
|
|
683
|
+
Performs an *n*th-root operation to amplify low energy values when using linear scale for the amplitude.
|
|
663
684
|
|
|
664
|
-
|
|
685
|
+
It should be a number >= 1, while 1 means no boosting. Only effective when [`linearAmplitude`](#linearamplitude) is set to *true*.
|
|
665
686
|
|
|
666
|
-
### `lineWidth`
|
|
687
|
+
### `lineWidth`
|
|
667
688
|
|
|
668
689
|
*Available since v2.0.0*
|
|
669
690
|
|
|
670
|
-
|
|
691
|
+
**Value:** a *number*. The default value is `1`.
|
|
692
|
+
|
|
693
|
+
Line width for [Graph mode](#mode), or outline stroke in [frequency bands modes](#mode) when [`outlineBars`](#outlinebars) is *true*.
|
|
671
694
|
|
|
672
|
-
For the line to be distinguishable, set
|
|
695
|
+
For the line to be distinguishable, set [`fillAlpha`](#fillalpha) < 1.
|
|
673
696
|
|
|
674
|
-
|
|
697
|
+
### `loRes`
|
|
675
698
|
|
|
676
|
-
|
|
699
|
+
**Value:** a *boolean* value. The default value is `false`.
|
|
677
700
|
|
|
678
|
-
|
|
701
|
+
Whether to use low resolution mode, which halves the effective pixel ratio, resulting in four times less pixels to render.
|
|
679
702
|
|
|
680
|
-
|
|
703
|
+
This may improve performance significantly, especially in 4K+ monitors.
|
|
681
704
|
|
|
682
705
|
?> 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:
|
|
683
706
|
|
|
@@ -690,528 +713,522 @@ canvas {
|
|
|
690
713
|
|
|
691
714
|
This will prevent the canvas size from changing, when switching the low resolution mode on and off.
|
|
692
715
|
|
|
693
|
-
### `
|
|
716
|
+
### `maxDecibels`
|
|
694
717
|
|
|
695
|
-
*
|
|
718
|
+
**Value:** a *number*. The default value is `-25`.
|
|
696
719
|
|
|
697
|
-
|
|
720
|
+
Maximum amplitude value, in decibels, represented in the Y-axis of the analyzer.
|
|
698
721
|
|
|
699
|
-
|
|
722
|
+
Please note it must be a number less than or equal to zero, since 0 dB is the loudest sound possible.
|
|
700
723
|
|
|
701
|
-
|
|
724
|
+
See also [`minDecibels`](#mindecibels) and [`setSensitivity()`](#setsensitivity) .
|
|
702
725
|
|
|
703
|
-
|
|
726
|
+
### `maxFPS`
|
|
704
727
|
|
|
705
|
-
|
|
728
|
+
*Available since v4.2.0*
|
|
706
729
|
|
|
707
|
-
|
|
708
|
-
### `minDecibels` *number*
|
|
730
|
+
**Value:** a *number*. The default value is `0`.
|
|
709
731
|
|
|
710
|
-
|
|
732
|
+
Determines the maximum desired frame rate for the analyzer animation, in frames per second.
|
|
711
733
|
|
|
712
|
-
|
|
734
|
+
A value of `0` means the animation will run at the highest frame rate possible, limited by the refresh rate of your display.
|
|
735
|
+
For example, if you have a 144Hz monitor, the frame rate may reach up to 144 fps.
|
|
713
736
|
|
|
714
|
-
|
|
737
|
+
Usually, 60 fps is enough for a smooth animation, so setting `maxFPS` to `60` may help reducing CPU usage on high refresh rate monitors.
|
|
715
738
|
|
|
716
|
-
|
|
739
|
+
### `maxFreq`
|
|
717
740
|
|
|
718
|
-
|
|
741
|
+
**Value:** a *number*. The default value is `22000`.
|
|
719
742
|
|
|
720
|
-
|
|
743
|
+
Highest frequency represented in the X-axis of the analyzer, in Hertz (Hz).
|
|
721
744
|
|
|
722
|
-
|
|
745
|
+
The maximum allowed value is half the current sampling rate (which you can obtain via [`audioCtx.sampleRate`](#audioctx-read-only)), known as the [Nyquist frequency](https://en.wikipedia.org/wiki/Nyquist_frequency).
|
|
746
|
+
Values higher than that will be capped.
|
|
723
747
|
|
|
724
|
-
|
|
748
|
+
See also [`minFreq`](#minfreq) and [`setFreqRange()`](#setfreqrange).
|
|
725
749
|
|
|
726
|
-
|
|
750
|
+
### `minDecibels`
|
|
727
751
|
|
|
728
|
-
|
|
729
|
-
### `minFreq` *number*
|
|
752
|
+
**Value:** a *number*. The default value is `-85`.
|
|
730
753
|
|
|
731
|
-
|
|
754
|
+
Minimum amplitude value, in decibels, represented in the Y-axis of the analyzer.
|
|
732
755
|
|
|
733
|
-
|
|
756
|
+
See also [`maxDecibels`](#maxdecibels) and [`setSensitivity()`](#setsensitivity) .
|
|
734
757
|
|
|
735
|
-
|
|
736
|
-
Values higher than that will be capped.
|
|
758
|
+
### `minFreq`
|
|
737
759
|
|
|
738
|
-
|
|
760
|
+
**Value:** a *number*. The default value is `20`.
|
|
739
761
|
|
|
740
|
-
|
|
762
|
+
Lowest frequency represented in the X-axis of the analyzer, in Hertz (Hz).
|
|
741
763
|
|
|
742
|
-
|
|
764
|
+
It must be a number greater than zero. Invalid values will be ignored.
|
|
765
|
+
|
|
766
|
+
See also [`maxFreq`](#maxfreq) and [`setFreqRange()`](#setfreqrange).
|
|
767
|
+
|
|
768
|
+
### `mirror`
|
|
743
769
|
|
|
744
770
|
*Available since v3.3.0*
|
|
745
771
|
|
|
772
|
+
**Value:** a *number*. The default value is `0`.
|
|
773
|
+
|
|
746
774
|
When [`channelLayout`](#channellayout-string) is **dual-horizontal**, this property controls the orientation of the X-axis (frequencies) on both channels.
|
|
747
775
|
|
|
748
776
|
For other layouts, it horizontally mirrors the spectrum image to the left or right side.
|
|
749
777
|
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
mirror | Description
|
|
778
|
+
value | Description
|
|
753
779
|
:-----:|-------------
|
|
754
|
-
|
|
755
|
-
0
|
|
756
|
-
1
|
|
757
|
-
|
|
758
|
-
**Note:** On [`radial`](#radial-boolean) spectrum with channel layouts other than *dual-horizontal*, both `1` and `-1` have the same effect.
|
|
780
|
+
`-1` | Low frequencies meet at the center of the screen (mirror left)
|
|
781
|
+
`0` | No mirror effect or change to axis orientation (default)
|
|
782
|
+
`1` | High frequencies meet at the center of the screen (mirror right)
|
|
759
783
|
|
|
760
|
-
|
|
784
|
+
**Note:** On [`radial`](#radial) spectrum with channel layouts other than *dual-horizontal*, both `1` and `-1` have the same effect.
|
|
761
785
|
|
|
762
|
-
### `mode`
|
|
786
|
+
### `mode`
|
|
763
787
|
|
|
764
|
-
|
|
788
|
+
**Value:** a *string*. The default value is `"bars"`.
|
|
765
789
|
|
|
766
|
-
|
|
767
|
-
----:|:-----------:|------
|
|
768
|
-
0 | Discrete frequencies | *default*
|
|
769
|
-
1 | 1/24th octave bands or 240 bands | *use 'log' `frequencyScale` for octave bands*
|
|
770
|
-
2 | 1/12th octave bands or 120 bands | *use 'log' `frequencyScale` for octave bands*
|
|
771
|
-
3 | 1/8th octave bands or 80 bands | *use 'log' `frequencyScale` for octave bands*
|
|
772
|
-
4 | 1/6th octave bands or 60 bands | *use 'log' `frequencyScale` for octave bands*
|
|
773
|
-
5 | 1/4th octave bands or 40 bands | *use 'log' `frequencyScale` for octave bands*
|
|
774
|
-
6 | 1/3rd octave bands or 30 bands | *use 'log' `frequencyScale` for octave bands*
|
|
775
|
-
7 | Half octave bands or 20 bands | *use 'log' `frequencyScale` for octave bands*
|
|
776
|
-
8 | Full octave bands or 10 bands | *use 'log' `frequencyScale` for octave bands*
|
|
777
|
-
9 | *(not valid)* | *reserved*
|
|
778
|
-
10 | Graph | *since v1.1.0*
|
|
790
|
+
Determines the visualization mode.
|
|
779
791
|
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
792
|
+
value | [Constant](#constants) | Description
|
|
793
|
+
----------|------------------------|-----------------
|
|
794
|
+
`"bars"` | `MODE_BARS` | displays bars for each frequency or frequency band
|
|
795
|
+
`"graph"` | `MODE_GRAPH` | connects frequency/bands data points into continuous line with optional filled area graph
|
|
783
796
|
|
|
784
|
-
See also [`
|
|
797
|
+
See also [`bandResolution`](#bandresolution).
|
|
785
798
|
|
|
786
|
-
|
|
799
|
+
> **Migrating from legacy versions (< 5.0.0):**
|
|
800
|
+
>
|
|
801
|
+
> Legacy *mode* | `mode` | `bandResolution`
|
|
802
|
+
> --------------|---------|------------------
|
|
803
|
+
> 0 | "bars" | 0
|
|
804
|
+
> 1 through 8 | "bars" | 9 *minus* legacy mode
|
|
805
|
+
> 10 | "graph" | 0
|
|
787
806
|
|
|
788
|
-
### `noteLabels`
|
|
807
|
+
### `noteLabels`
|
|
789
808
|
|
|
790
809
|
*Available since v4.0.0*
|
|
791
810
|
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
For best visualization in [octave bands modes](#mode-number), make sure [`frequencyScale`](#frequencyscale-string) is set to *'log'*
|
|
795
|
-
and [`ansiBands`](#ansibands-boolean) is set to *false*, so bands are tuned to the equal temperament musical scale.
|
|
796
|
-
|
|
797
|
-
Defaults to **false**.
|
|
798
|
-
|
|
799
|
-
### `outlineBars` *boolean*
|
|
800
|
-
|
|
801
|
-
*Available since v3.6.0*
|
|
802
|
-
|
|
803
|
-
When *true* and [`mode`](#mode-number) is set to one of the **bands** modes, analyzer bars are rendered outlined, with customizable [`fillAlpha`](#fillalpha-number) and [`lineWidth`](#linewidth-number).
|
|
804
|
-
|
|
805
|
-
For effect priority when combined with other settings, see [`isOutlineBars`](#isoutlinebars-boolean-read-only).
|
|
811
|
+
**Value:** a *boolean* value. The default value is `false`.
|
|
806
812
|
|
|
807
|
-
|
|
813
|
+
Whether to displays musical note labels instead of frequency values, in the X-axis (when [`showScaleX`](#showscalex) is `true`).
|
|
808
814
|
|
|
809
|
-
|
|
815
|
+
For best visualization in [octave bands modes](#mode), make sure [`frequencyScale`](#frequencyscale) is set to `"log"`
|
|
816
|
+
and [`ansiBands`](#ansibands) is set to `false`, so bands are tuned to the equal temperament musical scale.
|
|
810
817
|
|
|
811
|
-
|
|
818
|
+
### `onCanvasDraw`
|
|
812
819
|
|
|
813
|
-
|
|
820
|
+
**Value:** a *function* or *undefined*. The default value is `undefined`.
|
|
814
821
|
|
|
815
|
-
|
|
822
|
+
A function to be called after **audioMotion-analyzer** finishes rendering each animation frame.
|
|
816
823
|
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
824
|
+
The callback function is passed two arguments: an *AudioMotionAnalyzer* object, and an object with the following properties:
|
|
825
|
+
- `timestamp`, a [*DOMHighResTimeStamp*](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp)
|
|
826
|
+
which indicates the elapsed time in milliseconds since the analyzer started running;
|
|
827
|
+
- `themes`, an array of the currently selected themes for the left (index 0) and right (index 1) analyzer channels.
|
|
820
828
|
|
|
821
|
-
|
|
829
|
+
Each element in the `themes` array is an object with the following structure:
|
|
822
830
|
|
|
823
|
-
|
|
831
|
+
```
|
|
832
|
+
{
|
|
833
|
+
name: <string>, // name of the theme active on this channel
|
|
834
|
+
colorStops: <array>, // each element is an object of { color: <string>, level: <number>, pos: <number> }
|
|
835
|
+
gradient: <CanvasGradient>,
|
|
836
|
+
mask: {
|
|
837
|
+
colorStops: <array>,
|
|
838
|
+
gradient: <CanvasGradient>
|
|
839
|
+
}
|
|
840
|
+
}
|
|
841
|
+
```
|
|
824
842
|
|
|
825
|
-
|
|
843
|
+
Usage example:
|
|
826
844
|
|
|
827
|
-
|
|
845
|
+
```js
|
|
846
|
+
const audioMotion = new AudioMotionAnalyzer(
|
|
847
|
+
document.getElementById('container'),
|
|
848
|
+
{
|
|
849
|
+
source: document.getElementById('audio'),
|
|
850
|
+
onCanvasDraw: drawCallback
|
|
851
|
+
}
|
|
852
|
+
);
|
|
828
853
|
|
|
829
|
-
|
|
854
|
+
function drawCallback( instance, { timestamp, themes } ) {
|
|
855
|
+
const baseSize = ( instance.isFullscreen ? 40 : 20 ) * instance.pixelRatio,
|
|
856
|
+
canvas = instance.canvas,
|
|
857
|
+
centerX = canvas.width / 2,
|
|
858
|
+
centerY = canvas.height / 2,
|
|
859
|
+
ctx = instance.canvasCtx,
|
|
860
|
+
maxHeight = centerY / 2,
|
|
861
|
+
maxWidth = centerX - baseSize * 5,
|
|
862
|
+
time = timestamp / 1e4;
|
|
830
863
|
|
|
831
|
-
|
|
864
|
+
// the energy value is used here to increase the font size and make the logo pulsate to the beat
|
|
865
|
+
ctx.font = `${ baseSize + instance.getEnergy() * 25 * instance.pixelRatio }px Orbitron, sans-serif`;
|
|
832
866
|
|
|
833
|
-
|
|
867
|
+
// use the right-channel gradient to fill text
|
|
868
|
+
ctx.fillStyle = themes[ 1 ].gradient;
|
|
869
|
+
ctx.textAlign = 'center';
|
|
870
|
+
ctx.globalCompositeOperation = 'lighter';
|
|
834
871
|
|
|
835
|
-
|
|
872
|
+
// the timestamp can be used to create effects and animations based on the elapsed time
|
|
873
|
+
ctx.fillText( 'audioMotion', centerX + maxWidth * Math.cos( time % Math.PI * 2 ), centerY + maxHeight * Math.sin( time % Math.PI * 16 ) );
|
|
874
|
+
}
|
|
875
|
+
```
|
|
836
876
|
|
|
837
|
-
|
|
877
|
+
For 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).
|
|
838
878
|
|
|
839
|
-
|
|
879
|
+
### `onCanvasResize`
|
|
840
880
|
|
|
841
|
-
|
|
881
|
+
**Value:** a *function* or *undefined*. The default value is `undefined`.
|
|
842
882
|
|
|
843
|
-
|
|
883
|
+
A function to be called whenever the analyzer canvas is resized.
|
|
844
884
|
|
|
845
|
-
|
|
885
|
+
The callback function is passed two arguments: a *string* which indicates the reason that triggered the call (see below) and the *AudioMotionAnalyzer* object of the caller instance.
|
|
846
886
|
|
|
847
|
-
|
|
887
|
+
Reason | Constant | Description
|
|
888
|
+
-------------|----------|-------------
|
|
889
|
+
`"create"` | `REASON_CREATE` | canvas created by the **audioMotion-analyzer** [constructor](#constructor)
|
|
890
|
+
`"fullscreenchange"` | `REASON_FULLSCREENCHANGE` | analyzer entered or left fullscreen mode
|
|
891
|
+
`"lores"` | `REASON_LORES` | [low resolution option](#lores) toggled on or off
|
|
892
|
+
`"resize"` | `REASON_RESIZE` |browser window or canvas container element were resized
|
|
893
|
+
`"user"` | `REASON_USER` |canvas dimensions changed by user script, via [`height`](#height) and [`width`](#width) properties, [`setCanvasSize()`](#setcanvassize-width-height-) or [`setOptions()`](#setoptions-options-) methods
|
|
848
894
|
|
|
849
|
-
|
|
895
|
+
Usage example:
|
|
850
896
|
|
|
851
|
-
|
|
897
|
+
```js
|
|
898
|
+
const audioMotion = new AudioMotionAnalyzer(
|
|
899
|
+
document.getElementById('container'),
|
|
900
|
+
{
|
|
901
|
+
source: document.getElementById('audio'),
|
|
902
|
+
onCanvasResize: ( reason, instance ) => {
|
|
903
|
+
console.log( `[${reason}] canvas size is: ${instance.canvas.width} x ${instance.canvas.height}` );
|
|
904
|
+
}
|
|
905
|
+
}
|
|
906
|
+
);
|
|
907
|
+
```
|
|
852
908
|
|
|
853
|
-
### `
|
|
909
|
+
### `outlineBars`
|
|
854
910
|
|
|
855
|
-
|
|
856
|
-
This is usually **1** for standard displays and **2** for retina / Hi-DPI screens.
|
|
911
|
+
*Available since v3.6.0*
|
|
857
912
|
|
|
858
|
-
|
|
913
|
+
**Value:** a *boolean* value. The default value is `false`.
|
|
859
914
|
|
|
860
|
-
|
|
915
|
+
Whether to render analyzer bars outlined, with customizable [`fillAlpha`](#fillalpha) and [`lineWidth`](#linewidth).
|
|
861
916
|
|
|
862
|
-
|
|
917
|
+
Only effective in Bars [`mode`](#mode) with [`bandResolution`](#bandresolution) > 0.
|
|
863
918
|
|
|
864
|
-
|
|
919
|
+
For effect priority when combined with other settings, see [`isOutlineBars`](#isoutlinebars-read-only).
|
|
865
920
|
|
|
866
|
-
|
|
921
|
+
### `peakDecayTime`
|
|
867
922
|
|
|
868
|
-
|
|
923
|
+
*Available since v5.0.0; formerly `peakFadeTime` (since v4.5.0)*
|
|
869
924
|
|
|
870
|
-
|
|
925
|
+
**Value:** a *number*. The default value is `750`.
|
|
871
926
|
|
|
872
|
-
|
|
927
|
+
Time in milliseconds for peaks to fall down from maximum amplitude to zero, or to completely fade out (when [`fadePeaks`](#fadepeaks) is `true`).
|
|
873
928
|
|
|
874
|
-
|
|
929
|
+
It must be a number greater than or equal to zero. Invalid values are ignored.
|
|
875
930
|
|
|
876
|
-
|
|
931
|
+
See also [`peakHoldTime`](#peakholdtime) and [`showPeaks`](#showpeaks).
|
|
877
932
|
|
|
878
|
-
### `
|
|
933
|
+
### `peakHoldTime`
|
|
879
934
|
|
|
880
|
-
*Available since v4.
|
|
935
|
+
*Available since v4.5.0*
|
|
881
936
|
|
|
882
|
-
|
|
937
|
+
**Value:** a *number*. The default value is `500`.
|
|
883
938
|
|
|
884
|
-
|
|
939
|
+
Time in milliseconds for peaks to hold their value before they begin to fall or fade.
|
|
885
940
|
|
|
886
|
-
|
|
941
|
+
It must be a number greater than or equal to zero. Invalid values are ignored.
|
|
887
942
|
|
|
888
|
-
|
|
943
|
+
See also [`fadePeaks`](#fadepeaks), [`peakDecayTime`](#peakdecaytime) and [`showPeaks`](#showpeaks).
|
|
889
944
|
|
|
890
|
-
### `
|
|
945
|
+
### `peakLine`
|
|
891
946
|
|
|
892
|
-
*Available since v4.
|
|
947
|
+
*Available since v4.2.0*
|
|
893
948
|
|
|
894
|
-
|
|
949
|
+
**Value:** a *number*. The default value is `0`.
|
|
895
950
|
|
|
896
|
-
|
|
951
|
+
Determines the line width used to connect the amplitude peaks, when [`mode`](#mode) is set to `"graph"`. Has no effect in Bars mode.
|
|
897
952
|
|
|
898
|
-
|
|
953
|
+
A value of `0` means no line.
|
|
899
954
|
|
|
900
|
-
|
|
955
|
+
Please note that [`peaks`](#peaks) must be set to either `"drop"` or `"fade"`, although peak lines will always display the *"drop"* behavior.
|
|
901
956
|
|
|
902
|
-
### `
|
|
957
|
+
### `peaks`
|
|
903
958
|
|
|
904
|
-
*Available since
|
|
959
|
+
*Available since v5.0.0; formerly `showPeaks` (since v1.0.0)*
|
|
905
960
|
|
|
906
|
-
|
|
961
|
+
**Value:** a *string*. The default value is `"drop"`.
|
|
907
962
|
|
|
908
|
-
|
|
963
|
+
Determines the display and behavior of amplitude peaks.
|
|
909
964
|
|
|
910
|
-
|
|
965
|
+
value | [Constant](#constants) | Description
|
|
966
|
+
---------|------------------------|--------------
|
|
967
|
+
`"off"` | `PEAKS_OFF` | Disable display of amplitude peaks (including [`peakLine`](#peakline))
|
|
968
|
+
`"drop"` | `PEAKS_DROP` | Display peaks that fall down over time
|
|
969
|
+
`"fade"` | `PEAKS_FADE` | Display peaks that fade out over time
|
|
911
970
|
|
|
912
|
-
|
|
971
|
+
See also [`peakDecayTime`](#peakdecaytime) and [`peakHoldTime`](#peakholdtime).
|
|
913
972
|
|
|
914
|
-
|
|
973
|
+
### `pixelRatio` *(read only)*
|
|
915
974
|
|
|
916
|
-
|
|
975
|
+
**Value:** a *number*.
|
|
917
976
|
|
|
918
|
-
|
|
919
|
-
|
|
977
|
+
Current [devicePixelRatio](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio).
|
|
978
|
+
This is usually **1** for standard displays and **2** (or higher) for retina / Hi-DPI screens.
|
|
920
979
|
|
|
921
|
-
|
|
980
|
+
Its value is halved when [`loRes`](#lores) is `true`.
|
|
922
981
|
|
|
923
|
-
|
|
982
|
+
You can refer to this value to adjust any additional drawings done in the canvas (via [callback function](#oncanvasdraw)).
|
|
924
983
|
|
|
925
|
-
### `
|
|
984
|
+
### `radial`
|
|
926
985
|
|
|
927
|
-
*Available since v2.
|
|
986
|
+
*Available since v2.4.0*
|
|
928
987
|
|
|
929
|
-
|
|
988
|
+
**Value:** a *number*. The default value is `0`.
|
|
930
989
|
|
|
931
|
-
|
|
990
|
+
Whether to render the spectrum analyzer as a circle with radial bars.
|
|
932
991
|
|
|
933
|
-
|
|
992
|
+
value | [Constant](#constants) | Description
|
|
993
|
+
------|------------------------|----------------
|
|
994
|
+
`0` | `RADIAL_OFF` | Disables radial
|
|
995
|
+
`1` | `RADIAL_OUTER` | Bars grow towards the edges of the screen
|
|
996
|
+
`-1` | `RADIAL_INNER` | Bars grow towards the center of the screen
|
|
934
997
|
|
|
935
|
-
|
|
998
|
+
When [`channelLayout`](#channellayout) is set to `"dual-vertical"`, left channel bars grow outwards and right channel bars grow inwards, so both `1` and `-1` values have the same effect.
|
|
936
999
|
|
|
937
|
-
|
|
1000
|
+
In radial view, [`ledBars`](#ledbars) effect is disabled.
|
|
938
1001
|
|
|
939
|
-
|
|
1002
|
+
See also [`radius`](#radius) and [`spinSpeed`](#spinspeed).
|
|
940
1003
|
|
|
941
|
-
|
|
1004
|
+
!> [See related known issue](#alphabars-and-fillalpha-wont-work-with-radial-on-firefox)
|
|
942
1005
|
|
|
943
|
-
|
|
1006
|
+
### `radius`
|
|
944
1007
|
|
|
945
|
-
|
|
1008
|
+
*Available since v4.4.0*
|
|
946
1009
|
|
|
947
|
-
*
|
|
1010
|
+
**Value:** a *number*. The default value is `0.5`.
|
|
948
1011
|
|
|
949
|
-
|
|
1012
|
+
Determines the inner radius of [`radial`](#radial) spectrum. It should be a number between `0.0` and `1.0`.
|
|
950
1013
|
|
|
951
|
-
|
|
952
|
-
can be barely noticeable with a band count greater than 20 (half-octave bands).
|
|
1014
|
+
This property has no effect when [`channelLayout`](#channellayout-string) is set to `"dual-vertical"`.
|
|
953
1015
|
|
|
954
|
-
|
|
1016
|
+
When [`radial`](#radial) is set to `-1`, this property controls how close to the center of the screen the bars can get.
|
|
955
1017
|
|
|
956
|
-
|
|
1018
|
+
### `reflexAlpha`
|
|
957
1019
|
|
|
958
|
-
|
|
1020
|
+
*Available since v2.1.0*
|
|
959
1021
|
|
|
960
|
-
|
|
1022
|
+
**Value:** a *number*. The default value is `0.15`.
|
|
961
1023
|
|
|
962
|
-
Determines
|
|
1024
|
+
Determines the reflection opacity. Only effective when [`reflexRatio`](#reflexratio) > 0.
|
|
963
1025
|
|
|
964
|
-
|
|
965
|
-
Opacity can be adjusted via [`bgAlpha`](#bgalpha-number) property, when [`overlay`](#overlay-boolean) is ***true***.
|
|
1026
|
+
It must be a number between `0.0` (completely transparent) and `1.0` (completely opaque).
|
|
966
1027
|
|
|
967
|
-
|
|
968
|
-
or transparent when [`overlay`](#overlay-boolean) is ***true***.
|
|
1028
|
+
### `reflexBright`
|
|
969
1029
|
|
|
970
|
-
|
|
1030
|
+
*Available since v2.3.0*
|
|
971
1031
|
|
|
972
|
-
|
|
1032
|
+
**Value:** a *number*. The default value is `1`.
|
|
973
1033
|
|
|
974
|
-
|
|
975
|
-
and setting `showBgColor` to ***true*** will make the "unlit" LEDs visible instead.
|
|
1034
|
+
Determines the reflection brightness. Only effective when [`reflexRatio`](#reflexratio) > 0.
|
|
976
1035
|
|
|
977
|
-
|
|
1036
|
+
Values lower than 1 darken the reflection, while values greater than 1 make it brighter.
|
|
978
1037
|
|
|
979
|
-
|
|
1038
|
+
!> [See related known issue](#reflexbright-wont-work-on-some-browsers)
|
|
980
1039
|
|
|
981
|
-
### `
|
|
1040
|
+
### `reflexFit`
|
|
982
1041
|
|
|
983
|
-
*
|
|
1042
|
+
*Available since v2.1.0*
|
|
984
1043
|
|
|
985
|
-
|
|
1044
|
+
**Value:** a *boolean* value. The default value is `true`.
|
|
986
1045
|
|
|
987
|
-
|
|
1046
|
+
Whether to shrink or stretch the analyzer reflection to fit the canvas. Only effective when [`reflexRatio`](#reflexratio) > 0.
|
|
988
1047
|
|
|
989
|
-
|
|
1048
|
+
When set to `false`, the reflected image may be cut at the bottom (when [`reflexRatio`](#reflexratio) < 0.5) or not fill the entire canvas (when [`reflexRatio`](#reflexratio) > 0.5).
|
|
990
1049
|
|
|
991
|
-
|
|
1050
|
+
### `reflexRatio`
|
|
992
1051
|
|
|
993
|
-
*
|
|
1052
|
+
*Available since v2.1.0*
|
|
994
1053
|
|
|
995
|
-
|
|
1054
|
+
**Value:** a *number*. The default value is `0`.
|
|
996
1055
|
|
|
997
|
-
|
|
1056
|
+
Determines the percentage of canvas height used for reflection.
|
|
998
1057
|
|
|
999
|
-
|
|
1058
|
+
It must be a number greater than or equal to `0` (no reflection), but less than `1`. Values out of range will be ignored.
|
|
1000
1059
|
|
|
1001
|
-
|
|
1060
|
+
For a perfect mirrored effect, set `reflexRatio` to `0.5` and both [`reflexAlpha`](#reflexalpha) and [`reflexBright`](#reflexbright) to `1`.
|
|
1002
1061
|
|
|
1003
|
-
|
|
1062
|
+
This has no effect when [`alphaBars`](#alphaBars) is set to `"full"`.
|
|
1004
1063
|
|
|
1005
|
-
|
|
1064
|
+
### `roundBars`
|
|
1006
1065
|
|
|
1007
|
-
|
|
1008
|
-
otherwise, values represent a percentage (0-100%) of the maximum amplitude.
|
|
1066
|
+
*Available since v4.1.0*
|
|
1009
1067
|
|
|
1010
|
-
|
|
1068
|
+
**Value:** a *boolean* value. The default value is `false`.
|
|
1011
1069
|
|
|
1012
|
-
|
|
1070
|
+
Whether to render analyzer bars with rounded corners at the top. Only effective for Bars [`mode`](#mode) with [`bandResolution`](#bandresolution) > 0.
|
|
1013
1071
|
|
|
1014
|
-
|
|
1072
|
+
In [`radial`](#radial) view this makes the top and bottom of bars to follow the curvatures of the outer and inner circles, respectivelly, although the effect
|
|
1073
|
+
can be barely noticeable with [`bandResolution`](#bandresolution) > `2` (half-octave bands).
|
|
1015
1074
|
|
|
1016
|
-
|
|
1075
|
+
This has no effect when [`ledBars`](#ledbars) is set to `true` or [`alphaBars`](#alphabars) is set to `"full"`.
|
|
1017
1076
|
|
|
1018
|
-
|
|
1077
|
+
See also [`isRoundBars`](#isroundbars-read-only).
|
|
1019
1078
|
|
|
1020
|
-
|
|
1079
|
+
### `showFPS`
|
|
1021
1080
|
|
|
1022
|
-
|
|
1081
|
+
**Value:** a *boolean* value. The default value is `false`.
|
|
1023
1082
|
|
|
1024
|
-
|
|
1083
|
+
Whether to display the current frame rate at the top right corner.
|
|
1025
1084
|
|
|
1026
|
-
|
|
1085
|
+
### `showLedMask`
|
|
1027
1086
|
|
|
1028
|
-
|
|
1087
|
+
**Value:** a *boolean* value. The default value is `true`.
|
|
1029
1088
|
|
|
1030
|
-
|
|
1089
|
+
Whether to display the "unlit" LED elements. Has no effect when [`ledBars`](#ledbars) is set to `"off"`.
|
|
1031
1090
|
|
|
1032
|
-
|
|
1091
|
+
`showLedMask` = *false* | `showLedMask` = *true*
|
|
1092
|
+
:----------------------:|:-----------------------:
|
|
1093
|
+
 | 
|
|
1033
1094
|
|
|
1034
|
-
|
|
1095
|
+
### `showScaleX`
|
|
1035
1096
|
|
|
1036
|
-
|
|
1097
|
+
*Available since v3.0.0; formerly `showScale` (since v1.0.0)*
|
|
1037
1098
|
|
|
1038
|
-
|
|
1099
|
+
**Value:** a *boolean* value. The default value is `true`.
|
|
1039
1100
|
|
|
1040
|
-
|
|
1041
|
-
|:--:|:--:|
|
|
1042
|
-
|  |  |
|
|
1101
|
+
Whether to display scale labels on the X-axis.
|
|
1043
1102
|
|
|
1044
|
-
|
|
1103
|
+
Several properties of the scale can be customized via [`setXAxis()`](#setxaxis) method.
|
|
1045
1104
|
|
|
1046
|
-
|
|
1105
|
+
See also [`noteLabels`](#notelabels).
|
|
1047
1106
|
|
|
1048
|
-
### `
|
|
1107
|
+
### `showScaleY`
|
|
1049
1108
|
|
|
1050
|
-
|
|
1109
|
+
*Available since v2.4.0*
|
|
1051
1110
|
|
|
1052
|
-
|
|
1111
|
+
**Value:** a *boolean* value. The default value is `false`.
|
|
1053
1112
|
|
|
1054
|
-
|
|
1113
|
+
Whether to display the level/amplitude scale on the Y-axis.
|
|
1055
1114
|
|
|
1056
|
-
|
|
1115
|
+
This option has no effect when [`radial`](#radial) is active or [`alphaBars`](#alphabars) is set to `"full"`.
|
|
1057
1116
|
|
|
1058
|
-
|
|
1117
|
+
When [`linearAmplitude`](#linearamplitude) is set to *false* (default), labels are shown in decibels (dB);
|
|
1118
|
+
otherwise, values represent a percentage (0-100%) of the maximum amplitude.
|
|
1059
1119
|
|
|
1060
|
-
|
|
1061
|
-
|:--:|:--:|
|
|
1062
|
-
|  |  |
|
|
1120
|
+
Several properties of the scale can be customized via [`setYAxis()`](#setyaxis) method.
|
|
1063
1121
|
|
|
1064
|
-
|
|
1122
|
+
See also [`minDecibels`](#mindecibels) and [`maxDecibels`](#maxdecibels).
|
|
1065
1123
|
|
|
1066
|
-
|
|
1124
|
+
### `smoothing`
|
|
1067
1125
|
|
|
1068
|
-
|
|
1126
|
+
**Value:** a *number*. The default value is `0.5`.
|
|
1069
1127
|
|
|
1070
|
-
|
|
1128
|
+
Determines the analyzer's [smoothingTimeConstant](https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/smoothingTimeConstant).
|
|
1071
1129
|
|
|
1072
|
-
|
|
1130
|
+
It must be a number between `0.0` and `1.0`. Lower values make the analyzer respond faster to changes.
|
|
1073
1131
|
|
|
1074
|
-
|
|
1075
|
-
Setting it to *false* in the [**constructor**](#constructor) options also prevents the canvas from being added to the document/container.
|
|
1132
|
+
### `spinSpeed`
|
|
1076
1133
|
|
|
1077
|
-
|
|
1078
|
-
will still be triggered on every animation frame, so you can use the [`getBars()`](#getbars) method to create your own visualizations.
|
|
1134
|
+
*Available since v2.4.0*
|
|
1079
1135
|
|
|
1080
|
-
|
|
1136
|
+
**Value:** a *number*. The default value is `0`.
|
|
1081
1137
|
|
|
1082
|
-
|
|
1138
|
+
Determines the rotation speed of the [`radial`](#radial) analyzer, in revolutions per minute.
|
|
1083
1139
|
|
|
1084
|
-
|
|
1140
|
+
Positive values will make the analyzer rotate clockwise, while negative values will make it rotate counterclockwise. A value of `0` means no rotation.
|
|
1085
1141
|
|
|
1086
|
-
|
|
1142
|
+
### `spreadGradient`
|
|
1087
1143
|
|
|
1088
|
-
|
|
1144
|
+
*Available since v5.0.0; formerly `splitGradient` (since v3.0.0)*
|
|
1089
1145
|
|
|
1090
|
-
|
|
1091
|
-
Higher values can be used to amplify the input, but it may cause distortion.
|
|
1146
|
+
**Value:** a *boolean* value. The default value is `false`.
|
|
1092
1147
|
|
|
1093
|
-
|
|
1148
|
+
When set to `true` causes the gradient to spread between both channels.
|
|
1094
1149
|
|
|
1095
|
-
|
|
1150
|
+
Only effective when [`channelLayout`](#channellayout-string) is set to `"dual-vertical"`, or `"dual-horizontal"` with `horizontal` [theme modifier](#setthememodifiers) set to `true`.
|
|
1096
1151
|
|
|
1097
|
-
|
|
1152
|
+
For best effect it is recommended to use the same color theme for both channels.
|
|
1098
1153
|
|
|
1099
|
-
*
|
|
1154
|
+
The effect is illustrated below, using the *"classic"* [theme](#theme-string) on dual-vertical channel layout.
|
|
1100
1155
|
|
|
1101
|
-
|
|
1156
|
+
| spreadGradient: *false* | spreadGradient: *true* |
|
|
1157
|
+
|:--:|:--:|
|
|
1158
|
+
|  |  |
|
|
1102
1159
|
|
|
1103
|
-
|
|
1160
|
+
### `useCanvas`
|
|
1104
1161
|
|
|
1105
|
-
|
|
1106
|
-
visualization of frequencies to which the human ear is more or less sensitive.
|
|
1162
|
+
*Available since v3.5.0*
|
|
1107
1163
|
|
|
1108
|
-
|
|
1164
|
+
**Value:** a *boolean* value. The default value is `true`.
|
|
1109
1165
|
|
|
1110
|
-
|
|
1166
|
+
Whether or not to render analyzer graphics to the [`canvas`](#canvas-read-only).
|
|
1167
|
+
Setting it to `false` in the [**constructor**](#constructor) options also prevents the canvas from being added to the container.
|
|
1111
1168
|
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
'' (empty string) | No weighting applied (default)
|
|
1115
|
-
'A' | A-weighting
|
|
1116
|
-
'B' | B-weighting
|
|
1117
|
-
'C' | C-weighting
|
|
1118
|
-
'D' | D-weighting
|
|
1119
|
-
'468' | ITU-R 468 weighting
|
|
1169
|
+
Please note that the analyzer processing runs regardless of the value of `useCanvas` and any callback defined for [`onCanvasDraw`](#oncanvasdraw)
|
|
1170
|
+
will still be triggered on every animation frame, so you can use the [`getBars()`](#getbars) method to create your own visualizations.
|
|
1120
1171
|
|
|
1121
|
-
|
|
1172
|
+
If you want to completely stop the analyzer's data processing, see [`stop()`](#stop).
|
|
1122
1173
|
|
|
1174
|
+
### `volume`
|
|
1123
1175
|
|
|
1124
|
-
|
|
1176
|
+
*Available since v3.0.0*
|
|
1125
1177
|
|
|
1126
|
-
|
|
1178
|
+
Output volume.
|
|
1127
1179
|
|
|
1128
|
-
*
|
|
1180
|
+
**Value:** a *number* value. The default value is `1`.
|
|
1129
1181
|
|
|
1130
|
-
|
|
1182
|
+
A value of `0` will mute the sound output, while a value of `1` will preserve the same input volume.
|
|
1183
|
+
Values higher than `1` can be used to amplify the input, but it may cause distortion.
|
|
1131
1184
|
|
|
1132
|
-
|
|
1185
|
+
Please note that changing the volume on the audio element will affect the amplitude of analyzer graphs, while this property does not.
|
|
1133
1186
|
|
|
1187
|
+
### `weightingFilter`
|
|
1134
1188
|
|
|
1135
|
-
|
|
1189
|
+
*Available since v4.0.0*
|
|
1136
1190
|
|
|
1137
|
-
|
|
1191
|
+
[Weighting filter](https://en.wikipedia.org/wiki/Weighting_filter) applied to analyzer data, for spectrum visualization only.
|
|
1138
1192
|
|
|
1139
|
-
|
|
1193
|
+
<img src="img/weigthing-filters-curves.png" class="align-right">
|
|
1140
1194
|
|
|
1141
|
-
|
|
1142
|
-
- `timestamp`, a [*DOMHighResTimeStamp*](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp)
|
|
1143
|
-
which indicates the elapsed time in milliseconds since the analyzer started running;
|
|
1144
|
-
- `canvasGradients`, an array of [*CanvasGradient*](https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient])
|
|
1145
|
-
objects currently in use on the left (or single) and right analyzer channels.
|
|
1195
|
+
**Value:** a *string*. The default value is `""`.
|
|
1146
1196
|
|
|
1147
|
-
|
|
1197
|
+
Value | [Constant](#constants) | Description
|
|
1198
|
+
--------|------------------------|---------------
|
|
1199
|
+
`""` | `FILTER_NONE` | No weighting applied (default)
|
|
1200
|
+
`"A"` | `FILTER_A` | A-weighting
|
|
1201
|
+
`"B"` | `FILTER_B` | B-weighting
|
|
1202
|
+
`"C"` | `FILTER_C` | C-weighting
|
|
1203
|
+
`"D"` | `FILTER_D` | D-weighting
|
|
1204
|
+
`"468"` | `FILTER_468` | ITU-R 468 weighting
|
|
1148
1205
|
|
|
1149
|
-
|
|
1206
|
+
?> Weighting filters only affect the visualization, **NOT** the audio output.
|
|
1150
1207
|
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
document.getElementById('container'),
|
|
1154
|
-
{
|
|
1155
|
-
source: document.getElementById('audio'),
|
|
1156
|
-
onCanvasDraw: drawCallback
|
|
1157
|
-
}
|
|
1158
|
-
);
|
|
1208
|
+
Each filter applies a different curve of gain/attenuation to specific frequency ranges, but the general idea is to adjust the
|
|
1209
|
+
visualization of frequencies to the sensitivity of the human ear.
|
|
1159
1210
|
|
|
1160
|
-
|
|
1161
|
-
const baseSize = ( instance.isFullscreen ? 40 : 20 ) * instance.pixelRatio,
|
|
1162
|
-
canvas = instance.canvas,
|
|
1163
|
-
centerX = canvas.width / 2,
|
|
1164
|
-
centerY = canvas.height / 2,
|
|
1165
|
-
ctx = instance.canvasCtx,
|
|
1166
|
-
maxHeight = centerY / 2,
|
|
1167
|
-
maxWidth = centerX - baseSize * 5,
|
|
1168
|
-
time = info.timestamp / 1e4;
|
|
1211
|
+
Refer to the [weighting filters viewer tool](/tools/weighting-filters.html) for response tables and an interactive version of the curves graph seen below.
|
|
1169
1212
|
|
|
1170
|
-
|
|
1171
|
-
ctx.font = `${ baseSize + instance.getEnergy() * 25 * instance.pixelRatio }px Orbitron, sans-serif`;
|
|
1213
|
+
### `width`
|
|
1172
1214
|
|
|
1173
|
-
|
|
1174
|
-
ctx.fillStyle = info.canvasGradients[1];
|
|
1175
|
-
ctx.textAlign = 'center';
|
|
1176
|
-
ctx.globalCompositeOperation = 'lighter';
|
|
1215
|
+
Nominal width of the analyzer.
|
|
1177
1216
|
|
|
1178
|
-
|
|
1179
|
-
ctx.fillText( 'audioMotion', centerX + maxWidth * Math.cos( time % Math.PI * 2 ), centerY + maxHeight * Math.sin( time % Math.PI * 16 ) );
|
|
1180
|
-
}
|
|
1181
|
-
```
|
|
1217
|
+
**Value:** a *number* or *undefined*. The default value is `undefined`.
|
|
1182
1218
|
|
|
1183
|
-
|
|
1219
|
+
See [`height`](#height) for more details.
|
|
1184
1220
|
|
|
1185
|
-
### `onCanvasResize` *function*
|
|
1186
1221
|
|
|
1187
|
-
|
|
1222
|
+
## Static properties
|
|
1188
1223
|
|
|
1189
|
-
|
|
1224
|
+
### `version` *string* *(Read only)*
|
|
1190
1225
|
|
|
1191
|
-
|
|
1192
|
-
-------|------------
|
|
1193
|
-
`'create'` | canvas created by the **audioMotion-analyzer** [constructor](#constructor)
|
|
1194
|
-
`'fschange'` | analyzer entered or left fullscreen mode
|
|
1195
|
-
`'lores'` | [low resolution option](#lores-boolean) toggled on or off
|
|
1196
|
-
`'resize'` | browser window or canvas container element were resized
|
|
1197
|
-
`'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
|
|
1226
|
+
*Available since v3.0.0*
|
|
1198
1227
|
|
|
1199
|
-
|
|
1200
|
-
the callback is triggered only when canvas dimensions *effectively* change from the previous state.
|
|
1228
|
+
Returns the version of the **audioMotion-analyzer** package.
|
|
1201
1229
|
|
|
1202
|
-
|
|
1230
|
+
Since 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.
|
|
1203
1231
|
|
|
1204
|
-
```js
|
|
1205
|
-
const audioMotion = new AudioMotionAnalyzer(
|
|
1206
|
-
document.getElementById('container'),
|
|
1207
|
-
{
|
|
1208
|
-
source: document.getElementById('audio'),
|
|
1209
|
-
onCanvasResize: ( reason, instance ) => {
|
|
1210
|
-
console.log( `[${reason}] canvas size is: ${instance.canvas.width} x ${instance.canvas.height}` );
|
|
1211
|
-
}
|
|
1212
|
-
}
|
|
1213
|
-
);
|
|
1214
|
-
```
|
|
1215
1232
|
|
|
1216
1233
|
## Methods
|
|
1217
1234
|
|
|
@@ -1235,7 +1252,7 @@ This method allows connecting the analyzer **output** to other audio processing
|
|
|
1235
1252
|
|
|
1236
1253
|
`node` must be an [*AudioNode*](https://developer.mozilla.org/en-US/docs/Web/API/AudioNode) instance.
|
|
1237
1254
|
|
|
1238
|
-
By default, the analyzer is connected to the speakers upon instantiation, unless you set [`connectSpeakers: false`](#connectspeakers
|
|
1255
|
+
By default, the analyzer is connected to the speakers upon instantiation, unless you set [`connectSpeakers: false`](#connectspeakers) in the constructor options.
|
|
1239
1256
|
|
|
1240
1257
|
See also [`disconnectOutput()`](#disconnectoutput-node-) and [`connectedTo`](#connectedto-array-read-only).
|
|
1241
1258
|
|
|
@@ -1257,7 +1274,7 @@ This method:
|
|
|
1257
1274
|
|
|
1258
1275
|
See usage example in the [minimal demo](/demo/minimal.html).
|
|
1259
1276
|
|
|
1260
|
-
See also [`isDestroyed`](#isdestroyed-
|
|
1277
|
+
See also [`isDestroyed`](#isdestroyed-read-only).
|
|
1261
1278
|
|
|
1262
1279
|
### `disconnectInput( [node], [stopTracks] )`
|
|
1263
1280
|
|
|
@@ -1300,142 +1317,455 @@ Returns an array with current data for each analyzer bar. Each array element is
|
|
|
1300
1317
|
freqLo: <number>, // lower edge frequency
|
|
1301
1318
|
freqHi: <number>, // upper edge frequency
|
|
1302
1319
|
peak: <array>, // peak values for left and right channels
|
|
1303
|
-
hold: <array>, // peak hold frames for left and right channels - values < 0 mean the peak is falling down
|
|
1320
|
+
hold: <array>, // peak hold frames for left and right channels - values < 0 mean the peak is fading or falling down
|
|
1304
1321
|
value: <array> // current amplitude on left and right channels
|
|
1305
1322
|
}
|
|
1306
1323
|
```
|
|
1307
1324
|
|
|
1308
|
-
`peak` and `value` elements are floats between 0 and 1, relative to the lowest and highest volume levels defined by [`minDecibels`](#mindecibels
|
|
1325
|
+
`peak` and `value` elements are floats between 0 and 1, relative to the lowest and highest volume levels defined by [`minDecibels`](#mindecibels) and [`maxDecibels`](#maxdecibels).
|
|
1309
1326
|
|
|
1310
|
-
`hold` values are integers and indicate the hold time (in frames) for the current peak.
|
|
1327
|
+
`hold` values are integers and indicate the hold time (in frames) for the current peak.
|
|
1328
|
+
Negative values mean the peak is currently fading or falling down, depending on the value of [`fadePeaks`](#fadepeaks).
|
|
1311
1329
|
|
|
1312
1330
|
Please 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.
|
|
1313
1331
|
|
|
1314
1332
|
You 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.
|
|
1315
1333
|
|
|
1316
|
-
### `getEnergy(
|
|
1334
|
+
### `getEnergy()`
|
|
1317
1335
|
|
|
1318
1336
|
*Available since v3.2.0*
|
|
1319
1337
|
|
|
1320
|
-
Returns
|
|
1338
|
+
Returns the amplitude of a specific frequency, or the average energy of a frequency range.
|
|
1339
|
+
|
|
1340
|
+
**Syntax:**
|
|
1341
|
+
|
|
1342
|
+
```js
|
|
1343
|
+
getEnergy()
|
|
1344
|
+
getEnergy(preset)
|
|
1345
|
+
getEnergy(freq)
|
|
1346
|
+
getEnergy(startFreq, endFreq)
|
|
1347
|
+
```
|
|
1321
1348
|
|
|
1322
1349
|
**If called with no parameters, it returns the overall spectrum energy** obtained by the average of amplitudes of the *currently displayed frequency bands*.
|
|
1323
1350
|
|
|
1324
|
-
|
|
1325
|
-
|
|
1351
|
+
Parameter | type | description
|
|
1352
|
+
----------|------|---------------
|
|
1353
|
+
`preset` | *string* | Name of a predefined frequency range, or "peak" (see below)
|
|
1354
|
+
`freq` | *number* | A single frequency to analyze, in Hertz
|
|
1355
|
+
`startFreq` | *number* | Inital frequency to analyze, in Hertz
|
|
1356
|
+
`endFreq` | *number* | Ending frequency to analyze, in Hertz
|
|
1326
1357
|
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1358
|
+
Preset | [Constant](#constants) | Description
|
|
1359
|
+
------------|------------------------|------------------
|
|
1360
|
+
`"peak"` | `ENERGY_PEAK` | peak overall energy value of the last 30 frames (approximately 0.5s)
|
|
1361
|
+
`"bass"` | `ENERGY_BASS` | average energy between 20 and 250 Hz
|
|
1362
|
+
`"lowMid"` | `ENERGY_LOWMID` | average energy between 250 and 500 Hz
|
|
1363
|
+
`"mid"` | `ENERGY_MIDRANGE` | average energy between 500 and 2000 Hz
|
|
1364
|
+
`"highMid"` | `ENERGY_HIGHMID` | average energy between 2000 and 4000 Hz
|
|
1365
|
+
`"treble"` | `ENERGY_TREBLE` | average energy between 4000 and 16000 Hz
|
|
1335
1366
|
|
|
1336
|
-
Please note that preset names are case-sensitive
|
|
1367
|
+
Please note that preset names are case-sensitive!
|
|
1337
1368
|
|
|
1338
1369
|
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.
|
|
1339
1370
|
|
|
1340
|
-
|
|
1371
|
+
**Return value:** a *number* between `0.0` and `1.0`, or `null` if preset name is invalid.
|
|
1372
|
+
|
|
1373
|
+
### `getOptions()`
|
|
1341
1374
|
|
|
1342
1375
|
*Available since v4.4.0*
|
|
1343
1376
|
|
|
1344
|
-
Returns
|
|
1377
|
+
Returns current analyzer settings.
|
|
1345
1378
|
|
|
1346
|
-
|
|
1379
|
+
**Syntax:**
|
|
1380
|
+
|
|
1381
|
+
```js
|
|
1382
|
+
getOptions()
|
|
1383
|
+
getOptions(ignore)
|
|
1384
|
+
```
|
|
1385
|
+
|
|
1386
|
+
Parameter | type | description
|
|
1387
|
+
----------|------|------------------
|
|
1388
|
+
`ignore` | *string* or *array* | a single property name or an array of property names that should **NOT** be included in the returned object
|
|
1347
1389
|
|
|
1348
1390
|
Callbacks and [constructor-specific properties](#constructor-specific-options) are NOT included in the object.
|
|
1349
1391
|
|
|
1350
|
-
|
|
1392
|
+
**Return value:** an [*Options object*](#options-object).
|
|
1393
|
+
|
|
1394
|
+
See also [`setOptions()`](#setoptions).
|
|
1395
|
+
|
|
1396
|
+
### `getTheme()`
|
|
1397
|
+
|
|
1398
|
+
*Available since v5.0.0*
|
|
1399
|
+
|
|
1400
|
+
Returns the name of the theme set for the given channel.
|
|
1401
|
+
|
|
1402
|
+
**Syntax:**
|
|
1403
|
+
|
|
1404
|
+
```js
|
|
1405
|
+
getTheme()
|
|
1406
|
+
getTheme(channel, includeModifiers)
|
|
1407
|
+
getTheme(includeModifiers)
|
|
1408
|
+
```
|
|
1409
|
+
|
|
1410
|
+
Parameter | type | description
|
|
1411
|
+
----------|------|-----------------
|
|
1412
|
+
`channel` | *number* | *(optional)* channel to set (`0` = left, `1` = right) - if not specified, considers channel 0
|
|
1413
|
+
`includeModifiers` | *boolean* | *(optional)* `true` to also return the state of theme modifiers
|
|
1414
|
+
|
|
1415
|
+
**Return value:** a *string* representing the theme name, or an *object* with `name` and `modifiers` properties.
|
|
1416
|
+
|
|
1417
|
+
See also [`setTheme()`](#settheme).
|
|
1418
|
+
|
|
1419
|
+
### `getThemeData()`
|
|
1420
|
+
|
|
1421
|
+
*Available since v5.0.0*
|
|
1422
|
+
|
|
1423
|
+
Returns a given theme's color properties.
|
|
1424
|
+
|
|
1425
|
+
**Syntax:**
|
|
1426
|
+
|
|
1427
|
+
```js
|
|
1428
|
+
getThemeData(name)
|
|
1429
|
+
```
|
|
1430
|
+
|
|
1431
|
+
`name` must be a *string* representing the name of an available theme - see [`getThemeList()`](#getthemelist).
|
|
1432
|
+
|
|
1433
|
+
**Return value:** an *object* (structure below) or `null` if theme name is invalid.
|
|
1434
|
+
|
|
1435
|
+
property | type | description
|
|
1436
|
+
---------|------|---------------
|
|
1437
|
+
`colorStops` | *array* | all entries are normalized as objects with `color`, `level` and `pos` properties
|
|
1438
|
+
`peakColor` | *string* | `undefined` if not originally defined in [theme registration](#registertheme)
|
|
1439
|
+
|
|
1440
|
+
**Example usage:**
|
|
1441
|
+
|
|
1442
|
+
```js
|
|
1443
|
+
console.log( audioMotion.getThemeData('classic') );
|
|
1444
|
+
|
|
1445
|
+
{
|
|
1446
|
+
colorStops: [
|
|
1447
|
+
{ color: "red", level: 1, pos: 0 },
|
|
1448
|
+
{ color: "yellow", level: 0.9, pos: 0.5 },
|
|
1449
|
+
{ color: "lime", level: 0.6, pos: 1 }
|
|
1450
|
+
],
|
|
1451
|
+
peakColor: undefined
|
|
1452
|
+
}
|
|
1453
|
+
```
|
|
1454
|
+
|
|
1455
|
+
### `getThemeList()`
|
|
1456
|
+
|
|
1457
|
+
*Available since v5.0.0*
|
|
1458
|
+
|
|
1459
|
+
Returns the names of available themes, including built-in and custom registered themes.
|
|
1460
|
+
|
|
1461
|
+
**Parametes:** none.
|
|
1462
|
+
|
|
1463
|
+
**Return value:** an *array* of *string*s.
|
|
1464
|
+
|
|
1465
|
+
### `registerTheme()`
|
|
1466
|
+
|
|
1467
|
+
*Available since v5.0.0; formerly `registerGradient()` (since v1.0.0)*
|
|
1351
1468
|
|
|
1352
|
-
|
|
1469
|
+
Registers a custom color theme.
|
|
1353
1470
|
|
|
1354
|
-
|
|
1471
|
+
**Syntax:**
|
|
1355
1472
|
|
|
1356
|
-
|
|
1473
|
+
```js
|
|
1474
|
+
registerTheme(name, options)
|
|
1475
|
+
```
|
|
1476
|
+
|
|
1477
|
+
parameter | type | description
|
|
1478
|
+
----------|------|-------------
|
|
1479
|
+
`name` | *string* | Names are **case sensitive** and will be used to select the theme via [`setTheme()`](#settheme) method.
|
|
1480
|
+
`options` | *object* | Contains the color information (see below).
|
|
1481
|
+
|
|
1482
|
+
**`options` object structure:**
|
|
1483
|
+
|
|
1484
|
+
property | type | description
|
|
1485
|
+
-------------|--------|-------------
|
|
1486
|
+
`colorStops` | *array* | **At least one array element is required.** Each one must be either a *string* (color in CSS format), or an *object* (see below).
|
|
1487
|
+
`peakColor` | *string* | Optional; if defined, **all peaks** will be painted this color, regardless of their levels.
|
|
1488
|
+
|
|
1489
|
+
**`colorStops` color object structure:**
|
|
1490
|
+
|
|
1491
|
+
property | type | description
|
|
1492
|
+
---------|--------|-------------
|
|
1493
|
+
`color` | *string* | Any valid CSS color format, e.g. 'red', '#f00', 'rgb(…)', 'hsl(…)', etc.
|
|
1494
|
+
`level` | *number* | Optional; sets the **upper level** threshold for applying this color to a bar (when [`colorMode`](#colormode-string) is set to `"bar-level"`) or LED segment (when [`ledBars`](#ledbars) is set to `"vintage"`). It must be a number between `0` and `1`, where `1` is the maximum amplitude (top of screen).
|
|
1495
|
+
`pos` | *number* | Optional; adjusts the position of a color within the generated gradient, applied 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.**
|
|
1357
1496
|
|
|
1358
|
-
|
|
1497
|
+
**Notes:**
|
|
1359
1498
|
|
|
1360
|
-
`
|
|
1499
|
+
- All colorStops will be normalized as color objects after registration, and missing `pos` and `level` values will be automatically calculated for uniform color distribution - you can obtain the computed values via [`getThemeData()`](#getthemedata);
|
|
1500
|
+
- Defining `level: 0` for a colorStop will effectively prevent that color from being used when [`colorMode`](#colormode-string) is set to `"bar-level"` or [`ledBars`](#ledbars) is set to `"vintage"`;
|
|
1501
|
+
|
|
1502
|
+
**Return value:** a *boolean* value, `true` on success or `false` on error (it does NOT throw an error, but a detailed warning message is logged to the console).
|
|
1503
|
+
|
|
1504
|
+
Example usage:
|
|
1361
1505
|
|
|
1362
1506
|
```js
|
|
1363
|
-
audioMotion.
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
|
|
1369
|
-
{ color: '
|
|
1507
|
+
audioMotion.registerTheme( 'classic-A', {
|
|
1508
|
+
colorStops: [ 'red', 'yellow', 'lime' ] // automatic color distribution
|
|
1509
|
+
});
|
|
1510
|
+
|
|
1511
|
+
audioMotion.registerTheme( 'classic-B', {
|
|
1512
|
+
colorStops: [ // custom levels, but auto gradient positions
|
|
1513
|
+
{ color: 'red' }, // top color is always assigned level: 1 (amplitude 100% and lower)
|
|
1514
|
+
{ color: 'yellow', level: .9 }, // use this color for amplitude ≤ 90% (but > 60%)
|
|
1515
|
+
{ color: 'lime', level: .6 } // use this color for amplitude ≤ 60%
|
|
1516
|
+
]
|
|
1517
|
+
});
|
|
1518
|
+
|
|
1519
|
+
audioMotion.registerTheme( 'bluey-A', {
|
|
1520
|
+
colorStops: [ // only colors are defined, so automatic distribution is done
|
|
1521
|
+
{ color: 'red' }, // this will be assigned level: 1, pos: 0
|
|
1522
|
+
{ color: '#1ea1df' } // this will be assigned level: 0.5, pos: 1
|
|
1523
|
+
] // note that level decreases, while pos increases, from top to bottom
|
|
1524
|
+
});
|
|
1525
|
+
|
|
1526
|
+
audioMotion.registerTheme( 'bluey-B', {
|
|
1527
|
+
colorStops: [
|
|
1528
|
+
{ color: 'red' }, // auto-assigned
|
|
1529
|
+
{ color: '#1ea1df', level: .9, pos: .15 } // set level and fine-tune gradient position, for similar look
|
|
1370
1530
|
]
|
|
1371
1531
|
});
|
|
1372
1532
|
```
|
|
1373
1533
|
|
|
1374
|
-
|
|
1534
|
+
Theme | [`ledBars`](#ledbars) = `"off"` | [`ledBars`](#ledbars) = `"vintage"` | [`colorMode`](#colormode-string) = `"bar-level"`
|
|
1535
|
+
------|:--------:|:-----------------------------------:|:------------------------------------------------:
|
|
1536
|
+
**classic-A**<br>(auto `pos` / auto `level`) |  |  | 
|
|
1537
|
+
**classic-B**<br>(auto `pos` / custom `level`) |  |  | 
|
|
1538
|
+
**bluey-A**<br>(auto `pos` / auto `level`) |  |  | 
|
|
1539
|
+
**bluey-B**<br>(custom `pos` / custom `level`) |  |  | 
|
|
1375
1540
|
|
|
1376
|
-
Each 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.
|
|
1377
|
-
- `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
|
|
1378
|
-
(or left and right sides, for horizontal gradients);
|
|
1379
|
-
- `level` defines the level threshold of a color, when [`colorMode`](#colormode-string) is set to **'bar-level'** or [`trueLeds`](#trueleds-boolean) is active.
|
|
1380
|
-
The 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
|
|
1381
|
-
amplitude (top of screen);
|
|
1382
|
-
- If `pos` or `level` are not explicitly defined, colors will be evenly distributed across the gradient or amplitude range;
|
|
1383
|
-
- Defining `level: 0` for a colorStop will effectively prevent that color from being used for *'bar-level'* colorMode and *trueLeds* effect.
|
|
1384
1541
|
|
|
1385
|
-
|
|
1542
|
+
See also: [unregisterTheme()](#unregistertheme-name)
|
|
1386
1543
|
|
|
1387
|
-
|
|
1544
|
+
?> Any color theme, including the built-in ones, may be modified at any time by simply re-registering the same theme name.
|
|
1388
1545
|
|
|
1389
|
-
|
|
1546
|
+
### `setCanvasSize()`
|
|
1390
1547
|
|
|
1391
|
-
|
|
1548
|
+
Shortand hand method for setting both [`height`](#height) and [`width`](#width) properties at once.
|
|
1392
1549
|
|
|
1393
|
-
|
|
1550
|
+
**Syntax:**
|
|
1394
1551
|
|
|
1395
|
-
|
|
1552
|
+
```js
|
|
1553
|
+
setCanvasSize(width, height)
|
|
1554
|
+
```
|
|
1396
1555
|
|
|
1397
|
-
|
|
1556
|
+
**Return value:** none (`undefined`).
|
|
1398
1557
|
|
|
1399
|
-
|
|
1558
|
+
### `setFreqRange()`
|
|
1400
1559
|
|
|
1401
|
-
|
|
1560
|
+
Shortand hand method for setting both [`minFreq`](#minfreq) and [`maxFreq`](#minfreq) properties at once.
|
|
1402
1561
|
|
|
1403
|
-
|
|
1562
|
+
**Syntax:**
|
|
1404
1563
|
|
|
1405
1564
|
```js
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1565
|
+
setFreqRange(minFreq, maxFreq)
|
|
1566
|
+
```
|
|
1567
|
+
|
|
1568
|
+
**Return value:** none (`undefined`).
|
|
1569
|
+
|
|
1570
|
+
### `setLeds()`
|
|
1571
|
+
|
|
1572
|
+
*Available since v5.0.0; formerly `setLedParams()` (since v3.2.0)*
|
|
1573
|
+
|
|
1574
|
+
Customizes the appearance of LED elements used to create the [`ledBars`](#ledbars) effect.
|
|
1575
|
+
|
|
1576
|
+
**Syntax:**
|
|
1577
|
+
|
|
1578
|
+
```js
|
|
1579
|
+
setLeds(ledHeight, gapHeight)
|
|
1411
1580
|
```
|
|
1412
1581
|
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
`
|
|
1416
|
-
`
|
|
1417
|
-
`spaceH` | **minimum** horizontal spacing ratio, relative to the available width for each band, or a literal pixel value if **>= 1**;<br>this behaves exactly like [`barSpace`](#barspace-number) and the largest spacing (resulting from either `barSpace` or `spaceH`) will prevail.
|
|
1582
|
+
parameter | type | description | default
|
|
1583
|
+
------------|----------|-----------------|----------:
|
|
1584
|
+
`ledHeight` | *number* | Height, in pixels, of each LED element. **A value of `0` will match the bar width (generates square LEDs).** | `8`
|
|
1585
|
+
`gapHeight` | *number* | Vertical gap, in pixels, between two consecutive LED elements. **A value of `0` will match the current [bar spacing](#barSpace).** | `8`
|
|
1418
1586
|
|
|
1419
|
-
|
|
1420
|
-
if necessary, the led count is decreased until both the led segment and the vertical spacing are at least 2px tall.
|
|
1587
|
+
**If called with no argument, or if ANY of the values is invalid, BOTH parameters are reset to their default values.**
|
|
1421
1588
|
|
|
1422
|
-
|
|
1589
|
+
**Return value:** none (`undefined`).
|
|
1423
1590
|
|
|
1424
|
-
?>
|
|
1591
|
+
?> You can experiment with different values in the [fluid demo](https://audiomotion.dev/demo/fluid.html).
|
|
1425
1592
|
|
|
1426
|
-
### `setOptions(
|
|
1593
|
+
### `setOptions()`
|
|
1427
1594
|
|
|
1428
1595
|
Shorthand method for setting several analyzer [properties](#properties) at once.
|
|
1429
1596
|
|
|
1430
|
-
|
|
1597
|
+
**Syntax:**
|
|
1598
|
+
|
|
1599
|
+
```js
|
|
1600
|
+
setOptions()
|
|
1601
|
+
setOptions(options)
|
|
1602
|
+
```
|
|
1603
|
+
|
|
1604
|
+
`options` must be an [**Options object**](#options-object). **If not passed (or `undefined`), all properties are reset to their default values.**
|
|
1605
|
+
|
|
1606
|
+
**Return value:** none (`undefined`).
|
|
1607
|
+
|
|
1608
|
+
See also [`getOptions()`](#getoptions).
|
|
1609
|
+
|
|
1610
|
+
### `setSensitivity()`
|
|
1611
|
+
|
|
1612
|
+
Shorthand method for setting both [`minDecibels`](#mindecibels) and [`maxDecibels`](#maxdecibels) properties at once.
|
|
1613
|
+
|
|
1614
|
+
**Syntax:**
|
|
1615
|
+
|
|
1616
|
+
```js
|
|
1617
|
+
setSensitivity(minDecibels, maxDecibels)
|
|
1618
|
+
```
|
|
1619
|
+
|
|
1620
|
+
**Return value:** none (`undefined`).
|
|
1621
|
+
|
|
1622
|
+
### `setTheme()`
|
|
1623
|
+
|
|
1624
|
+
*Available since v5.0.0*
|
|
1625
|
+
|
|
1626
|
+
Sets the color theme for one or both analyzer channels.
|
|
1627
|
+
|
|
1628
|
+
**Syntax:**
|
|
1629
|
+
|
|
1630
|
+
```js
|
|
1631
|
+
setTheme(name, channel)
|
|
1632
|
+
setTheme(name, modifiers, channel)
|
|
1633
|
+
setTheme(themeObject, channel)
|
|
1634
|
+
```
|
|
1635
|
+
|
|
1636
|
+
Parameter | type | description
|
|
1637
|
+
--------------|--------|------------------
|
|
1638
|
+
`name` | *string* or *array* | theme name, or an array of theme names - must be a name as returned by [`getThemeList()`](#getthemelist)
|
|
1639
|
+
`modifiers` | *object* | *(optional)* a modifiers object, as returned by [`getThemeModifiers()`](#getthememodifiers)
|
|
1640
|
+
`themeObject` | *object* or *array* | a theme object, as returned by [`getTheme()`](#gettheme) or an array of such objects
|
|
1641
|
+
`channel` | *number* | *(optional)* channel to set (`0` = left, `1` = right)
|
|
1642
|
+
|
|
1643
|
+
When passing arrays for `name` or `themeObject` you can assign different themes to each channel at once.
|
|
1644
|
+
When using a single `name` or `themeObject`, if `channel` is not specified, the same theme will be applied to both channels.
|
|
1431
1645
|
|
|
1432
|
-
|
|
1646
|
+
!> Note that when setting theme modifiers, properties not defined in the passed object will be reset to their default values. To selectively enable or disable modifiers while preserving others, use [`setThemeModifiers( name, state )`](#setthememodifiers).
|
|
1433
1647
|
|
|
1434
|
-
|
|
1648
|
+
**Return value:** none (`undefined`).
|
|
1435
1649
|
|
|
1436
|
-
|
|
1650
|
+
See also [`channelLayout`](#channellayout), [`registerTheme()`](#registertheme) and [`spreadGradient`](#spreadgradient).
|
|
1437
1651
|
|
|
1438
|
-
|
|
1652
|
+
### `setThemeModifiers()`
|
|
1653
|
+
|
|
1654
|
+
**Syntax:**
|
|
1655
|
+
|
|
1656
|
+
```js
|
|
1657
|
+
setThemeModifiers()
|
|
1658
|
+
setThemeModifiers(modifier, state, channel)
|
|
1659
|
+
setThemeModifiers(modifiersObject, channel)
|
|
1660
|
+
```
|
|
1661
|
+
|
|
1662
|
+
Parameter | type | description
|
|
1663
|
+
--------------|--------|------------------
|
|
1664
|
+
`modifier` | *string* | modifier to set (see below)
|
|
1665
|
+
`state` | *boolean* | desired state for selected modifier
|
|
1666
|
+
`modifiersObject` | *object* | modifiers object, as returned by [`getThemeModifiers()`](#getthememodifiers)
|
|
1667
|
+
`channel` | *number* | *(optional)* channel to set (`0` = left, `1` = right)
|
|
1668
|
+
|
|
1669
|
+
Modifier | description
|
|
1670
|
+
---------|----------------
|
|
1671
|
+
`"horizontal"` | Renders the color gradient horizontally across the screen, instead of vertically - has no effect in [`radial`](#radial) spectrum or when [`ledBars`](#ledbars) is set to `"vintage"`
|
|
1672
|
+
`"revert"` | Reverts the order of the theme colors
|
|
1673
|
+
|
|
1674
|
+
**Return value:** none (`undefined`).
|
|
1675
|
+
|
|
1676
|
+
### `setXAxis()`
|
|
1677
|
+
|
|
1678
|
+
*Available since v5.0.0*
|
|
1679
|
+
|
|
1680
|
+
Customize the appearance of the X-axis labels.
|
|
1681
|
+
|
|
1682
|
+
**Syntax:**
|
|
1683
|
+
|
|
1684
|
+
```js
|
|
1685
|
+
setXAxis()
|
|
1686
|
+
setXAxis(options)
|
|
1687
|
+
```
|
|
1688
|
+
|
|
1689
|
+
**If called with no argument, all properties will be reset to their default values.**
|
|
1690
|
+
|
|
1691
|
+
If `options` is defined, it should be an object with the structure below (all properties are optional).
|
|
1692
|
+
|
|
1693
|
+
property | type | description | default
|
|
1694
|
+
-------------------|-----------|-------------|---------
|
|
1695
|
+
`addLabels` | *boolean* | Contents of `labels` will be *added* to the default labels, instead of replacing them | `false`
|
|
1696
|
+
`backgroundColor` | *string* | Background color of the X-axis; any valid CSS color format is acceptable; use a blank string or 'transparent' for fully transparent background | `"#0008"`
|
|
1697
|
+
`color` | *string* | Color of labels | `"#fff"`
|
|
1698
|
+
`height` | *number* | Height of the X-axis; a number between `0.0` and `1.0` (recommended for responsivity) represents a fraction of the canvas width or height, whichever is smaller; numbers greater than 1 represent a fixed value in pixels | `0.03`
|
|
1699
|
+
`highlightColor` | *string* | Color used to highlight *C* notes when [`noteLabels`](#notelabels) is *true*, or those highlighted via `labels` definition (see below) | `"#4f4"`
|
|
1700
|
+
`labels` | *array* | Custom labels; each element of the array must be either a number, representing the frequency, or an array of [frequency<number>, label<string>, highlight?<boolean>] | octaves center frequencies
|
|
1701
|
+
`overlay` | *boolean* | Whether the X-axis should overlay the bottom of the analyzer area | `false`
|
|
1702
|
+
|
|
1703
|
+
**Return value:** none (`undefined`).
|
|
1704
|
+
|
|
1705
|
+
**Example usage:**
|
|
1706
|
+
|
|
1707
|
+
```js
|
|
1708
|
+
audioMotion.setXAxis({
|
|
1709
|
+
addLabels: true, // add custom labels on top of default ones
|
|
1710
|
+
backgroundColor: '', // transparent background on the axis bar
|
|
1711
|
+
labels: [
|
|
1712
|
+
[ 440, 'A4', true ], // highlight A4 label at 440 Hz
|
|
1713
|
+
800, // additional label at 800 Hz
|
|
1714
|
+
[ 3000, '|' ], // just a tick mark at 3 kHz
|
|
1715
|
+
],
|
|
1716
|
+
});
|
|
1717
|
+
```
|
|
1718
|
+
|
|
1719
|
+
> **Notes:**
|
|
1720
|
+
>
|
|
1721
|
+
> - The axis height also defines the labels font size (half its value). A minimum of 20 pixels is enforced for the computed `height` value;
|
|
1722
|
+
> - Custom labels are not displayed when [`noteLabels`](#notelabels) is *true*.
|
|
1723
|
+
|
|
1724
|
+
### `setYAxis()`
|
|
1725
|
+
|
|
1726
|
+
*Available since v5.0.0*
|
|
1727
|
+
|
|
1728
|
+
Customize the appearance of the Y-axis labels.
|
|
1729
|
+
|
|
1730
|
+
**Syntax:**
|
|
1731
|
+
|
|
1732
|
+
```js
|
|
1733
|
+
setYAxis()
|
|
1734
|
+
setYAxis(options)
|
|
1735
|
+
```
|
|
1736
|
+
|
|
1737
|
+
**If called with no argument, all properties will be reset to their default values.**
|
|
1738
|
+
|
|
1739
|
+
If `options` is defined, it should be an object with the structure below (all properties are optional).
|
|
1740
|
+
|
|
1741
|
+
property | type | description | default
|
|
1742
|
+
-----------------|---------|-------------|---------
|
|
1743
|
+
color | string | Color of labels and lines | `"#888"`
|
|
1744
|
+
dbInterval | number | Interval between labels, in decibels - used when [`linearAmplitude`](#linearamplitude) is *false* | `10`
|
|
1745
|
+
linearInterval | number | Interval between labels, in percentage values - used when [`linearAmplitude`](#linearamplitude) is *true* | `20`
|
|
1746
|
+
lineDash | array | Line style - [format reference](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash) | `[2,4]`
|
|
1747
|
+
operation | array | Compositing operation used to draw labels and lines - [Reference](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation) | `"destination-over"`
|
|
1748
|
+
showSubdivisions | array | Whether to show subdivision lines between two labels | `true`
|
|
1749
|
+
subLineColor | string | Line color used for subdivisions | `"#555"`
|
|
1750
|
+
subLineDash | array | Line style for subdivisions (see `lineDash` above) | `[2,8]``
|
|
1751
|
+
width | number | Width of the Y-axis; a number between `0.0` and `1.0` represents a fraction of the canvas width or height, whichever is smaller; numbers greater than `1` represent a fixed value in pixels | `0.03`
|
|
1752
|
+
|
|
1753
|
+
**Return value:** none (`undefined`).
|
|
1754
|
+
|
|
1755
|
+
**Example usage:**
|
|
1756
|
+
|
|
1757
|
+
```js
|
|
1758
|
+
audioMotion.setYAxis({
|
|
1759
|
+
linearInterval: 10,
|
|
1760
|
+
operation: 'screen',
|
|
1761
|
+
showSubdivisions: false,
|
|
1762
|
+
});
|
|
1763
|
+
```
|
|
1764
|
+
|
|
1765
|
+
> **Notes:**
|
|
1766
|
+
>
|
|
1767
|
+
> - The axis width also affects the labels font size (half its value). A minimum of 20 pixels is enforced for the computed `width` value;
|
|
1768
|
+
> - Some values of `operation` may make the visualization of analyzer graphs impossible.
|
|
1439
1769
|
|
|
1440
1770
|
### `start()`
|
|
1441
1771
|
|
|
@@ -1443,9 +1773,11 @@ Adjust the analyzer's sensitivity. See [`minDecibels`](#mindecibels-number) and
|
|
|
1443
1773
|
|
|
1444
1774
|
Starts the analyzer data processing and animation.
|
|
1445
1775
|
|
|
1446
|
-
The analyzer is started by default after initialization, unless you specify [`start: false`](#start
|
|
1776
|
+
The analyzer is started by default after initialization, unless you specify [`start: false`](#start) in the [constructor](#constructor) options.
|
|
1777
|
+
|
|
1778
|
+
**Return value:** none (`undefined`).
|
|
1447
1779
|
|
|
1448
|
-
See also [`stop()`](#stop), [`toggleAnalyzer()`](#toggleanalyzer-
|
|
1780
|
+
See also [`stop()`](#stop), [`toggleAnalyzer()`](#toggleanalyzer-) and [`isOn`](#ison-read-only).
|
|
1449
1781
|
|
|
1450
1782
|
### `stop()`
|
|
1451
1783
|
|
|
@@ -1455,17 +1787,30 @@ Stops the analyzer process.
|
|
|
1455
1787
|
|
|
1456
1788
|
When the analyzer is off, no audio data is processed and no callbacks to [`onCanvasDraw`](#oncanvasdraw-function) will be triggered.
|
|
1457
1789
|
|
|
1458
|
-
The analyzer can be resumed with [`start()`](#start) or [`toggleAnalyzer()`](#toggleanalyzer-
|
|
1790
|
+
The analyzer can be resumed with [`start()`](#start) or [`toggleAnalyzer()`](#toggleanalyzer-).
|
|
1791
|
+
|
|
1792
|
+
**Return value:** none (`undefined`).
|
|
1459
1793
|
|
|
1460
|
-
See also [`destroy()`](#destroy) and [`isOn`](#ison-
|
|
1794
|
+
See also [`destroy()`](#destroy) and [`isOn`](#ison-read-only).
|
|
1461
1795
|
|
|
1462
|
-
### `toggleAnalyzer(
|
|
1796
|
+
### `toggleAnalyzer()`
|
|
1463
1797
|
|
|
1464
|
-
Toggles the analyzer
|
|
1798
|
+
Toggles the analyzer process state.
|
|
1465
1799
|
|
|
1466
|
-
|
|
1800
|
+
**Syntax:**
|
|
1467
1801
|
|
|
1468
|
-
|
|
1802
|
+
```js
|
|
1803
|
+
toggleAnalyzer()
|
|
1804
|
+
toggleAnalyzer(force)
|
|
1805
|
+
```
|
|
1806
|
+
|
|
1807
|
+
parameter | type | description
|
|
1808
|
+
----------|------|------------
|
|
1809
|
+
`force` | *boolean* | forces the desired state - `true` to start or `false` to stop the analyzer
|
|
1810
|
+
|
|
1811
|
+
**Return value:** a *boolean* value, representing the resulting state.
|
|
1812
|
+
|
|
1813
|
+
See also [`start()`](#start), [`stop()`](#stop) and [`isOn`](#ison-read-only).
|
|
1469
1814
|
|
|
1470
1815
|
### `toggleFullscreen()`
|
|
1471
1816
|
|
|
@@ -1474,6 +1819,8 @@ Toggles fullscreen mode on / off.
|
|
|
1474
1819
|
By default, only the canvas is sent to fullscreen.
|
|
1475
1820
|
You can set the [`fsElement`](#fselement-htmlelement-object) constructor option to a parent container, to keep desired interface elements visible during fullscreen.
|
|
1476
1821
|
|
|
1822
|
+
**Return value:** none (`undefined`).
|
|
1823
|
+
|
|
1477
1824
|
?> 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.
|
|
1478
1825
|
|
|
1479
1826
|
|
|
@@ -1481,36 +1828,29 @@ You can set the [`fsElement`](#fselement-htmlelement-object) constructor option
|
|
|
1481
1828
|
|
|
1482
1829
|
*Available since v2.0.0*
|
|
1483
1830
|
|
|
1484
|
-
**audioMotion-analyzer** uses a custom error object to throw errors
|
|
1831
|
+
**audioMotion-analyzer** uses a custom error object to throw errors.
|
|
1485
1832
|
|
|
1486
|
-
The `code` property is a
|
|
1833
|
+
The `code` property is a *number*. [Constants](#constants) are available to simplify checking for error codes.
|
|
1487
1834
|
|
|
1488
|
-
code
|
|
1489
|
-
|
|
1490
|
-
ERR_AUDIO_CONTEXT_FAIL
|
|
1491
|
-
|
|
1492
|
-
ERR_INVALID_AUDIO_SOURCE
|
|
1493
|
-
ERR_INVALID_MODE | User tried to set the visualization [`mode`](#mode-number) to an invalid value.
|
|
1494
|
-
ERR_FREQUENCY_TOO_LOW | User tried to set the [`minFreq`](#minfreq-number) or [`maxFreq`](#maxfreq-number) properties to a value lower than 1.
|
|
1495
|
-
ERR_GRADIENT_INVALID_NAME | The `name` parameter for [`registerGradient()`](#registergradient-name-options-) must be a non-empty string.
|
|
1496
|
-
ERR_GRADIENT_NOT_AN_OBJECT | The `options` parameter for [`registerGradient()`](#registergradient-name-options-) must be an object.
|
|
1497
|
-
ERR_GRADIENT_MISSING_COLOR | The `options` parameter for [`registerGradient()`](#registergradient-name-options-) must define at least two color-stops.
|
|
1498
|
-
ERR_REFLEX_OUT_OF_RANGE | Tried to assign a value < 0 or >= 1 to [`reflexRatio`](#reflexratio-number) property.
|
|
1499
|
-
ERR_UNKNOWN_GRADIENT | User tried to [select a gradient](#gradient-string) not previously registered.
|
|
1835
|
+
code | Constant | Error description
|
|
1836
|
+
-----|---------------------|--------------------
|
|
1837
|
+
`1` | `ERR_AUDIO_CONTEXT_FAIL` | Could not create audio context. The user agent may lack support for the Web Audio API.
|
|
1838
|
+
`2` | `ERR_INVALID_AUDIO_CONTEXT` | [Audio context](#audioctx-read-only) provided by user is not valid.
|
|
1839
|
+
`3` | `ERR_INVALID_AUDIO_SOURCE` | Audio source provided in [`source`](#source) option or [`connectInput()`](#connectinput) method is not an instance of HTMLMediaElement or AudioNode.
|
|
1500
1840
|
|
|
1501
1841
|
|
|
1502
1842
|
## Known Issues
|
|
1503
1843
|
|
|
1504
|
-
### reflexBright won't work on
|
|
1844
|
+
### reflexBright won't work on Safari <!-- {docsify-ignore} -->
|
|
1505
1845
|
|
|
1506
|
-
[`reflexBright`](#reflexbright
|
|
1507
|
-
which is [currently not supported
|
|
1846
|
+
[`reflexBright`](#reflexbright) feature relies on the [`filter`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter) property of the Canvas API,
|
|
1847
|
+
which is [currently not supported by Safari](https://caniuse.com/#feat=mdn-api_canvasrenderingcontext2d_filter).
|
|
1508
1848
|
|
|
1509
1849
|
### alphaBars and fillAlpha won't work with Radial on Firefox <!-- {docsify-ignore} -->
|
|
1510
1850
|
|
|
1511
|
-
On Firefox, [`alphaBars`](#alphaBars
|
|
1851
|
+
On Firefox, [`alphaBars`](#alphaBars) and [`fillAlpha`](#fillalpha) won't work with [`radial`](#radial) spectrum when using hardware acceleration, due to [this bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1164912).
|
|
1512
1852
|
|
|
1513
|
-
### Visualization of live streams won't work on Safari {docsify-ignore}
|
|
1853
|
+
### Visualization of live streams won't work on Safari <!-- {docsify-ignore} -->
|
|
1514
1854
|
|
|
1515
1855
|
Safari'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).
|
|
1516
1856
|
|
|
@@ -1525,7 +1865,7 @@ The `import` statement must be inside a `script` which has the `type="module"` p
|
|
|
1525
1865
|
|
|
1526
1866
|
```html
|
|
1527
1867
|
<script type="module">
|
|
1528
|
-
import AudioMotionAnalyzer from 'https://cdn.skypack.dev/audiomotion-analyzer?min';
|
|
1868
|
+
import AudioMotionAnalyzer from 'https://cdn.skypack.dev/audiomotion-analyzer@alpha?min';
|
|
1529
1869
|
|
|
1530
1870
|
// your code here
|
|
1531
1871
|
</script>
|
|
@@ -1539,7 +1879,7 @@ Or
|
|
|
1539
1879
|
|
|
1540
1880
|
### Error message: `MediaElementAudioSource outputs zeroes due to CORS access restrictions` <!-- {docsify-ignore} -->
|
|
1541
1881
|
|
|
1542
|
-
Make sure the media element (`audio` or `video` tag) connected to **audioMotion-analyzer** has the `crossorigin
|
|
1882
|
+
Make sure the media element (`audio` or `video` tag) connected to **audioMotion-analyzer** has the `crossorigin="anonymous"` property, like so:
|
|
1543
1883
|
|
|
1544
1884
|
```html
|
|
1545
1885
|
<audio id="myAudio" src="https://example.com/stream" controls crossorigin="anonymous"></audio>
|
|
@@ -1576,6 +1916,7 @@ See the [minimal demo](/demo/minimal.html) code for an example.
|
|
|
1576
1916
|
|
|
1577
1917
|
* Thanks to my wife, Virginia, for her never-ending love and support! 💞
|
|
1578
1918
|
* 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**
|
|
1919
|
+
* Thanks to all [code contributors](https://github.com/hvianna/audioMotion-analyzer/graphs/contributors) and [donators](https://ko-fi.com/hvianna#middleColumn)
|
|
1579
1920
|
* [HTML Canvas Reference @W3Schools](https://www.w3schools.com/tags/ref_canvas.asp)
|
|
1580
1921
|
* [Web Audio API specification](https://webaudio.github.io/web-audio-api/)
|
|
1581
1922
|
* [Web Audio API documentation @MDN](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)
|
|
@@ -1584,7 +1925,6 @@ See the [minimal demo](/demo/minimal.html) code for an example.
|
|
|
1584
1925
|
* [Making Audio Reactive Visuals](https://www.airtightinteractive.com/2013/10/making-audio-reactive-visuals/)
|
|
1585
1926
|
* The font used in audioMotion's logo is [Orbitron](https://fonts.google.com/specimen/Orbitron) by Matt McInerney
|
|
1586
1927
|
* The _prism_ and _rainbow_ gradients use the [12-bit rainbow palette](https://iamkate.com/data/12-bit-rainbow/) by Kate Morley
|
|
1587
|
-
* The cover page animation was recorded with [ScreenToGif](https://github.com/NickeManarin/ScreenToGif) by Nicke Manarin
|
|
1588
1928
|
* 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)
|
|
1589
1929
|
|
|
1590
1930
|
|
|
@@ -1614,5 +1954,5 @@ And if you're feeling generous, maybe:
|
|
|
1614
1954
|
|
|
1615
1955
|
## License
|
|
1616
1956
|
|
|
1617
|
-
audioMotion-analyzer copyright (c) 2018-
|
|
1957
|
+
audioMotion-analyzer copyright (c) 2018-2026 [Henrique Avila Vianna](https://henriquevianna.com)<br>
|
|
1618
1958
|
Licensed under the [GNU Affero General Public License, version 3 or later](https://www.gnu.org/licenses/agpl.html).
|