Shadcn UI Audio Recorder With Visualizer

Seamless Audio Recording and Visualization for Shadcn UI

This component provides a straightforward solution for developers to implement audio recording functionality with an accompanying visualizer directly into their Shadcn UI applications. It's designed for simplicity, allowing integration by merely copying the source code. With no external npm packages required for the component itself and a codebase under 400 lines, it offers a lightweight yet effective way to capture and visualize audio input, complete with basic controls like start, stop, reset, and download.

Features:

• Audio Recording: Enables capturing audio input from the user's microphone.
• Real-time Audio Visualizer: Displays a dynamic waveform of the audio being recorded on an HTML canvas, with a theme-aware background.
• Shadcn UI Based: Built using Shadcn UI components like Button and Tooltip for a consistent look and feel.
• Simple Integration: Implemented by copying and pasting the source code directly into a project.
• No Component-Specific NPM Install: Does not require separate npm installation for the core component logic, relying on existing Shadcn UI setup.
• Lightweight Codebase: Entire component is contained within approximately 400 lines of TypeScript/React code.
• Recording Timer: Shows the elapsed recording time in HH:MM:SS format, styled for theme consistency.
• Start Recording Control: Allows users to begin capturing audio with a single click.
• Stop and Download Recording: Enables users to stop recording and download the audio file (defaulting to MP3 filename).
• Reset Recording Control: Provides an option to discard the current recording and reset the component's state.
• Automatic MIME Type Selection: Intelligently selects a supported audio MIME type (MPEG, WebM, or WAV) for recording based on browser capabilities.
• Theme Integration: Uses next-themes for consistency with the application's theme, affecting background, text, and timer elements.
• Tooltip Support: Integrates Shadcn UI tooltips for providing hints on interactive controls.
• Customizable Appearance: Allows for custom styling of the main component and timer via className and timerClassName props.

Summary:

This audio recorder component, built for Shadcn UI, offers developers a quick and easy way to add voice recording capabilities with a live visualizer to their applications. It emphasizes simplicity through direct code integration, minimizing setup overhead. Key features include intuitive recording controls, a clear timer, dynamic audio visualization, and convenient download functionality, all packaged in a compact, theme-aware component ideal for modern web projects leveraging Shadcn UI.