react-wavesurfer.js

React bindings for wavesurfer.js

Usage no npm install needed!

<script type="module">
  import reactWavesurferJs from 'https://cdn.skypack.dev/react-wavesurfer.js';
</script>

README

react-wavesurfer.js

Test NPM version npm

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

Credits

Credits go to mspae for starting the inital work on this