react-audio-wave-modern

ReactWaveform is a React component that provides an interactive waveform visualization for audio files using the WaveSurfer.js library. This component supports custom controls, progress rendering, and regions for marking specific parts of the waveform.

Installation

To install the package, use npm or yarn:

npm install react-audio-wave-modern

or

yarn add react-audio-wave-modern

Usage

Basic Usage

import ReactWaveform from 'react-audio-wave-modern';

const App = () => {
  const audioUrl = 'path/to/your/audio/file.mp3';
  const options = {
    "container": "#waveform",
    "height": 44,
    "waveColor": "#008DFF",
    "progressColor": "#32D583",
    "cursorWidth": 0,
    "barWidth": 3,
    "barGap": 2,
    "barRadius": 5,
    "barHeight": 1,
    "mediaControls": false,
    "dragToSeek": true      
  };

  return (
    <div className="audio-waveform">
      <ReactWaveform audioUrl={audioUrl} options={options} />
    </div>
  );
};

export default App;

.audio-waveform {
  /* width: 100%; or specify a fixed width */
  width: 100%;
  min-height: 72px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #EBEBEB;
  border-radius: 8px;
  padding: 4px;
}

Sample Screenshot

Props

Prop	Type	Default	Description
audioUrl	string	""	URL of the audio file to be loaded.
options	WaveSurferOptions	{}	Options for configuring WaveSurfer.js.
ProgressRenderer	React.FC<{waveform}	null	Custom Progress Component for displaying progress.
ControlsRenderer	React.FC<{ waveform, isPlaying }>	null	Custom Controls Component for displaying controls.
progressRendererClassName	string	""	Class name for the progress renderer container.
playUsingRange	{ start: number, end: number }	null	Range for playing a specific part of the audio.
controls	boolean	true	Whether to display the default controls.
WaveformWrapperClass	string	""	Class name for the waveform wrapper container.
waveformClass	string	""	Class name for the waveform container.
progress	boolean	false	Whether to display the progress bar.
controlsOptions	object	{}	Options for configuring the controls.
regionsList	RegionParams[]	[]	List of regions to be added to the waveform.
skeltonLoader	boolean	true	Whether to display a skeleton loader while loading the waveform.

WaveSurfer Options

The options prop allows you to customize the waveform using the WaveSurfer.js options.

WaveSurferOptions: {
    audioRate?: number;
    autoCenter?: boolean;
    autoScroll?: boolean;
    autoplay?: boolean;
    backend?: "WebAudio" | "MediaElement";
    barAlign?: "top" | "bottom";
    barGap?: number;
    barHeight?: number;
    barRadius?: number;
    barWidth?: number;
    container: HTMLElement | string;
    cursorColor?: string;
    cursorWidth?: number;
    dragToSeek?: boolean | {
        debounceTime: number;
    };
    duration?: number;
    fetchParams?: RequestInit;
    fillParent?: boolean;
    height?: number | "auto";
    hideScrollbar?: boolean;
    interact?: boolean;
    media?: HTMLMediaElement;
    mediaControls?: boolean;
    minPxPerSec?: number;
    normalize?: boolean;
    peaks?: (Float32Array | number[])[];
    plugins?: GenericPlugin[];
    progressColor?: string | string[] | CanvasGradient;
    renderFunction?: ((peaks, ctx) => void);
    sampleRate?: number;
    splitChannels?: (Partial<WaveSurferOptions> & {
        overlay?: boolean;
    })[];
    url?: string;
    waveColor?: string | string[] | CanvasGradient;
    width?: number | string;
}

Controls Renderer

You can customize the controls using the ControlsRenderer prop. The component receives the waveform instance and the playing state as props.

import ReactWaveform from 'react-audio-wave-modern';

const ControlsRenderer = ({ waveform, isPlaying }) => {
  
  if (!waveform) {
    return null;
  }

  const forWardBySeconds = (seconds 10) => {
    if (waveform.current) {
      waveform.current.setTime(waveform.current.getCurrentTime() + seconds);
    }
  }

  const rewindBySeconds = (seconds 10) => {
    if (waveform.current) {
      waveform.current.setTime(Math.max(0, waveform.current.getCurrentTime() - seconds));
    }
  }

  return (
    <div>
      <button onClick={() => rewindBySeconds(10)}>Rewind</button>
      <button onClick={() => waveform.current.playPause()}> {isPlaying ? 'Pause' : 'Play'} </button>
      <button onClick={() => forWardBySeconds(10)}>Forward</button>
    </div>
  );
};

