Peak

Takes <analyser-blam> data, finds the peak (RMS-based) value and coverts it to a single CSS custom property of the format --[name]-peak on the element. Additionally, --[name]-interval represents the duration of one frame (based on the fps value). This is useful for applying CSS transitions between data changes.

class: Peak
extends: Visualiser
tag: <peak-blam>
see: props

methods

examples

Props

name	type	default	description
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 Peak.