142 lines
4.1 KiB
TypeScript
142 lines
4.1 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, useRef } from 'react';
|
|
import { Volume2, VolumeX, Play, Pause } from 'lucide-react';
|
|
|
|
interface Props {}
|
|
|
|
export default function BackgroundMusicPlayer({}: Props) {
|
|
const audioRef = useRef<HTMLAudioElement>(null);
|
|
const [isPlaying, setIsPlaying] = useState(false);
|
|
const [volume, setVolume] = useState(0.5);
|
|
const [isLoaded, setIsLoaded] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
const audio = audioRef.current;
|
|
if (!audio) return;
|
|
|
|
audio.volume = volume;
|
|
}, [volume]);
|
|
|
|
useEffect(() => {
|
|
const audio = audioRef.current;
|
|
if (!audio) return;
|
|
|
|
const handleCanPlay = () => {
|
|
setIsLoaded(true);
|
|
setError(null);
|
|
};
|
|
|
|
const handleError = () => {
|
|
setError('Failed to load audio');
|
|
setIsPlaying(false);
|
|
};
|
|
|
|
const handleEnded = () => {
|
|
audio.currentTime = 0;
|
|
audio.play().catch(() => {
|
|
setIsPlaying(false);
|
|
});
|
|
};
|
|
|
|
audio.addEventListener('canplay', handleCanPlay);
|
|
audio.addEventListener('error', handleError);
|
|
audio.addEventListener('ended', handleEnded);
|
|
|
|
return () => {
|
|
audio.removeEventListener('canplay', handleCanPlay);
|
|
audio.removeEventListener('error', handleError);
|
|
audio.removeEventListener('ended', handleEnded);
|
|
};
|
|
}, []);
|
|
|
|
const togglePlayPause = async () => {
|
|
const audio = audioRef.current;
|
|
if (!audio) return;
|
|
|
|
try {
|
|
if (isPlaying) {
|
|
audio.pause();
|
|
setIsPlaying(false);
|
|
} else {
|
|
await audio.play();
|
|
setIsPlaying(true);
|
|
}
|
|
} catch (err) {
|
|
setError('Autoplay policy prevented playback');
|
|
setIsPlaying(false);
|
|
}
|
|
};
|
|
|
|
const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const newVolume = parseFloat(e.target.value);
|
|
setVolume(newVolume);
|
|
};
|
|
|
|
return (
|
|
<div className="fixed bottom-6 right-6 bg-gradient-to-br from-slate-900 to-slate-800 rounded-lg shadow-2xl p-4 w-80 border border-slate-700">
|
|
<audio
|
|
ref={audioRef}
|
|
src="https://www.freepik.com/audio/tune/static"
|
|
loop
|
|
crossOrigin="anonymous"
|
|
/>
|
|
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-sm font-semibold text-white">Background Music</h3>
|
|
<div className="text-xs text-slate-400">
|
|
{isLoaded ? 'Ready' : 'Loading...'}
|
|
</div>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="text-xs text-red-400 bg-red-950 bg-opacity-50 rounded px-2 py-1">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
onClick={togglePlayPause}
|
|
disabled={!isLoaded}
|
|
className="flex-shrink-0 bg-blue-600 hover:bg-blue-700 disabled:bg-slate-600 disabled:cursor-not-allowed text-white rounded-full p-2 transition-colors duration-200"
|
|
aria-label={isPlaying ? 'Pause' : 'Play'}
|
|
>
|
|
{isPlaying ? (
|
|
<Pause size={20} fill="currentColor" />
|
|
) : (
|
|
<Play size={20} fill="currentColor" />
|
|
)}
|
|
</button>
|
|
|
|
<div className="flex-1 flex items-center gap-2">
|
|
{volume === 0 ? (
|
|
<VolumeX size={18} className="text-slate-400 flex-shrink-0" />
|
|
) : (
|
|
<Volume2 size={18} className="text-slate-400 flex-shrink-0" />
|
|
)}
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="1"
|
|
step="0.05"
|
|
value={volume}
|
|
onChange={handleVolumeChange}
|
|
className="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-blue-600"
|
|
aria-label="Volume"
|
|
/>
|
|
<span className="text-xs text-slate-400 w-8 text-right">
|
|
{Math.round(volume * 100)}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-xs text-slate-500 text-center">
|
|
{isPlaying ? 'Now playing' : 'Paused'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |