- Version
- 1.0.0
- License
- MIT
- Extends
- AnalyserVideo
- Requires
- DomSmith
- Looper
- object
- math
- Source
- VisualizerAmbient.js, line 20
Constructor
new VisualizerAmbient(player, parent, optionsopt)
Creates an instance of the VisualizerAmbient component.
| Name | Type | Attributes | Description | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
player |
Player |
Reference to the media player instance. |
|||||||||
parent |
AudioChain |
Reference to the parent instance. |
|||||||||
options |
Object | optional |
Additional options.
|
Members
private #config :Object
Configuration options for the VisualizerAmbient component.
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
selector
|
number | optional | "body" | CSS selector resolving to the dom element to attach to. |
smooth
|
number | optional | 0.96 | Additional interpolation factor (on top on "lerp") to smooth pixel values over time. |
- Type
- Object
- Source
- VisualizerAmbient.js, line 28
private #player :Player
Reference to the main player instance.
- Type
- Player
- Source
- VisualizerAmbient.js, line 34
private #subscriptions :Array<number>
Holds tokens of subscriptions to player events, for later unsubscribe.
- Type
- Array<number>
- Source
- VisualizerAmbient.js, line 40
private #dom :DomSmith
DomSmith instance for the ambient visualizer container.
- Type
- DomSmith
- Source
- VisualizerAmbient.js, line 46
private #menu :DomSmith|undefined
private #renderCanvas :HTMLCanvasElement
Canvas element used to draw the final ambient visualization.
- Type
- HTMLCanvasElement
- Source
- VisualizerAmbient.js, line 58
private #renderCtx :CanvasRenderingContext2D
2D rendering context for the render canvas.
- Type
- CanvasRenderingContext2D
- Source
- VisualizerAmbient.js, line 64
private #scaleCanvas :HTMLCanvasElement|OffscreenCanvas
Canvas element used for the final upscale.
- Type
- HTMLCanvasElement | OffscreenCanvas
- Source
- VisualizerAmbient.js, line 70
private #scaleCtx :CanvasRenderingContext2D
2D rendering context for the scale canvas.
- Type
- CanvasRenderingContext2D
- Source
- VisualizerAmbient.js, line 76
private #pixelData :ImageData
Pixel data from the current analysis frame.
- Type
- ImageData
- Source
- VisualizerAmbient.js, line 82
private #prevPixelData :Uint8ClampedArray
Pixel data from the previous render iteration, used for smoothing.
- Type
- Uint8ClampedArray
- Source
- VisualizerAmbient.js, line 88
private #enabled :boolean
Flag indicating whether the analyser is enabled.
- Type
- boolean
- Source
- VisualizerAmbient.js, line 94
private #renderLoop :Looper
Render Loop Instance, used for updating the scrubber.
- Type
- Looper
- Source
- VisualizerAmbient.js, line 100
Methods
private #onDataReady(mediaItem)
Called when media data is ready. If opacity is 0, disables the visualizer.
| Name | Type | Description |
|---|---|---|
mediaItem |
Data~mediaItem |
Object containing media info. |
- Listens
- data/ready
- Source
- VisualizerAmbient.js, line 217
startLoop()
Starts the ambient visualizer render loop.
stopLoop()
Stops the ambient visualizer render loop.
analyseLoop()
Performs one iteration of the analysis loop and schedules the next.
- Source
- VisualizerAmbient.js, line 262
refresh()
Refreshes the visualization immediately. Used when seeking.
- Listens
- media/seeked
- media/canplay
- Source
- VisualizerAmbient.js, line 274
private #render(lropt)
Renders the ambient visualization. Applies linear interpolation to smooth pixel data, draws the processed image onto the scale canvas, and then draws the scaled image onto the render canvas.
| Name | Type | Attributes | Description |
|---|---|---|---|
lr |
number | optional |
Interpolation factor for smoothing. |
- Source
- VisualizerAmbient.js, line 289
private #setOpacity(event)
Sets the ambient visualizer opacity.
| Name | Type | Description |
|---|---|---|
event |
event |
The event object containing the target element. |
- Source
- VisualizerAmbient.js, line 308
enable()
Enables the analyser and restarts the analysis loop if playback is ongoing.
- Source
- VisualizerAmbient.js, line 329
disable()
Disables the analyser.
- Source
- VisualizerAmbient.js, line 339
destroy()
Removes all events, subscriptions and DOM nodes created by this component.
- Source
- VisualizerAmbient.js, line 350