# NPM
npm install wavesurfer.js react-wavesurfer.js
# Yarn
yarn add wavesurfer.js react-wavesurfer.js
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="https://github.com/amilajack/react-wavesurfer.js/raw/main/path/to/audio/file.mp3"
position={position}
onPositionChange={handlePositionChange}
onReady={onReadyHandler}
playing={playing}
muted={muted}
/>
);
}
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="https://github.com/amilajack/react-wavesurfer.js/raw/main/path/to/audio/file.mp3" zoomLevel={zoomLevel} />
</>
);
}
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="https://github.com/amilajack/react-wavesurfer.js/raw/main/path/to/audio/file.mp3" zoomLevel={zoomLevel}>
<MiniMap
height={30}
waveColor="#ddd"
progressColor="#999"
cursorColor="#999"
/>
<Timeline height={100} primaryColor="green" />
</Wavesurfer>
);
}
git clone https://github.com/amilajack/react-wavesurfer.js
cd react-wavesurfer.js
npm install
npm run build
Credits go to mspae for starting the inital work on this