audio

React bindings for wavesurfer.js

Jan 01, 2021
React bindings for wavesurfer.js

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

Related

GitHub

Recommended