Skip to content

Module: src/visualizer/frequency/VisualizerFrequency

The VisualizerFrequency component renders a real-time frequency visualization of audio signals. It extends the base AnalyserAudio component and visualizes the frequency spectrum either on the main thread or via a worker using OffscreenCanvas. It is typically used in audio-focused contexts, providing audio-reactive visual effects, and is compatible with both audio and video content.

Version
1.0.0
Author
Frank Kudermann - alphanull
License
MIT
Extends
AnalyserAudio
Requires
VisualizerFrequencyRender
VisualizerFrequencyWorker
DomSmith
supportsWorkerModules
Source
VisualizerFrequency.js, line 21

Constructor

new VisualizerFrequency(player, parent, optionsopt)

Creates an instance of the VisualizerFrequency component.

Parameters:
Name Type Attributes Description
player Player

Reference to the VisionPlayer 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
channels number optional 2

Number of audio channels.
hiPass number optional 0

High-pass filter value.
loPass number optional 0

Low-pass filter value.
fftSize number optional 512

FFT size specific to VisualizerBar.
Type
Object
Source
VisualizerFrequency.js, line 31

Reference to the main player instance.

Type
Player
Source
VisualizerFrequency.js, line 37

Holds tokens of subscriptions (for this subclass only).

Type
Array<number>
Source
VisualizerFrequency.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
VisualizerFrequency.js, line 50

DOM elements for the visualizer.

Type
DomSmith
Source
VisualizerFrequency.js, line 56

Canvas element and its drawing context.

Properties
Name Type Description
ele HTMLCanvasElement

Canvas element.
ctx CanvasRenderingContext2D

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

Flag indicating if the visualizer should use a worker.

Type
boolean
Source
VisualizerFrequency.js, line 69

Optional worker which renders the canvas offscreen.

Type
VisualizerFrequencyWorker
Source
VisualizerFrequency.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
VisualizerFrequency.js, line 122

startLoop()

Starts the audio analysis loop.

Listens
media/play
Source
VisualizerFrequency.js, line 146

analyseLoop()

Main analysis loop. Calls the parent's analyseLoop and then sends frequency data to the worker or renders locally.

Source
VisualizerFrequency.js, line 157

private #resize()

Invoked when window resizes. Sets the canvas dimensions accordingly.

Listens
ui/resize
Source
VisualizerFrequency.js, line 170

destroy()

This method removes all events, subscriptions and DOM nodes created by this component.

Source
VisualizerFrequency.js, line 190