Freqs

Converts <analyser-blam> frequency data into CSS custom properties and (optionally) maps those values to selected elements. For each data band, it places a custom property of the format --[name]-freq-[index] on the root. Finally, --[name]-freq-interval represents the duration of one frame (based on the fps value). This is useful for CSS transitions.

class: Freqs
extends: BandsToProps
tag: <freqs-blam>
see: props

methods

examples

Props

name	type	default	description
selector	string		A CSS selector representing all the elements to which data values should be mapped. Each element’s `--[name]-[type]` property is mapped to a specific band (`--[name]-freq: --[name]-freq-[index]`), meaning all selected elements can be affected with a single declaration.
first	number	undefined	The first of the data bands to use. If `undefined`, it’s the very first band provided by the `<analyser-blam>`.
last	number	undefined	The last of the data bands to use. If `undefined`, it’s the very last band provided by the `<analyser-blam>`.
shuffle	boolean	false	Whether to shuffle the band/frequency data.
analyser	string		A CSS selector for the `<analyser-blam>` element. Defaults to the first `<analyser-blam>` found in the page.
fps	number	25	Frames per second. The frequency with which `<analyser-blam>` data is read.

Methods

name	args	description
start		Starts taking data from the associated `analyser`.
stop		Changes into a non-running state. Frequency data is still taken from the `analyser` until frequency values all become `0`. This allows for the audio tail to be visualized.
startStop		Toggles between `start` and `stop`.

Examples

OH FUN! There are currently no examples using Freqs.