Package Exports

@wavesurfer/react
@wavesurfer/react/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@wavesurfer/react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@wavesurfer/react

A React component for wavesurfer.js.

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

You can subscribe to various wavesurfer events also via props. Just prepend an event name with on, e.g. ready -> onReady. Each event receives a wavesurfer instance as the first argument.

Installation

With yarn:

yarn add @wavesurfer/react

With npm:

npm install @wavesurfer/react

Usage

As a component:

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 (
    <>
      <WavesurferPlayer
        height={100}
        waveColor="violet"
        url="/my-server/audio.wav"
        onReady={onReady}
        onPlay={() => setIsPlaying(true)}
        onPause={() => setIsPlaying(false)}
      />

      <button onClick={onPlayPause}>
        {isPlaying ? 'Pause' : 'Play'}
      </button>
    </>
  )
}

Alternatively, as a hook:

import { useRef } from 'react'
import { useWavesurfer } from '@wavesurfer/react'

const App = () => {
  const containerRef = useRef()

  const { wavesurfer, isReady, isPlaying, currentTime } = useWavesurfer({
    container: containerRef,
    url: '/my-server/audio.ogg',
    waveColor: 'purple',
    height: 100,
  })

  const onPlayPause = () => {
    wavesurfer && wavesurfer.playPause()
  }

  return (
    <>
      <div ref={containerRef} />

     <button onClick={onPlayPause}>
       {isPlaying ? 'Pause' : 'Play'}
     </button>
    </>
  )
}

Docs

https://wavesurfer.xyz