/* global React */ const { useState, useEffect, useRef } = React; // ============================================================================= // AUDIO PLAYER — Banda sonora del Reino // ============================================================================= const AudioPlayer = () => { const audioRef = useRef(null); const [playing, setPlaying] = useState(false); const [current, setCurrent] = useState(0); const [duration, setDuration] = useState(0); const [volume, setVolume] = useState(0.8); const [muted, setMuted] = useState(false); const [loaded, setLoaded] = useState(false); useEffect(() => { const a = audioRef.current; if (!a) return; const onTime = () => setCurrent(a.currentTime); const onMeta = () => {setDuration(a.duration);setLoaded(true);}; const onEnd = () => setPlaying(false); a.addEventListener("timeupdate", onTime); a.addEventListener("loadedmetadata", onMeta); a.addEventListener("ended", onEnd); return () => { a.removeEventListener("timeupdate", onTime); a.removeEventListener("loadedmetadata", onMeta); a.removeEventListener("ended", onEnd); }; }, []); const toggle = async () => { const a = audioRef.current; if (!a) return; if (playing) { a.pause(); setPlaying(false); } else { try {await a.play();setPlaying(true);} catch (e) {console.warn(e);} } }; const seek = (e) => { const a = audioRef.current; if (!a || !duration) return; const rect = e.currentTarget.getBoundingClientRect(); const pct = (e.clientX - rect.left) / rect.width; a.currentTime = Math.max(0, Math.min(duration, pct * duration)); }; const changeVolume = (v) => { setVolume(v); if (audioRef.current) audioRef.current.volume = v; if (v > 0 && muted) { setMuted(false); if (audioRef.current) audioRef.current.muted = false; } }; const toggleMute = () => { const m = !muted; setMuted(m); if (audioRef.current) audioRef.current.muted = m; }; const fmt = (s) => { if (!s || isNaN(s)) return "0:00"; const m = Math.floor(s / 60); const ss = Math.floor(s % 60); return `${m}:${ss.toString().padStart(2, "0")}`; }; const progress = duration ? current / duration * 100 : 0; return (

{/* Background art */}

{/* Left — section copy */}

· Banda sonora del Reino

LA CALLE
SUENA ASÍ.

Cada cancha tiene su soundtrack. El nuestro lo escribe el barrio. Hip-hop chileno hecho por uno de los nuestros, para sonar fuerte cuando el balón pica.

Track 01 2026

{/* Right — player */}

{/* Top brand strip */}

Reyes Records · 01

Hip-Hop · Chile

{/* Cover art — vinyl */}

{/* Vinyl behind */}

{/* Vinyl grooves */}

{/* Center label */}

{/* Album art on top of vinyl */}

aka Atomic10

2026

{/* Player controls */}

Single 2026

AKA ATOMIC10

aka ORIGINAL

{/* Equalizer */}

{Array.from({ length: 48 }).map((_, i) => )}

{/* Scrubber */}

{fmt(current)} {fmt(duration)}

{/* Controls row */}

changeVolume(parseFloat(e.target.value))} className="audio-volume max-w-[120px]" />

{loaded ? "♪ 320 kbps" : "Cargando..."}

{/* Hidden audio element */}

); }; window.AudioPlayer = AudioPlayer;

LA CALLESUENA ASÍ.

AKA ATOMIC10

LA CALLE
SUENA ASÍ.