React Waveform

A React component for rendering audio waveforms.

Install

npm i @noya-app/react-waveform

Usage

import React from 'react';
import { Waveform } from '@noya-app/react-waveform';

function MyComponent() {
  // Your AudioBuffer instance
  const audioBuffer = /* ... */;
  
  return (
    <Waveform
      audioBuffer={audioBuffer}
      start={0}
      end={10}
      density={1}
      height={100}
      width={800}
      waveformColor="#3B82F6"
      mode="mirror"
    />
  );
}

Props

• audioBuffer: AudioBuffer - The audio buffer to visualize
• start: number - Start time in seconds
• end: number - End time in seconds
• density: number - Sampling density
• height?: number - Canvas height (default: 100)
• width?: number - Canvas width (default: 800)
• waveformColor?: string - Waveform color (default: "#fff")
• mode?: "mirror" | "line" - Render mode (default: "mirror")