react-wavesurfer.js

Installation

# NPM
npm install wavesurfer.js react-wavesurfer.js
# Yarn
yarn add wavesurfer.js react-wavesurfer.js

Basic Usage

import React, { useState } from 'react';
import Wavesurfer from 'react-wavesurfer';

function MyWaveform() {
  const [position, setPosition] = useState(0);
  const [muted, setMuted] = useState(false);

  const handlePositionChange = (position) => { /* ... */ };
  const onReadyHandler = () => console.log('done loading!');

  return (
    <Wavesurfer
      src="path/to/audio/file.mp3"
      position={position}
      onPositionChange={handlePositionChange}
      onReady={onReadyHandler}
      playing={playing}
      muted={muted}
    />
  );
}

Zooming (Work in Progress)

import React, { useState } from 'react';
import Wavesurfer from 'react-wavesurfer';

function MyWaveform() {
  const [zoomLevel, setZoomLevel] = useState(0);

  const handleInput = (e) => {
    setZoomLevel(e.value)
  };

  return (
    <>
      <input
        type="range"
        min="1"
        max="100"
        value="0"
        onInput={handleInput}
      />
      <Wavesurfer
        src="path/to/audio/file.mp3"
        zoomLevel={zoomLevel}
      />
    </>
  );
}

Minimap and Timeline (Work in Progress)

import React, { useState } from 'react';
import Wavesurfer from 'react-wavesurfer';
import MiniMap from 'react-wavesurfer/plugins/minimap';
import Timeline from 'react-wavesurfer/plugins/timeline';

function MyWaveform() {
  return (
    <Wavesurfer
      src="path/to/audio/file.mp3"
      zoomLevel={zoomLevel}
    >
      <MiniMap
        height={30}
        waveColor="#ddd"
        progressColor="#999"
        cursorColor="#999"
      />
      <Timeline
        height={100}
        primaryColor="green"
      />
    </Wavesurfer>
  );
}

Roadmap

• Basic Waveform Usage
• Regions Plugin Support
• Timeline Plugin Support
• Minimap Plugin Support
• Spectrogram Plugin Support
• Cursor Plugin Support
• MediaSession Plugin Support
• Microphone Plugin Support

Local Setup

git clone https://github.com/bill9friend/react-wavesurfer.js
cd react-wavesurfer.js
yarn
yarn build

Related

• wavesurfer.js
• react-wavesurfer (Archived)

Credits

Credits go to mspae for starting the inital work on this