### Install wavesurfer.js and @wavesurfer/react

Source: https://github.com/katspaugh/wavesurfer-react/blob/main/README.md

Install the necessary packages using either yarn or npm.

```bash
yarn add wavesurfer.js @wavesurfer/react
```

```bash
npm install wavesurfer.js @wavesurfer/react
```

--------------------------------

### Using a Single Plugin with useMemo

Source: https://github.com/katspaugh/wavesurfer-react/blob/main/README.md

Integrate plugins like Timeline by passing them in the 'plugins' prop. The plugins array must be memoized using useMemo to prevent re-initialization errors.

```javascript
import { useMemo } from 'react'
import WavesurferPlayer from '@wavesurfer/react'
import Timeline from 'wavesurfer.js/dist/plugins/timeline.esm.js'

const App = () => {
  const plugins = useMemo(() => {
    return [
      Timeline.create({
        container: '#timeline',
      }),
    ]
  }, [])

  return (
    <>
      <WavesurferPlayer
        height={100}
        waveColor="violet"
        url="/audio.wav"
        plugins={plugins}
      />
      <div id="timeline" />
    </>
  )
}
```

--------------------------------

### Using Multiple Plugins with useMemo

Source: https://github.com/katspaugh/wavesurfer-react/blob/main/README.md

Combine multiple wavesurfer.js plugins, such as Timeline and Regions, within the 'plugins' prop. Ensure the array is memoized.

```javascript
import { useMemo } from 'react'
import WavesurferPlayer from '@wavesurfer/react'
import Timeline from 'wavesurfer.js/dist/plugins/timeline.esm.js'
import Regions from 'wavesurfer.js/dist/plugins/regions.esm.js'

const App = () => {
  const plugins = useMemo(() => {
    return [
      Timeline.create({
        container: '#timeline',
      }),
      Regions.create(),
    ]
  }, [])

  return (
    <>
      <WavesurferPlayer
        height={100}
        waveColor="violet"
        url="/audio.wav"
        plugins={plugins}
      />
      <div id="timeline" />
    </>
  )
}
```

--------------------------------

### Usage with useWavesurfer Hook

Source: https://github.com/katspaugh/wavesurfer-react/blob/main/README.md

Utilize the useWavesurfer hook for more control within functional components. It requires a container ref and provides state like isReady and currentTime.

```javascript
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 (
    <>
      <div ref={containerRef} />

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

--------------------------------

### Usage as a Wavesurfer React Component

Source: https://github.com/katspaugh/wavesurfer-react/blob/main/README.md

Use the WavesurferPlayer component to embed an audio player. Event handlers like onReady and onPlayPause can be passed as props.

```javascript
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>
    </>
  )
}
```

--------------------------------

### Defining Plugins Outside Component

Source: https://github.com/katspaugh/wavesurfer-react/blob/main/README.md

For plugins not dependent on component state or props, define the 'plugins' array outside the component scope to avoid unnecessary re-creations.

```javascript
import WavesurferPlayer from '@wavesurfer/react'
import Timeline from 'wavesurfer.js/dist/plugins/timeline.esm.js'

// Define plugins outside the component
const plugins = [
  Timeline.create({
    container: '#timeline',
  }),
]

const App = () => {
  return (
    <>
      <WavesurferPlayer
        height={100}
        waveColor="violet"
        url="/audio.wav"
        plugins={plugins}
      />
      <div id="timeline" />
    </>
  )
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.