import React, { useState, useRef, useEffect } from 'react';
import { Play, Pause, Music } from 'lucide-react';
export default function AudioPlayer() {
const [isPlaying, setIsPlaying] = useState(false);
const [currentTrack, setCurrentTrack] = useState({
artist: 'Laadt...',
title: 'Muziek aan het laden'
});
const audioRef = useRef(null);
// Fetch RDS metadata from the streaming source
useEffect(() => {
const fetchMetadata = async () => {
try {
const response = await fetch('https://mcp-1.streampanel.nl:8040/status-json.xsl');
const data = await response.json();
if (data.icestats && data.icestats.source) {
const source = Array.isArray(data.icestats.source)
? data.icestats.source[0]
: data.icestats.source;
if (source.title) {
// Parse title format: "Artist - Song" or just "Song"
const parts = source.title.split(' - ');
if (parts.length === 2) {
setCurrentTrack({
artist: parts[0].trim(),
title: parts[1].trim()
});
} else {
setCurrentTrack({
artist: 'Radio Golfbreker',
title: source.title
});
}
}
}
} catch (error) {
console.log('Metadata fetch error:', error);
// Keep default values on error
}
};
fetchMetadata();
// Update metadata every 5 seconds
const interval = setInterval(fetchMetadata, 5000);
return () => clearInterval(interval);
}, []);
const togglePlay = () => {
if (isPlaying) {
audioRef.current?.pause();
} else {
audioRef.current?.play();
}
setIsPlaying(!isPlaying);
};
return (
{/* Player Visualization with RDS Metadata */}
Nu on air
Luister Live
Het beste van alle genres, 24/7
{currentTrack.artist}
{currentTrack.title}