react-wavesurfer.js

Installation

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

Basic Usage

See the live demo.

import React, { useState } from "react";
import Wavesurfer from "react-wavesurfer.js";

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.js";

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.js";
import MiniMap from "react-wavesurfer.js/plugins/minimap";
import Timeline from "react-wavesurfer.js/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/amilajack/react-wavesurfer.js
cd react-wavesurfer.js
npm install
npm run build

Related

• wavesurfer.js
• react-wavesurfer (Archived)

Credits

Credits go to mspae for starting the inital work on this