const App = () => {
  const audioUrl = 'audioUrl';
  const options = {
      "container": "#waveform",
      "height": 44,
      "waveColor": "#008DFF",
      "progressColor": "#32D583",
      "cursorWidth": 0,
      "barWidth": 3,
      "barGap": 2,
      "barRadius": 5,
      "barHeight": 1,
      "mediaControls": false,
      "dragToSeek": true      
    };

  return (
    <div className="audio-waveform">
      <ReactWaveform 
        audioUrl={audioUrl} 
        options={options} 
        ControlsRenderer={ControlsRenderer} />
    </div>
  );
};

Play Using Range

The playUsingRange prop allows you to play a specific part of the audio file. The prop should be an object with start and end properties.

const playUsingRange = {
  start: 10,
  end: 20,
};

Controls Options

The controlsOptions prop allows you to customize the controls displayed in the component.

const controlsOptions = {
  buttons: {
    playPause: true,
    forward: true,
    rewind: true,
  },
  forwardBySeconds: 10,
  rewindBySeconds: 10,
  icons: {
    play: <PlayIcon />,
    pause: <PauseIcon />,
    forward: <ForwardIcon />,
    rewind: <Rewind />,
  },
  classNames: {
    playPause: "play-pause",
    forward: "forward",
    rewind: "rewind",
  },
};

Regions

You can add regions to the waveform using the regionsList prop. Each region is defined by a RegionParams object.

RegionParams: {
    channelIdx?: number;
    color?: string;
    content?: string | HTMLElement;
    contentEditable?: boolean;
    drag?: boolean;
    end?: number;
    id?: string;
    maxLength?: number;
    minLength?: number;
    resize?: boolean;
    start: number;
}

const regionsList = [
  {
    start: 1,
    end: 3,
    color: 'rgba(0, 255, 0, 0.1)',
  },
  {
    start: 5,
    end: 7,
    color: 'rgba(255, 0, 0, 0.1)',
  },
];

Progress Renderer

You can customize the progress bar using the ProgressRenderer prop. The component receives the waveform instance as a prop.

const ProgressRenderer = ({ waveform }) => {
  if (!waveform) {
    return null;
  }
  const progress = waveform.current.getCurrentTime() / waveform.current.getDuration();
  return (
    <div
      style={{
        width: `${progress * 100}%`,
        height: '4px',
        backgroundColor: '#ff5500',
      }}
    />
  );
};

Example with Regions and Custom Controls

import ReactWaveform from 'react-audio-wave-modern';

const App = () => {
  const audioUrl = 'audioUrl';
  const options = {
    "container": "#waveform",
    "height": 44,
    "waveColor": "#008DFF",
    "progressColor": "#32D583",
    "cursorWidth": 0,
    "barWidth": 3,
    "barGap": 2,
    "barRadius": 5,
    "barHeight": 1,
    "mediaControls": false,
    "dragToSeek": true      
  };

  const controlsOptions = {
    buttons: {
      playPause: true,
      forward: true,
      rewind: true,
    },
    forwardBySeconds: 10,
    rewindBySeconds: 10,
    icons: {
      play: <PlayIcon />,
      pause: <PauseIcon />,
      forward: <ForwardIcon />,
      rewind: <Rewind />,
    },
    classNames: {
      playPause: "play-pause",
      forward: "forward",
      rewind: "rewind",
    },
  };

  const regionsList = [
    {
      start: 1,
      end: 3,
      color: 'rgba(0, 255, 0, 0.1)',
    },
    {
      start: 5,
      end: 7,
      color: 'rgba(255, 0, 0, 0.1)',
    },
  ];

  return (
    <div className="audio-waveform">
      <ReactWaveform
        audioUrl={audioUrl}
        options={options}
        controlsOptions={controlsOptions}
        regionsList={regionsList}
      />
    </div>
  );
};

export default App;

Version 0.3

New Features

• Regions Feature: Added support for regions to mark specific parts of the waveform.
• Custom Controls: Added support for custom controls with customizable icons and class names.

License

This project is licensed under the MIT License.