https://github.com/katspaugh/wavesurfer-react
React component for wavesurfer.js
https://github.com/katspaugh/wavesurfer-react
react wavesurfer wavesurfer-js
Last synced: about 1 year ago
JSON representation
React component for wavesurfer.js
- Host: GitHub
- URL: https://github.com/katspaugh/wavesurfer-react
- Owner: katspaugh
- License: bsd-3-clause
- Created: 2023-12-28T21:57:06.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-04-15T06:11:52.000Z (about 1 year ago)
- Last Synced: 2025-05-13T18:50:18.778Z (about 1 year ago)
- Topics: react, wavesurfer, wavesurfer-js
- Language: TypeScript
- Homepage: https://wavesurfer.xyz/examples/?react.js
- Size: 4.5 MB
- Stars: 97
- Watchers: 4
- Forks: 18
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @wavesurfer/react
[](https://www.npmjs.com/package/@wavesurfer/react)
A React component and hook for [wavesurfer.js](http://github.com/katspaugh/wavesurfer.js).
It makes it easy to use wavesurfer from React. All of the familiar [wavesurfer options](https://wavesurfer.xyz/docs/types/wavesurfer.WaveSurferOptions) become React props.
You can subscribe to various [wavesurfer events](https://wavesurfer.xyz/docs/types/wavesurfer.WaveSurferEvents) also via props. Just prepend an event name with on, e.g. `ready` -> `onReady`. Each event callback receives a wavesurfer instance as the first argument.
## Installation
With yarn:
```bash
yarn add wavesurfer.js @wavesurfer/react
```
With npm:
```bash
npm install wavesurfer.js @wavesurfer/react
```
## Usage
As a component:
```js
import WavesurferPlayer from '@wavesurfer/react'
const App = () => {
const [wavesurfer, setWavesurfer] = useState(null)
const [isPlaying, setIsPlaying] = useState(false)
const onReady = (ws) => {
setWavesurfer(ws)
setIsPlaying(false)
}
const onPlayPause = () => {
wavesurfer && wavesurfer.playPause()
}
return (
<>
setIsPlaying(true)}
onPause={() => setIsPlaying(false)}
/>
{isPlaying ? 'Pause' : 'Play'}
>
)
}
```
Alternatively, as a hook:
```js
import { useRef } from 'react'
import { useWavesurfer } from '@wavesurfer/react'
const App = () => {
const containerRef = useRef(null)
const { wavesurfer, isReady, isPlaying, currentTime } = useWavesurfer({
container: containerRef,
url: '/my-server/audio.ogg',
waveColor: 'purple',
height: 100,
})
const onPlayPause = () => {
wavesurfer && wavesurfer.playPause()
}
return (
<>
{isPlaying ? 'Pause' : 'Play'}
>
)
}
```
## Docs
https://wavesurfer.xyz