MP3 Player

Component 12

About

An inline audio player with a play/pause transport, an elapsed/remaining time clock, and a seek bar that renders as a plain line or as a clickable waveform of precomputed peaks.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds MP3 Player to your project and fits it to your theme.

Code

How MP3 Player is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { MP3Player } from "@/components/ui/mp3-player";

export default function MP3PlayerDemo() {
  return (
    <div className="flex w-full max-w-md items-center justify-center p-8">
      <MP3Player
        className="w-full"
        src="https://cdn.21st.dev/assets/mirror/ca/cadd2666c5571e12fafdb21697b26aef6f196a5a9c28e708129870167679991d.mp3"
        title="SoundHelix Song 1"
        artist="SoundHelix"
      />
    </div>
  );
}