React Music Waveform

An open-source React + TypeScript library for customizable audio waveform visualizations.

   

---

About The Project

A lightweight, developer-friendly React component for rendering real-time audio waveform visualizations with customizable themes and playback options.

Features:

• 4 Built-in Styles: Choose from Viridara (green), Solmara (tangerine), Aurevia (blue), or Minimal (B&W)
• Light & Dark Themes: Seamless theme switching support
• Full Audio Controls: Play/pause, speed control, and progress tracking
• Lightweight: Minimal bundle size with maximum performance
• TypeScript Ready: Full TypeScript support with comprehensive type definitions
• Highly Customizable: Extensive props for colors, dimensions, and behavior
• Responsive: Works perfectly on all device sizes
• Easy Integration: Drop-in component for any React project

Inspired by modern waveform UI designs and optimized for quick implementation.

---

##Built With

• 
• 
• 

---

##Getting Started

npm install react-music-waveform

import { AudioWaveform } from "react-music-waveform";

const MyMusicPlayer = () => {
  return (
    <AudioWaveform
      src="/path/to/your/audio.mp3"
      style="viridara"
      theme="light"
      height={60}
      showControls={true}
      showTimestamp={true}
      showSpeedControl={true}
    />
  );
};

##Props Reference

interface AudioWaveformProps {
  src: string;                    // Audio file URL (required)
  style?: WaveformStyle;          // 'viridara' | 'solmara' | 'aurevia' | 'minimal'
  theme?: Theme;                  // 'light' | 'dark'
  height?: number;                // Component height in pixels
  width?: number;                 // Component width in pixels
  barSpacing?: number;            // Space between waveform bars
  primaryColor?: string;          // Custom primary color override
  progressColor?: string;         // Custom progress color override
  backgroundColor?: string;       // Custom background color override
  showBackground?: boolean;       // Show/hide background
  showControls?: boolean;         // Show/hide play/pause controls
  showTimestamp?: boolean;        // Show/hide time display
  showSpeedControl?: boolean;     // Show/hide playback speed control
  className?: string;             // Additional CSS classes
}

##Available Styles

react-music-waveform comes with 4 beautiful pre-designed styles:

Style	Description
viridara	Greenish theme
solmara	Vibrant tangerine theme
aurevia	Cool blue theme
minimal	Standard monochrome design

Each style supports both light and dark theme variants.

Default Values

Property	Default Value
style	'minimal'
theme	'light'
height	60
width	300
barSpacing	2
showBackground	true
showControls	true
showTimestamp	true
showSpeedControl	false

Examples

Basic Usage

import { AudioWaveform } from "react-music-waveform";

function BasicPlayer() {
  return (
    <AudioWaveform
      src="/audio/song.mp3"
      style="viridara"
      theme="light"
    />
  );
}

Customized Player

import { AudioWaveform } from "react-music-waveform";

function CustomPlayer() {
  return (
    <AudioWaveform
      src="/audio/podcast.mp3"
      style="aurevia"
      theme="dark"
      height={80}
      width={500}
      showControls={true}
      showTimestamp={true}
      showSpeedControl={true}
      primaryColor="#ff6b6b"
      progressColor="#4ecdc4"
    />
  );
}

Minimal Configuration

import { AudioWaveform } from "react-music-waveform";

function MinimalPlayer() {
  return (
    <AudioWaveform
      src="/audio/ambient.mp3"
      style="minimal"
      showControls={false}
      showTimestamp={false}
      showBackground={false}
    />
  );
}