RD5 GOLD v14.0 - FINAL BOSS

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Reproductor RD5 - Zeno Radio</title>
<style>
body { background:black; color:white; font-family:Arial,sans-serif; padding:10px; }
h2 { margin-bottom:5px; color:orange; }
#currentTrack { color:lime; font-size:1.1em; display:block; margin-bottom:10px; min-height:24px; }
#controls { margin:10px 0; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
button { padding:9px 20px; background:red; border:1px solid #555; color:#eee; cursor:pointer; }
button:hover { background:green; }
.slider-container { display:flex; flex-direction:column; align-items:center; gap:3px; }
.slider { -webkit-appearance:none; width:160px; height:10px; background:#222; cursor:pointer; }
.slider::-webkit-slider-thumb { -webkit-appearance:none; width:40px; height:20px; background:lime; border-radius:50%; border:none; }
canvas { background:black; border:1px solid #333; width:250px; height:30px; margin-top:10px; }
.visuals { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
#time { text-align:right; font-size:14px; margin-top:5px; color:#0f0; font-family:monospace; }
</style>
</head>
<body>

<div id="controls">
  <button id="play">Play</button>
  <button id="pause">Pause</button>
  <button id="stop">Stop</button>

<div class="slider-container">
    <label>Volumen</label>
    <input type="range" min="0" max="1" step="0.01" value="0.8" class="slider" id="volumeSlider">
  </div>

<div class="slider-container">
    <label>Graves (60Hz)</label>
    <input type="range" min="-20" max="20" value="0" class="slider" id="eq60">
  </div>

<div class="slider-container">
    <label>Agudos (16kHz)</label>
    <input type="range" min="-20" max="20" value="0" class="slider" id="eq16000">
  </div>
</div>

const playBtn = document.getElementById('play');
const pauseBtn = document.getElementById('pause');
const stopBtn = document.getElementById('stop');
const volumeSlider = document.getElementById('volumeSlider');
const eq60 = document.getElementById('eq60');
const eq16k = document.getElementById('eq16000');
const timeDisplay = document.getElementById('time');
const currentTrackEl = document.getElementById('currentTrack');

const canvasEQ = document.getElementById('eqCanvas');
const ctxEQ = canvasEQ.getContext('2d');
const canvasOsc = document.getElementById('oscCanvas');
const ctxOsc = canvasOsc.getContext('2d');
const canvasVU = document.getElementById('vumCanvas');
const ctxVU = canvasVU.getContext('2d');

function setupAudioContext(){
  if(audioCtx) return;
  audioCtx = new (window.AudioContext||window.webkitAudioContext)();
  analyser = audioCtx.createAnalyser();
  analyser.fftSize = 256;
  gainNode = audioCtx.createGain();

let freqs = [60,16000];
  eqFilters = freqs.map(f=>{
    let filter = audioCtx.createBiquadFilter();
    filter.type = 'peaking';
    filter.frequency.value = f;
    filter.Q.value = 1;
    filter.gain.value = 0;
    return filter;
  });

const src = audioCtx.createMediaElementSource(audio);
  src.connect(eqFilters[0]);
  eqFilters[0].connect(eqFilters[1]);
  eqFilters[1].connect(gainNode);
  gainNode.connect(analyser);
  analyser.connect(audioCtx.destination);

eq60.addEventListener('input', ()=>{eqFilters[0].gain.value=parseFloat(eq60.value);});
  eq16k.addEventListener('input', ()=>{eqFilters[1].gain.value=parseFloat(eq16k.value);});
  volumeSlider.addEventListener('input', ()=>{gainNode.gain.value=parseFloat(volumeSlider.value);});

drawEQ();
  drawOscilloscope();
  drawVUMeter();
}

playBtn.onclick = ()=>{ setupAudioContext(); audio.play(); };
pauseBtn.onclick = ()=>{ audio.pause(); };
stopBtn.onclick = ()=>{ audio.pause(); audio.currentTime=0; };

function drawOscilloscope(){
  ctxOsc.clearRect(0,0,canvasOsc.width,canvasOsc.height);
  let data = new Uint8Array(analyser.fftSize);
  analyser.getByteTimeDomainData(data);
  ctxOsc.beginPath();
  ctxOsc.lineWidth=2;
  ctxOsc.strokeStyle="lime";
  for(let i=0;i<data.length;i++){
    let x = (i/data.length)*canvasOsc.width;
    let y = (data[i]/255)*canvasOsc.height;
    if(i===0) ctxOsc.moveTo(x,y);
    else ctxOsc.lineTo(x,y);
  }
  ctxOsc.stroke();
  requestAnimationFrame(drawOscilloscope);
}

function drawVUMeter(){
  ctxVU.clearRect(0,0,canvasVU.width,canvasVU.height);
  let data = new Uint8Array(analyser.frequencyBinCount);
  analyser.getByteFrequencyData(data);
  let avg = data.reduce((a,b)=>a+b,0)/data.length;
  let width = (avg/255)*canvasVU.width;
  ctxVU.fillStyle="rgba(80,80,80,0.3)";
  ctxVU.fillRect(0,canvasVU.height/3,canvasVU.width,canvasVU.height/3);
  ctxVU.fillStyle="orange";
  ctxVU.fillRect(0,canvasVU.height/3,width,canvasVU.height/3);
  requestAnimationFrame(drawVUMeter);
}

// Mostrar hora o título del tema
setInterval(()=>{
  if(!audio.paused){
    updateNowPlaying();
  }
},10000);

// 🔹 Obtener tema actual desde Zeno JSON
async function updateNowPlaying(){
  try {
    const res = await fetch(`https://zeno.fm/player-info/${STREAM_ID}.json`);
    const data = await res.json();
    if(data && data.current_track && data.current_track.title){
      currentTrackEl.textContent = data.current_track.title;
    } else {
      currentTrackEl.textContent = "Transmitiendo...";
    }
  } catch(e){
    currentTrackEl.textContent = "Conectando...";
  }
}

// Actualiza cada segundo la hora como backup visual
setInterval(()=>{
  if(audio.paused) return;
  const d = new Date();
  timeDisplay.textContent = d.toLocaleTimeString();
},1000);
</script>
</body>
</html>