new FrequencyCircle(options)
FrequencyCircle displays a stylistic radial view in real time.
This will display a single canvas with frequency displayed in. Inspired from https://www.kkhaydarov.com/audio-visualizer/ and https://codepen.io/noeldelgado/pen/EaNjBy aka real mvps that helped going through WebAudioAPI. It will combine a radial gradient in the background, a spinning logo in the canvas center, radial frequency bars, radial oscilloscope, linear oscilloscope with it visibility handled by real time audio intensity, as well as circular pulsing and glowing circle around the logo.
Parameters:
| Name | Type | Description | |||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
options |
object | The frequency circle options Properties
|
- Since:
- 2020
- Source:
Extends
Members
(private) _audioCtx :object
The audio context
Type:
- object
- Inherited From:
- Source:
(private) _canvas :object
The canvas to rendered mono data to
Type:
- object
- Inherited From:
- Source:
(private) _ctx :object
The 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) _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) _animateCircleBars(frequencies)
Compute the frequency circle shape according to audio BIN frequency array.
Parameters:
| Name | Type | Description |
|---|---|---|
frequencies |
Array.<number> | The frequency array for a given audio bin |
- Since:
- 2020
- Source:
(private, static) _animateCircleGlow(average)
Animate the glowing circle around centred logo.
Parameters:
| Name | Type | Description |
|---|---|---|
average |
number | The average value that acts like a breakpoint for intensity |
- Since:
- 2020
- Source:
(private, static) _animateOscilloscopes(times)
Draw both radial and linear point oscilloscopes.
Parameters:
| Name | Type | Description |
|---|---|---|
times |
Array.<number> | The time domain for a given audio bin |
- Since:
- 2020
- Source:
(private, static) _animateStars(average)
Animate background points to match intensity with color and radius.
Parameters:
| Name | Type | Description |
|---|---|---|
average |
number | The average value that acts like a breakpoint for intensity |
- Since:
- 2020
- Source:
(private, static) _buildUI()
Create and configure canvas then append it to given DOM element.
- 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) _getAverageFrequency(frequencies) → {number}
Compute the average value for a given audio bin.
Parameters:
| Name | Type | Description |
|---|---|---|
frequencies |
Array.<number> | The frequency array for a given audio bin |
- Since:
- 2020
- Source:
Returns:
- The average value for a frequency bin
- Type
- number
(private, static) _onResize()
On resize event callback.
- Since:
- 2020
- Source:
(private, static) _pause()
On pause event callback.
- Since:
- 2020
- Source:
(private, static) _play()
On play 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. Then we use utils method to draw radial oscilloscope, linear point oscilloscope, background points and radial frequency bars.
- Since:
- 2020
- Source:
(private, static) _processAudioBin()
Draw radial gradient background and circle that surround image.
- Since:
- 2020
- Source: