RD5 GOLD v14.0 - FINAL BOSS

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>RD5 – Vúmetros + Player Nativo</title>

.panel{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:10px;
}

/* FILAS */
.fila{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:100%;
}

/* VÚMETROS */
canvas{
  background:black;
  border:4px solid #888;
  border-radius:50%;
}

/* Reproductor nativo */
audio{
  width:90%;
  max-width:420px;
}

/* Controles */
.controles{
  display:flex;
  gap:24px;
}

.ctrl{
  display:flex;
  flex-direction:column;
  align-items:center;
  font-size:12px;
  color:orange;
}

.ctrl div{
  font-size:11px;
  margin-top:4px;
}

/* Sliders */
input[type=range]{
  -webkit-appearance:none;
  width:120px;
  height:8px;
  background:#3a2c28;
  border-radius:5px;
}

input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px;
  height:14px;
  background:#e3a465;
  border-radius:50%;
  border:2px solid black;
}
</style>
</head>

<body>

<div class="fila">
    <canvas id="vuL" width="80" height="80"></canvas>
    <canvas id="vuR" width="80" height="80"></canvas>
  </div>

<div class="fila">
    <audio id="player" controls playsinline crossorigin="anonymous"
      src="https://stream.zeno.fm/yw17eqsypg8uv">
    </audio>
  </div>

<div class="fila controles">
    <div class="ctrl">VOL
      <input id="vol" type="range" min="0" max="1" step="0.01" value="0.8">
      <div id="pVol">80%</div>
    </div>

</div>

const player = document.getElementById("player");
const src = ctx.createMediaElementSource(player);
const gain = ctx.createGain();

const bassF = ctx.createBiquadFilter();
bassF.type = "lowshelf";
bassF.frequency.value = 200;

const trebF = ctx.createBiquadFilter();
trebF.type = "highshelf";
trebF.frequency.value = 3000;

const split = ctx.createChannelSplitter(2);
const aL = ctx.createAnalyser();
const aR = ctx.createAnalyser();
aL.fftSize = aR.fftSize = 256;

/* Conexiones */
src.connect(bassF);
bassF.connect(trebF);
trebF.connect(gain);
gain.connect(split);
split.connect(aL,0);
split.connect(aR,1);
gain.connect(ctx.destination);

/* Sliders */
vol.oninput = ()=>{
  gain.gain.value = vol.value;
  pVol.textContent = Math.round(vol.value*100) + "%";
};

bass.oninput = ()=>{
  bassF.gain.value = bass.value;
  pBass.textContent = Math.round((bass.value+15)/30*100) + "%";
};

treb.oninput = ()=>{
  trebF.gain.value = treb.value;
  pTreb.textContent = Math.round((treb.value+15)/30*100) + "%";
};

/* Desbloqueo audio en móvil */
player.addEventListener("play", async ()=>{
  if(ctx.state === "suspended"){
    await ctx.resume();
  }
});

/* VÚMETROS */
const cL = vuL.getContext("2d");
const cR = vuR.getContext("2d");

function needle(ctx,v){
  const w = ctx.canvas.width;
  const h = ctx.canvas.height;
  const r = w/2 - 6;

ctx.clearRect(0,0,w,h);

ctx.beginPath();
  ctx.arc(w/2,h/2,r,-Math.PI,0);
  ctx.strokeStyle="#231815";
  ctx.lineWidth=30;
  ctx.stroke();

ctx.save();
  ctx.translate(w/2,h/2);
  ctx.rotate(-Math.PI + v*Math.PI);
  ctx.beginPath();
  ctx.moveTo(0,0);
  ctx.lineTo(r,0);
  ctx.strokeStyle="orange";
  ctx.lineWidth=4;
  ctx.stroke();
  ctx.restore();
}

/* Loop */
let lastFrame = 0;
const FPS = 20;
const FRAME_TIME = 1000 / FPS;

function loop(now){
  if(now - lastFrame < FRAME_TIME){
    requestAnimationFrame(loop);
    return;
  }
  lastFrame = now;

let L = new Uint8Array(aL.frequencyBinCount);
  let R = new Uint8Array(aR.frequencyBinCount);
  aL.getByteFrequencyData(L);
  aR.getByteFrequencyData(R);

needle(cL, L.reduce((a,b)=>a+b)/L.length/255);
  needle(cR, R.reduce((a,b)=>a+b)/R.length/255);

requestAnimationFrame(loop);
}

requestAnimationFrame(loop);
</script>

</body>
</html>