import React, { useState } from 'react';
import Wavesurfer from 'react-wavesurfer';

function MyWaveform() {
  const [position, setPosition] = useState(0);
  const [muted, setMuted] = useState(false);

  const handlePositionChange = (position) => { /* ... */ };
  const onReadyHandler = () => console.log('done loading!');

  return (
    <Wavesurfer
      src="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';

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="path/to/audio/file.mp3"
        zoomLevel={zoomLevel}
      />
    </>
  );
}

import React, { useState } from 'react';
import Wavesurfer from 'react-wavesurfer';
import MiniMap from 'react-wavesurfer/plugins/minimap';
import Timeline from 'react-wavesurfer/plugins/timeline';

function MyWaveform() {
  return (
    <Wavesurfer
      src="path/to/audio/file.mp3"
      zoomLevel={zoomLevel}
    >
      <MiniMap
        height={30}
        waveColor="#ddd"
        progressColor="#999"
        cursorColor="#999"
      />
      <Timeline
        height={100}
        primaryColor="green"
      />
    </Wavesurfer>
  );
}