Spaces:
Running
Running
File size: 2,207 Bytes
eb27538 ed37070 eb27538 ed37070 f76d503 ed37070 eb27538 ed37070 eb27538 ed37070 eb27538 ed37070 eb27538 f76d503 eb27538 ed37070 eb27538 ed37070 eb27538 ed37070 eb27538 ed37070 f76d503 ed37070 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
import { useEffect, useRef, useState } from 'react'
import WaveSurfer from 'wavesurfer.js'
// @ts-ignore: No types for timeline.esm.js
import TimelinePlugin from 'wavesurfer.js/dist/plugins/timeline.esm.js'
import API from '../API'
const AudioPlayer = ({ src }: { src: string }) => {
const containerRef = useRef<HTMLDivElement>(null)
const wavesurferRef = useRef<WaveSurfer | null>(null)
const [isPlaying, setIsPlaying] = useState(false)
useEffect(() => {
if (!containerRef.current) return
// Destroy previous instance if exists
if (wavesurferRef.current) {
wavesurferRef.current.destroy()
wavesurferRef.current = null
}
// Get proxied URL to bypass CORS
const proxiedUrl = API.getProxiedUrl(src)
// Create plugin instance inside effect
const bottomTimeline = TimelinePlugin.create({
height: 16,
timeInterval: 0.1,
primaryLabelInterval: 1,
style: { fontSize: '10px' },
})
// Create an instance of WaveSurfer
wavesurferRef.current = WaveSurfer.create({
container: containerRef.current,
waveColor: 'rgb(200, 0, 200)',
progressColor: 'rgb(100, 0, 100)',
url: proxiedUrl,
minPxPerSec: 100,
// barWidth: 10,
// barRadius: 10,
// barGap: 2,
mediaControls: true,
plugins: [bottomTimeline],
})
// Play on click
wavesurferRef.current.on('interaction', () => {
wavesurferRef.current?.play()
setIsPlaying(true)
})
wavesurferRef.current.on('finish', () => {
wavesurferRef.current?.setTime(0)
setIsPlaying(false)
})
wavesurferRef.current.on('play', () => setIsPlaying(true))
wavesurferRef.current.on('pause', () => setIsPlaying(false))
// Cleanup on unmount
return () => {
wavesurferRef.current?.destroy()
wavesurferRef.current = null
}
}, [src])
// Optionally, add a play/pause button
// const handlePlayPause = () => {
// wavesurferRef.current?.playPause()
// }
return (
<div className="w-full">
<div ref={containerRef} />
{/* <button onClick={handlePlayPause}>{isPlaying ? 'Pause' : 'Play'}</button> */}
</div>
)
}
export default AudioPlayer
|