react-wavesurfer.js

!Test

Installation

``bash


NPM

npm install wavesurfer.js react-wavesurfer.js

Yarn

yarn add wavesurfer.js react-wavesurfer.js
`

Basic Usage

See the live demo.

`tsx
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 (
src="path/to/audio/file.mp3"
position={position}
onPositionChange={handlePositionChange}
onReady={onReadyHandler}
playing={playing}
muted={muted}
/>
);
}
`

Zooming (Work in Progress)

`tsx
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 (
<>



);
}
`

Minimap and Timeline (Work in Progress)

`tsx
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 (

height={30}
waveColor="#ddd"
progressColor="#999"
cursorColor="#999"
/>


);
}
`

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

`bash
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