RD5 GOLD v14.0 - FINAL BOSS

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>RD5 � Zeno Oyente (Optimizado)</title>
<style>
body{
  margin:0;
  background:#231815;
  color:white;
  font-family:Arial;
}
.panel{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:10px;
}
.fila{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  width:100%;
}
.medidor{
  width:120px;
  height:120px;
  border-radius:50%;
  overflow:hidden;
  border:6px solid #333;
  background:black;
}
#btnPlay{
  width:120px;
  height:120px;
  border-radius:50%;
  background:black;
  border:6px solid #e3a465;
  cursor:pointer;
}
audio{
  width:320px;
  max-width:100%;
  background:white;
  border-radius:8px;
  padding:4px;
  filter:
    invert(1)
    sepia(1)
    saturate(1)
    hue-rotate(-30deg)
    brightness(1);
}
.controles{
  display:flex;
  gap:24px;
}
.ctrl{
  display:flex;
  flex-direction:column;
  align-items:center;
  font-size:12px;
  color:white;
}
.ctrl div{
  font-size:11px;
  margin-top:4px;
}
input[type=range]{
  -webkit-appearance:none;
  width:90px;
  height:8px;
  background:#333;
  border-radius:7px;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px;
  height:14px;
  background:#e3a465;
  border-radius:50%;
  border:2px solid orange;
}
</style>
</head>
<body>

<div class="fila">
    <canvas id="btnPlay" width="120" height="120"></canvas>
    <div class="medidor">
      <canvas id="spec" width="120" height="120"></canvas>
    </div>
  </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 class="ctrl">BASS
      <input id="bass" type="range" min="-15" max="15" value="0">
      <div id="pBass">50%</div>
    </div>
    <div class="ctrl">TREB
      <input id="treb" type="range" min="-15" max="15" value="0">
      <div id="pTreb">50%</div>
    </div>
  </div>

</div>

const bassF = ctx.createBiquadFilter(); bassF.type="lowshelf"; bassF.frequency.value=200;
const trebF = ctx.createBiquadFilter(); trebF.type="highshelf"; trebF.frequency.value=3000;
const analyser = ctx.createAnalyser();

const esMovil = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
analyser.fftSize = esMovil ? 128 : 256;

src.connect(bassF); bassF.connect(trebF); trebF.connect(gain); gain.connect(analyser); analyser.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)+"%";}

/* BOTON CIRCULAR PLAY */
const bCanvas = document.getElementById("btnPlay");
const bCtx = bCanvas.getContext("2d");
let playing=false;

bCanvas.onclick = async ()=>{
  if(ctx.state==="suspended") await ctx.resume();
  playing = !playing;
  playing ? player.play() : player.pause();
  drawBtn();
};

/* CANVAS ESPECTRO */
const specCtx = document.getElementById("spec").getContext("2d");
const buffer = new Uint8Array(analyser.frequencyBinCount);

function draw(){
  if(player.paused){ setTimeout(draw,200); return; }

const w = specCtx.canvas.width, h = specCtx.canvas.height;
  analyser.getByteFrequencyData(buffer);
  specCtx.clearRect(0,0,w,h);

const barras = esMovil ? 16 : 32;
  const step = Math.floor(buffer.length / barras);
  const barW = w / barras;

for(let i=0;i<barras;i++){
    let val = buffer[i*step]/255;
    let barH = val*h;
    specCtx.fillStyle = "#e3a465";
    specCtx.fillRect(i*barW, h-barH, barW-2, barH);
  }

setTimeout(draw, esMovil ? 100 : 50);
}
draw();

/* DESBLOQUEO AUDIO EN M�VILES */
player.addEventListener("play", async ()=>{
  if(ctx.state==="suspended") await ctx.resume();
});
</script>

</body>
</html>