Props

Converts Analyser data into CSS custom properties and (optionally) maps those values to selected elements. For each data band, places a custom property of the format --[name]-[type]-[index] on the root. In addition, --[name]-[type] represents the average value. For frequency data, this is effectively the signal strength. Finally, --[name]-[type]-interval represents the duration of one frame (based on the fps value). This is useful for CSS transitions.

class: Props
extends: BandsToProps
tag: <props-blam>
see: props

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]-[type]: --[name]-[type]-[index]`), meaning all selected elements can be affected with a single declaration.
shuffle	boolean	false	Whether to randomly distribute data bands among target elements chosen with `selector`.
analyser	string		A CSS selector for the Analyser element.
transport	string		A CSS selector representing the element used to start and stop listening to analyser data. This element must fire `blamstart` and `blamstop` events. At the time of writing, Media, Pads, and Notes do this.
fps	number	25	Frames per second. The frequency at which Analyser data is read.
time	boolean	false	Whether to take data from the time (rather than frequency) domain.
first	number	undefined	The first of the data bands to use. If `undefined`, it’s the very first band provided by the Analyser.
last	number	undefined	The last of the data bands to use. If `undefined`, it’s the very last band provided by the Analyser.

Examples

OH FUN! There are currently no examples using Props.