RD5 GOLD v14.0 - FINAL BOSS

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Radio Zenolive - Vumetro Horizontal</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
  background: #000;
  color: #fff;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.player-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: #111;
  padding: 20px 24px;
  border-radius: 16px;
  width: 90%;
  max-width: 400px;
}

.controls {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
}

button {
  background: blue;
  color: #fff;
  border: none;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 1.2em;
  cursor: pointer;
  flex-shrink: 0;
}

#volume {
  flex-grow: 1;
}

#vumetro {
  width: 100%;
  height: 25px;
  background: #000;
  border-radius: 8px;
}
</style>
</head>
<body>

const playBtn = document.getElementById("playBtn");
const volume = document.getElementById("volume");
const canvas = document.getElementById("vumetro");
const ctx = canvas.getContext("2d");

let audioCtx, analyser, dataArray, bufferLength;
let modoSimulado = false;

// Play/pause
playBtn.addEventListener("click", () => {
  if (audio.paused) audio.play();
  else audio.pause();
  playBtn.textContent = audio.paused ? "▶️" : "⏸️";
});

// Volume
volume.addEventListener("input", ()=>{ audio.volume = volume.value; });

function drawReal() {
  requestAnimationFrame(drawReal);
  if (!analyser) return;
  analyser.getByteFrequencyData(dataArray);
  const avg = dataArray.reduce((a,b)=>a+b,0)/dataArray.length;
  const w = canvas.width;

ctx.fillStyle = "#000";
  ctx.fillRect(0,0,canvas.width,canvas.height);

const grad = ctx.createLinearGradient(0,0,w,0);
  grad.addColorStop(0,"#0f0");
  grad.addColorStop(1,"#f00");

const barWidth = (avg/255)*w;
  ctx.fillStyle = grad;
  ctx.fillRect(0,0,barWidth,canvas.height);
}

// Vumetro simulado
let level = 0;
function fakeDraw() {
  if (!modoSimulado) return;
  requestAnimationFrame(fakeDraw);
  level = 0.8*level + 0.2*Math.random()*255;
  const w = canvas.width;
  ctx.fillStyle = "#000";
  ctx.fillRect(0,0,canvas.width,canvas.height);
  const grad = ctx.createLinearGradient(0,0,w,0);
  grad.addColorStop(0,"#0f0");
  grad.addColorStop(1,"#f00");
  ctx.fillStyle = grad;
  ctx.fillRect(0,0,(level/255)*w,canvas.height);
}

audio.addEventListener("play", ()=>{
  if(!audioCtx) initAudioContext();
  if(audioCtx && audioCtx.state==="suspended") audioCtx.resume();
  if(!modoSimulado) drawReal();
  else fakeDraw();
});
</script>

</body>
</html>