'use client'; import { IconLoader2, IconPlayerPauseFilled, IconPlayerPlayFilled, IconRotate, } from '@tabler/icons-react'; import { motion } from 'motion/react'; import React, { useCallback, useEffect, useRef, useState, } from 'react'; interface AudioPlayerProps { src: string | null; } export default function AudioPlayer({ src }: AudioPlayerProps) { const audioRef = useRef(null); const progressRef = useRef(null); const [isPlaying, setIsPlaying] = useState(false); const [progress, setProgress] = useState(0); const [hasEnded, setHasEnded] = useState(false); const [isDragging, setIsDragging] = useState(false); const wasPlayingBeforeDrag = useRef(false); useEffect(() => { const audio = audioRef.current; if (!audio) return; const updateProgress = () => { if (!isDragging && audio.duration) { setProgress((audio.currentTime / audio.duration) * 100); } }; const handleEnded = () => { setIsPlaying(false); setHasEnded(true); setProgress(100); }; audio.addEventListener('timeupdate', updateProgress); audio.addEventListener('ended', handleEnded); return () => { audio.removeEventListener('timeupdate', updateProgress); audio.removeEventListener('ended', handleEnded); }; }, [isDragging, src]); const togglePlay = () => { const audio = audioRef.current; if (!audio) return; if (hasEnded) { audio.currentTime = 0; setHasEnded(false); audio.play(); setIsPlaying(true); return; } if (isPlaying) { audio.pause(); setIsPlaying(false); } else { audio.play(); setIsPlaying(true); } }; const startDrag = (e: React.PointerEvent) => { const audio = audioRef.current; if (!audio) return; e.preventDefault(); setIsDragging(true); wasPlayingBeforeDrag.current = isPlaying; audio.pause(); setIsPlaying(false); updateDrag(e); }; const updateDrag = useCallback((e: PointerEvent | React.PointerEvent) => { const bar = progressRef.current; if (!bar) return; const rect = bar.getBoundingClientRect(); let x = e.clientX - rect.left; x = Math.max(0, Math.min(x, rect.width)); setProgress((x / rect.width) * 100); }, []); const endDrag = useCallback(() => { const audio = audioRef.current; if (!audio) return; setIsDragging(false); audio.currentTime = (progress / 100) * audio.duration; if (wasPlayingBeforeDrag.current) { audio.play(); setIsPlaying(true); } }, [progress]); useEffect(() => { if (!isDragging) return; window.addEventListener('pointermove', updateDrag); window.addEventListener('pointerup', endDrag); window.addEventListener('pointercancel', endDrag); return () => { window.removeEventListener('pointermove', updateDrag); window.removeEventListener('pointerup', endDrag); window.removeEventListener('pointercancel', endDrag); }; }, [isDragging, updateDrag, endDrag]); return ( <> {/* Loading */} {src === null && ( )} {/* Player */} {src && (

Audio Player

Stack: