skip to content

Rings

Draws frequency bands as concentric rings or filled circles. Try not to get hypnotized.

DRAFT! This element is in early development and is liable to change or possibly be replaced.

class: Rings
extends: Frame
tag: <rings-blam>
see: props

methods

examples

Props

name	type	default	description
count	number	16	The number of elements to render, mapping to data bands. If there are more elements than bands (taken from `<analyser-blam>` `bands`) then the pattern repeats.
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 Rings.