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
| Attribute | React prop | Type | Default | Description |
|---|---|---|---|---|
bar-spacing | barSpacing | number | 0.5 | Ratio of spacing between bars (0-1) in bar-based visual modes. |
color | color | string | "currentColor" | `"currentColor"` (default) resolves the host's computed CSS `color`. |
duration | duration | string | — | How long this element is active (CSS time, e.g. `"5s"`). |
line-width | lineWidth | number | 4 | Stroke width (px) in line/curve visual modes. |
loop | loop | boolean | false | Loop attribute — when this temporal is a self-driving root under a {@link PlaybackController}, the controller wraps back to `0` instead of pausing at `duration`. |
mode | mode | line | bars | roundBars | bricks | curve | pixel | wave | spikes | "bars" | Visual style of the waveform. |
offset | offset | number | — | Start offset (seconds) within a parallel (`fixed`/`contain`/`fit`) parent timegroup. |
target | target | string | "" | ID of the `<ef-audio>`/`<ef-video>` element to visualize. |
CSS Parts
| Part | Description |
|---|---|
canvas | The rendering canvas. This canvas is a light DOM child element, not a shadow DOM element. |
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. |