Playground

Experiment with primitive settings and copy the generated code.

Toggle which primitives to include.

Play Button Duration Transcription Translation

Waveform

Shape Visualization Hover

Bar Width

${ barWidth }px

Bar Gap

${ barGap }px

Bar Radius

${ barRadius }px

Height

${ barHeight }px

Line Width

${ lineWidth }px

Height

${ lineHeight }px

Sharp (straight lines)

Bar Height

${ progressBarHeight }px

Bar Radius

${ progressBarRadius }px

Format

Mode Max Height

${ transcriptionMaxHeight }px

Copy this code into your project. Include the player script to register the custom elements.

HTML

${ generatedHtml }

Learn More

What primitives are and how they connect

Common patterns and tips