Composition

ef-waveform

Animated audio waveform visualization driven by an ef-audio or ef-video element.

Animated audio waveform visualization.

target must be the id of an ef-audio or ef-video element in the same composition.

Attributes

Filter attributes8 of 8

`bar-spacing`

React prop: barSpacing
Type: number
Default: 0.5
Description: Ratio of spacing between bars (0-1) in bar-based visual modes.

`color`

React prop: color
Type: string
Default: "currentColor"
Description: "currentColor" (default) resolves the host's computed CSS color.

`duration`

React prop: duration
Type: string
Default: —
Description: How long this element is active (CSS time, e.g. "5s").

`line-width`

React prop: lineWidth
Type: number
Default: 4
Description: Stroke width (px) in line/curve visual modes.

`loop`

React prop: loop
Type: boolean
Default: false
Description: Loop attribute — when this temporal is a self-driving root under a PlaybackController, the controller wraps back to 0 instead of pausing at duration.

`mode`

React prop: mode
Type: line | bars | roundBars | bricks | curve | pixel | wave | spikes
Default: "bars"
Description: Visual style of the waveform.

`offset`

React prop: offset
Type: number
Default: —
Description: Start offset (seconds) within a parallel (fixed/contain/fit) parent timegroup.

`target`

React prop: target
Type: string
Default: ""
Description: ID of the <ef-audio>/<ef-video> element to visualize.

CSS Parts

CSS parts
Part	Description
`canvas`	The rendering canvas. This canvas is a light DOM child element, not a shadow DOM element.

Events

Events
Event	Detail	Description
`child-duration-changed`	`{ duration: number }`	Fires on the nearest context-providing ancestor, when a nested media element's duration becomes known or changes.