Audio Waveform Player

Play pill, pulsing indigo bars, and a monospace duration stamp.

0:42

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Media1 } from "@/components/beste/piece/media1";

<Media1
  label="Voice memo"
  duration="0:42"
  bars={[
    30,
    55,
    70,
    40,
    85,
    65,
    90,
    50,
    75,
    45,
    80,
    60,
    35,
    70,
    55
  ]}
  tone="indigo"
/>

More Media pieces

View all Media
Album artwork
Night DriveLumen

Now Playing

media17

Compact player bar with artwork, track details, a progress line, and a play toggle.

Running a calmer front desk

The Sirius Podcast · Ep. 12

12:0431:20

Podcast Player Card

media24

A compact audio player with a play button, an episode title and series line, a waveform progress bar, and elapsed and total times.

0:14

Voice Message

media21

Chat bubble voice note with a play toggle, a played and unplayed waveform, and a duration.

Live event sceneLive1.2KLaunch Week · Day 3

Live Stream Card

media11

Video thumbnail with a pulsing LIVE pill, viewer count, and a title caption at the bottom.

Sunlight through a forest canopy2:48Product tour

Video Thumbnail

media2

Gradient thumbnail with a circled play button and duration badge.

Podcast cover art
The Quiet Startup
Ceren Yıldırım48 min

Podcast Episode

media8

Artwork with a mic overlay, episode title, host and duration, plus a round play button on the right.