Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 34 Commits
.github/workflows		.github/workflows
examples		examples
src		src
tests		tests
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.prettierrc		.prettierrc
LICENSE		LICENSE
README.md		README.md
package.json		package.json
rollup.config.js		rollup.config.js
tsconfig.json		tsconfig.json
yarn.lock		yarn.lock

Repository files navigation

@wavesurfer/react

A React component and hook forwavesurfer.js.

It makes it easy to use wavesurfer from React. All of the familiarwavesurfer options become React props.

You can subscribe to variouswavesurfer events 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:

yarn add wavesurfer.js @wavesurfer/react

With npm:

npm install wavesurfer.js @wavesurfer/react

Usage

As a component:

importWavesurferPlayerfrom'@wavesurfer/react'constApp=()=>{const[wavesurfer,setWavesurfer]=useState(null)const[isPlaying,setIsPlaying]=useState(false)constonReady=(ws)=>{setWavesurfer(ws)setIsPlaying(false)}constonPlayPause=()=>{wavesurfer&&wavesurfer.playPause()}return(<><WavesurferPlayerheight={100}waveColor="violet"url="/my-server/audio.wav"onReady={onReady}onPlay={()=>setIsPlaying(true)}onPause={()=>setIsPlaying(false)}/><buttononClick={onPlayPause}>{isPlaying ?'Pause' :'Play'}</button></>)}

Alternatively, as a hook:

import{useRef}from'react'import{useWavesurfer}from'@wavesurfer/react'constApp=()=>{constcontainerRef=useRef(null)const{ wavesurfer, isReady, isPlaying, currentTime}=useWavesurfer({container:containerRef,url:'/my-server/audio.ogg',waveColor:'purple',height:100,})constonPlayPause=()=>{wavesurfer&&wavesurfer.playPause()}return(<><divref={containerRef}/><buttononClick={onPlayPause}>{isPlaying ?'Pause' :'Play'}</button></>)}