--- description: "Audio waveform visualization element with bar, line, and mirror display modes, synced to composition playback time." --- # ef-waveform ## Attributes - **target** (string) (required) - ID of ef-audio or ef-video element - **mode** (string, default: bars) - Display mode - **bar-spacing** (number, default: 0.5) - Spacing between bars - **line-width** (number, default: 4) - Line width for line/curve modes # Waveform Audio waveform visualization. ## Import ```tsx import { Waveform } from "@editframe/react"; ``` ## Basic Usage ```html ``` ```tsx import { Audio, Waveform } from "@editframe/react";

``` ## Full Scene ```html live

Audio Waveform

``` ## Visualization Modes Each mode produces a different visual style. Color is inherited from `currentColor` (set via Tailwind `text-*` classes). ### Bars ```html live

``` ### Round Bars ```html live

``` ### Line ```html live

``` ### Curve ```html live

``` ### Wave ```html live

``` ### Spikes ```html live

``` ### Bricks ```html live

``` ### Pixel ```html live

``` ## Customization ### Bar Spacing and Line Width ```html live

``` ## Styled Waveform ```tsx ``` ## Positioned Waveform ```tsx

``` ## With Video ```tsx import { Timegroup, Video, Audio, Waveform } from "@editframe/react";

``` ## Centered Waveform ```tsx

``` ## Multiple Audio Tracks ```tsx

``` ## Podcast/Audio Visualization ```tsx import { Audio, Waveform, Text, Image } from "@editframe/react"; export const PodcastVisualizer = () => { return (

); }; ``` ## Dynamic Colors ```tsx import { useState } from "react"; const colors = ['#3b82f6', '#22c55e', '#f59e0b', '#ef4444']; const [colorIndex, setColorIndex] = useState(0); ```