new Spectrum(options)
Spectrum displays real time audio frequencies as vertical bars that scroll over time
.
Parameters:
| Name | Type | Description | ||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
options |
object | The spectrum options Properties
|
- Since:
- 2020
- Source:
Extends
Members
(private) _audioCtx :object
The audio context
Type:
- object
- Inherited From:
- Source:
(private) _canvasL :object
The canvas to rendered left channed data to
Type:
- object
- Inherited From:
- Source:
(private) _canvasR :object
The canvas to rendered right channed data to
Type:
- object
- Inherited From:
- Source:
(private) _ctxL :object
The left canvas associated context
Type:
- object
- Inherited From:
- Source:
(private) _ctxR :object
The right canvas associated context
Type:
- object
- Inherited From:
- Source:
(private) _dom :object
Contains all useful DOM objects
Type:
- object
- Inherited From:
- Source:
(private) _fftSize :number
FFT size used to analyse audio stream. Must be a power of 2
Type:
- number
- Inherited From:
- Source:
(private) _inputNode :object
The source node to chain from ; it will ignore the output of HTML audio player
Type:
- object
- Inherited From:
- Source:
(private) _isPlaying :boolean
The playing state of the player
Type:
- boolean
- Inherited From:
- Source:
(private) _merged :boolean
Merge L and R channel on output
Type:
- boolean
- Inherited From:
- Source:
(private) _nodes :object
Audio nodes from web audio API to manipulate data with
Type:
- object
- Inherited From:
- Source:
(private) _parentDimension :object
Save container dimension to restore when closing fullscreen
Type:
- object
- Inherited From:
- Source:
(private) _player :object
The audio source (HTML audio player)
Type:
- object
- Inherited From:
- Source:
(private) _renderTo :object
Target div to render module in
Type:
- object
- Inherited From:
- Source:
(private) _resizeObserver :object
Resize observable to watch for any resize change
Type:
- object
- Inherited From:
- Source:
(private) _type :string
The component type. See supported componenets in AudioVisualizer factory
Type:
- string
- Inherited From:
- Source:
Methods
(private, static) _buildUI()
Create and configure canvas then append it to given DOM element.
- Since:
- 2020
- Source:
(private, static) _clickedElsewhere(event)
Callback when a clicked is detected and settings context is open.
Parameters:
| Name | Type | Description |
|---|---|---|
event |
object | The click event |
- Since:
- 2020
- Source:
(private, static) _computeLogSampleHeight(sample)
Compute log sample height in canvas.
Parameters:
| Name | Type | Description |
|---|---|---|
sample |
number | The sample to compute its log height |
- Since:
- 2020
- Source:
(private, static) _createLogarithmicScaleHeights()
Pre-compute samples height on a logarithmic scale to avoid computation on render process.
- Since:
- 2020
- Source:
(private, static) _drawSpectrogramForFrequencyBin(canvas, frequencies)
Draw a vertical ray representing the audio frequencies at process time.
Parameters:
| Name | Type | Description |
|---|---|---|
canvas |
object | The canvas to draw spectrum ray into |
frequencies |
Uint8Array | The frequencies for a given audio bin |
- Since:
- 2020
- Source:
(private, static) _drawSpectrogramForFrequencyBin(ctx, frequencies, i)
Draw the vertical ray with a linear scale.
Parameters:
| Name | Type | Description |
|---|---|---|
ctx |
object | The canvas context |
frequencies |
Uint8Array | The frequencies for a given audio bin |
i |
number | The index to scale linearly |
- Since:
- 2020
- Source:
(private, static) _drawSpectrogramForFrequencyBin(ctx, frequencies, i)
Draw the vertical ray with a logarithm scale.
Parameters:
| Name | Type | Description |
|---|---|---|
ctx |
object | The canvas context |
frequencies |
Uint8Array | The frequencies for a given audio bin |
i |
number | The index to scale logarithmically |
- Since:
- 2020
- Source:
(private, static) _fillAttributes(options)
Internal method to fill internal properties from options object sent to constructor.
Parameters:
| Name | Type | Description | |||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
options |
object | The frequency circle options Properties
|
- Since:
- 2020
- Source:
(private, static) _mergedStereoAnalysis()
Perform a merged Left and Right analysis with 32 bit time domain data.
- Since:
- 2020
- Source:
(private, static) _onResize()
On resize event callback.
- Since:
- 2020
- Source:
(private, static) _processAudioBin()
Real time method called by WebAudioAPI to process PCM data. Here we make a 8 bit frequency and time analysis.
- Since:
- 2020
- Source:
(private, static) _removeEvents()
Add component events (resize, play, pause, dbclick).
- Since:
- 2020
- Source:
(private, static) _scaleLinearIndexToHeight(index)
Convert linear value to logarithmic value.
Parameters:
| Name | Type | Description |
|---|---|---|
index |
number | The canvas context |
- Since:
- 2020
- Source:
(private, static) _settingsClicked()
Spectrum settings button callback.
- Since:
- 2020
- Source:
(private, static) _stereoAnalysis()
Perform a separated Left and Right analysis with 32 bit time domain data.
- Since:
- 2020
- Source:
(private, static) _updateDimensions()
Usually called on resize event, update canvas dimension to fit render to DOM object.
- Since:
- 2020
- Source: