Skip to content

Module: src/visualizer/bar/VisualizerBar

The VisualizerBar component displays a real-time mirrored bar visualization of audio signals. It extends the base AnalyserAudio class and renders a symmetric set of vertical bars based on frequency data using an HTML5 Canvas element. This component is useful for compact audio-only UIs or background visualizations.

Version
1.0.0
Author
Frank Kudermann - alphanull
License
MIT
Extends
AnalyserAudio
Requires
DomSmith
supportsWorkerModules
VisualizerBarRender
VisualizerBarWorker
Source
VisualizerBar.js, line 21

Constructor

new VisualizerBar(player, parent, optionsopt)

Creates an instance of the VisualizerBar component.

Parameters:
Name Type Attributes Description
player Player

Reference to the main player instance.
parent AudioChain

Reference to the parent instance.
options Object optional

Additional options.

Parameters:
Name Type Attributes Description
apiKey symbol optional

Token for extended access to the player API.

Members

Configuration options for the VisualizerBar component, seperated from the superclass config.

Properties
Name Type Attributes Default Description
bands number optional 7

Number of EQ bands to displayed as mirrored bars.
channels number optional 1

Number of audio channels.
hiPass number optional 0

High-pass filter value.
loPass number optional 0

Low-pass filter value.
fftSize number optional 32

FFT size specific to VisualizerBar.
Source
VisualizerBar.js, line 31

Reference to the main player instance.

Type
Player
Source
VisualizerBar.js, line 37

Holds tokens of subscriptions (for this subclass only).

Type
Array<number>
Source
VisualizerBar.js, line 43

Secret key only known to the player instance and initialized components. Used to be able to restrict access to API methods in conjunction with secure mode.

Type
symbol
Source
VisualizerBar.js, line 50

DOM elements for the visualizer.

Type
DomSmith
Source
VisualizerBar.js, line 56

Canvas element and its drawing context.

Properties
Name Type Description
ele HTMLCanvasElement

Canvas element.
ctx CanvasRenderingContext2D

2D drawing context.
Source
VisualizerBar.js, line 63

Flag indicating if the visualizer should use a worker.

Type
boolean
Source
VisualizerBar.js, line 69

Optional worker which renders the canvas offscreen.

Type
VisualizerBarWorker
Source
VisualizerBar.js, line 75

Methods

async, private #initWorker()

Initializes the worker for offloading rendering, if supported. If workers are not supported, sets up local canvas rendering.

Source
VisualizerBar.js, line 123

startLoop()

Starts the audio analysis loop.

Listens
media/play
Source
VisualizerBar.js, line 147

analyseLoop()

Performs one iteration of the analysis loop and calls the rendering routine. This method overrides the parent's analyseLoop.

Source
VisualizerBar.js, line 159

private #resize()

Resizes the canvas based on UI changes.

Listens
ui/resize
Source
VisualizerBar.js, line 173

destroy()

Cleans up all events, subscriptions, and DOM nodes created by this component.

Source
VisualizerBar.js, line 193