RD5 GOLD v14.0 - FINAL BOSS

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>rd5</title>
<style>
body{margin:0;background:#231815;color:white;font-family:Arial}
.cuadro{display:flex;justify-content:center;padding:8px}
.linea{display:flex;align-items:center;gap:12px}
.logo{width:90px;height:70px;background:#111;border:2px solid orange;display:flex;align-items:center;justify-content:center}
.logo img{max-width:100%;max-height:100%}

canvas{background:black;border:4px solid #888;border-radius:50%}

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

input[type=range]{
  -webkit-appearance:none;
  width:140px;
  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>
</div>

const bassF=ctx.createBiquadFilter(); bassF.type="lowshelf"; bassF.frequency.value=200;
const midF=ctx.createBiquadFilter();  midF.type="peaking";  midF.frequency.value=1000;
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;

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

let playing=false;
const bctx=btnPlay.getContext("2d");

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

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)+"%";}
mid.oninput =()=>{midF.gain.value=mid.value; pMid.textContent =Math.round((mid.value+15)/30*100)+"%";}
treb.oninput=()=>{trebF.gain.value=treb.value;pTreb.textContent=Math.round((treb.value+15)/30*100)+"%";}

const cL=vuL.getContext("2d"),
      cR=vuR.getContext("2d"),
      ecg=vuECG.getContext("2d"),
      spec=vuSpec.getContext("2d");

function needle(ctx,v){
 ctx.clearRect(0,0,70,70);
 ctx.beginPath();
 ctx.arc(35,35,28,-Math.PI,0);
 ctx.strokeStyle="#231815";
 ctx.lineWidth=30;
 ctx.stroke();
 ctx.save();
 ctx.translate(35,35);
 ctx.rotate(-Math.PI+v*Math.PI);
 ctx.beginPath();
 ctx.moveTo(0,0);
 ctx.lineTo(30,0);
 ctx.strokeStyle="orange";
 ctx.lineWidth=4;
 ctx.stroke();
 ctx.restore();
}

/* ===== LIMITADOR DE FPS ===== */
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);

let t=new Uint8Array(aL.fftSize);
 aL.getByteTimeDomainData(t);
 ecg.clearRect(0,0,70,70);
 ecg.beginPath();
 ecg.moveTo(0,35);
 t.forEach((v,i)=>ecg.lineTo(i/t.length*70,35+(v-128)/128*25));
 ecg.strokeStyle="lime";
 ecg.stroke();

let f=new Uint8Array(aR.frequencyBinCount);
 aR.getByteFrequencyData(f);
 spec.clearRect(0,0,70,70);
 f.forEach((v,i)=>{
  let h=v/255*70;
  spec.fillStyle='hsl('+i/f.length*360+',100%,50%)';
  spec.fillRect(i*(70/f.length),70-h,70/f.length,h);
 });

requestAnimationFrame(loop);
}

requestAnimationFrame(loop);
</script>
</body>
</html>