How do I use Audio Recorder in my project?

Copy the AudioRecorderWidget source code from https://opensourceui.in/components/audio-recorder, add lib/cn.ts if needed, install clsx tailwind-merge and lucide-react, then import and render the component in your React or Next.js app.

Can I use Audio Recorder in a commercial project?

Yes. Opensource UI is MIT licensed. You can use AudioRecorderWidget in personal and commercial projects without UI attribution.

Back to Audio

Components / Audio

Audio Recorder

Dark recording card with title, date, animated red waveform, and elapsed time. Play and pause feel like a native voice memo app.

Preview

New Audio

12.8.24

01:12:25

Setup

How to use

Free for personal and commercial use. No UI attribution required. Include the MIT copyright notice when copying component source into your project. Read the MIT license.

1
Run in your terminal:
$npm install clsx tailwind-merge lucide-react
2
Copy lib/cn.ts below. Skip if you already have cn().
3
Copy the code below and create components/audio/audio-recorder-widget.tsx in your project.
4
Import and render:
Example
import { AudioRecorderWidget } from "@/components/audio/audio-recorder-widget";
<AudioRecorderWidget title="New Audio" date="12.8.24" />

lib/cn.ts

1
2
3
4
5
6
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

components/audio/audio-recorder-widget.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
"use client";
 
import {
  forwardRef,
  useEffect,
  useState,
  type ComponentPropsWithoutRef,
} from "react";
 
import { cn } from "@/lib/cn";
import { Pause, Play } from "lucide-react";
 
const BAR_COUNT = 12;
const BAR_IDS = Array.from({ length: BAR_COUNT }, (_, bar) => bar);
 
export type AudioRecorderWidgetProps = Readonly<
  {
    title?: string;
    date?: string;
  } & ComponentPropsWithoutRef<"div">
>;
 
// Production-ready Audio Recorder component — styled with Tailwind CSS.
export const AudioRecorderWidget = forwardRef<
  HTMLDivElement,
  AudioRecorderWidgetProps
>(({ className, title = "New Audio", date = "12.8.24", ...props }, ref) => {
  const [recording, setRecording] = useState(true);
  const [bars, setBars] = useState<number[]>(() => BAR_IDS.map(() => 30));
 
  useEffect(() => {
    if (!recording) return;
    const timer = globalThis.setInterval(() => {
      setBars(BAR_IDS.map(() => 20 + Math.random() * 60));
    }, 120);
    return () => globalThis.clearInterval(timer);
  }, [recording]);
 
  return (
    <div
      ref={ref}
      data-slot="audio-recorder-widget"
      className={cn(
        "flex h-44 w-44 flex-col justify-between rounded-3xl bg-neutral-900 p-4 font-sans text-white shadow-lg",
        className,
      )}
      {...props}
    >
      <div>
        <p className="text-sm font-semibold">{title}</p>
        <p className="text-[11px] text-neutral-400">{date}</p>
      </div>
 
      <div className="flex h-10 items-end justify-center gap-0.5">
        {BAR_IDS.map((bar) => (
          <span
            key={bar}
            className="w-1.5 rounded-full bg-red-500 transition-all duration-100"
            style={{ height: `${bars[bar]}%` }}
          />
        ))}
      </div>
 
      <div className="flex items-center justify-between">
        <span className="font-mono text-xs text-neutral-300">01:12:25</span>
        <button
          type="button"
          onClick={() => setRecording(!recording)}
          aria-label={recording ? "Pause recording" : "Resume recording"}
          aria-pressed={recording}
          className={cn(
            "flex h-9 w-9 cursor-pointer items-center justify-center rounded-full text-white transition-transform hover:scale-105 active:scale-95",
            recording ? "bg-red-500" : "bg-neutral-700",
          )}
        >
          {recording ? (
            <Pause size={14} fill="white" />
          ) : (
            <Play size={14} fill="white" />
          )}
        </button>
      </div>
    </div>
  );
});
 
AudioRecorderWidget.displayName = "AudioRecorderWidget";

"use client"; import { forwardRef, useEffect, useState, type ComponentPropsWithoutRef, } from "react"; import { cn } from "@/lib/cn"; import { Pause, Play } from "lucide-react"; const BAR_COUNT = 12; const BAR_IDS = Array.from({ length: BAR_COUNT }, (_, bar) => bar); export type AudioRecorderWidgetProps = Readonly< { title?: string; date?: string; } & ComponentPropsWithoutRef<"div"> >; // Production-ready Audio Recorder component — styled with Tailwind CSS. export const AudioRecorderWidget = forwardRef< HTMLDivElement, AudioRecorderWidgetProps >(({ className, title = "New Audio", date = "12.8.24", ...props }, ref) => { const [recording, setRecording] = useState(true); const [bars, setBars] = useState<number[]>(() => BAR_IDS.map(() => 30)); useEffect(() => { if (!recording) return; const timer = globalThis.setInterval(() => { setBars(BAR_IDS.map(() => 20 + Math.random() * 60)); }, 120); return () => globalThis.clearInterval(timer); }, [recording]); return ( <div ref={ref} data-slot="audio-recorder-widget" className={cn( "flex h-44 w-44 flex-col justify-between rounded-3xl bg-neutral-900 p-4 font-sans text-white shadow-lg", className, )} {...props} > <div> <p className="text-sm font-semibold">{title}</p> <p className="text-[11px] text-neutral-400">{date}</p> </div> <div className="flex h-10 items-end justify-center gap-0.5"> {BAR_IDS.map((bar) => ( <span key={bar} className="w-1.5 rounded-full bg-red-500 transition-all duration-100" style={{ height: `${bars[bar]}%` }} /> ))} </div> <div className="flex items-center justify-between"> <span className="font-mono text-xs text-neutral-300">01:12:25</span> <button type="button" onClick={() => setRecording(!recording)} aria-label={recording ? "Pause recording" : "Resume recording"} aria-pressed={recording} className={cn( "flex h-9 w-9 cursor-pointer items-center justify-center rounded-full text-white transition-transform hover:scale-105 active:scale-95", recording ? "bg-red-500" : "bg-neutral-700", )} > {recording ? ( <Pause size={14} fill="white" /> ) : ( <Play size={14} fill="white" /> )} </button> </div> </div> ); }); AudioRecorderWidget.displayName = "AudioRecorderWidget";