react-wavesurfer.js

React bindings for wavesurfer.js.

View Demo View Github

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

  • [x] 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/amilajack/react-wavesurfer.js
cd react-wavesurfer.js
yarn
yarn build

GitHub