Voice Message

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

0:14

New here? Read the installation guide.

Import & use

import { Media21 } from "@/components/beste/piece/media21";

<Media21
  duration="0:14"
  progress={35}
  tone="primary"
  bars={[
    30,
    55,
    40,
    70,
    90,
    60,
    45,
    80,
    65,
    50,
    35,
    60,
    95,
    75,
    40,
    55,
    70,
    45,
    60,
    85,
    50,
    30,
    65,
    40
  ]}
/>

More Media pieces

0:42

Audio Waveform Player

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

Running a calmer front desk

The Sirius Podcast · Ep. 12

12:0431:20

Podcast Player Card

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

Podcast cover art

The Quiet Startup

Ceren Yıldırım48 min

Podcast Episode

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

Sunlight through a forest canopy

2:48Product tour

Video Thumbnail

Gradient thumbnail with a circled play button and duration badge.

Live event scene

Live1.2KLaunch Week · Day 3

Live Stream Card

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

A small team talking around a laptop

2:48

Product tour

A day inside the workspace

Video Thumbnail Card

A video card with a cover image, a duration chip in the corner, and a short kicker over the title.

Markdown version