AudioPlayer.tsx

import { useEffect, useMemo, useRef, useState } from 'react'
import WaveSurfer from 'wavesurfer.js'
// @ts-ignore: No types for timeline.esm.js
// import Timeline from 'wavesurfer.js/dist/plugins/timeline.esm.js'
import TimelinePlugin from 'wavesurfer.js/dist/plugins/timeline.esm.js'
import API from '../API' // Correct import for the API class

const AudioPlayer = ({ src }: { src: string }) => {
  const containerRef = useRef<HTMLDivElement>(null)
  const wavesurferRef = useRef<WaveSurfer | null>(null)
  const [isPlaying, setIsPlaying] = useState(false)
  // const plugins = useMemo(() => [TimelinePlugin.create()], [])

  const bottomTimeline = TimelinePlugin.create({
    height: 16,
    timeInterval: 0.1,
    primaryLabelInterval: 1,
    style: {
      fontSize: '10px',
      // color: '#6A3274',
    },
  })

  // Initialize WaveSurfer when component mounts
  useEffect(() => {
    if (!containerRef.current) return

    // Get proxied URL to bypass CORS
    const proxiedUrl = API.getProxiedUrl(src)

    // Create an instance of WaveSurfer
    wavesurferRef.current = WaveSurfer.create({
      container: containerRef.current,
      waveColor: 'rgb(200, 0, 200)',
      progressColor: 'rgb(100, 0, 100)',
      url: proxiedUrl, // Use the proxied URL
      minPxPerSec: 100,
      barWidth: 10,
      barRadius: 10,
      barGap: 2,
      mediaControls: true,

      // plugins: [bottomTimeline],
    })

    // Play on click
    wavesurferRef.current.on('interaction', () => {
      wavesurferRef.current?.play()
      setIsPlaying(true)
    })

    // Rewind to the beginning on finished playing
    wavesurferRef.current.on('finish', () => {
      wavesurferRef.current?.setTime(0)
      setIsPlaying(false)
    })

    // Update playing state
    wavesurferRef.current.on('play', () => setIsPlaying(true))
    wavesurferRef.current.on('pause', () => setIsPlaying(false))

    // Cleanup on unmount
    return () => {
      wavesurferRef.current?.destroy()
    }
  }, [src])

  const handlePlayPause = () => {
    wavesurferRef.current?.playPause()
  }

  return (
    <div className="">
      <div ref={containerRef} />
      {/* <button onClick={handlePlayPause}>{isPlaying ? 'Pause' : 'Play'}</button> */}
    </div>
  )
}

export default AudioPlayer