RD5 GOLD v14.0 - FINAL BOSS

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>RD5 – Agujas + Bass/Treb</title>

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 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);

/* Botón Play */
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();
};

/* 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)+"%";}

/* Agujas */
const cL=vuL.getContext("2d"),
      cR=vuR.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();
}

/* 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>