RD5 GOLD v14.0 - FINAL BOSS

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>RD5-ARGENTINA</title>

.panel{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:15px;
  border:2px solid orange;
  background:#111;
  padding:15px;
  width:fit-content;
}

.logo-box{
  width:80px;
  height:80px;
  border:2px solid orange;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
}

#playBtn{
  width:70px;
  height:70px;
  border-radius:50%;
  border:3px solid red;
  background:red;
  color:black;
  cursor:pointer;
  font-size:16px;
}

#playBtn:hover{
  background:#0f0;
  color:#000;
}

canvas{
  background:#000;
  border:1px solid orange;
}

/* CONTROLES */
.controls-row{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
}

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

/* SLIDER LIMPIO */
.ctrl input[type="range"]{
  -webkit-appearance:none;
  width:120px;
  height:6px;
  background:#333;
  border-radius:4px;
  border:1px solid orange;
  outline:none;
}

/* TRACK */
.ctrl input[type="range"]::-webkit-slider-runnable-track{
  height:6px;
  background:#222;
}

/* THUMB */
.ctrl input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:16px;
  height:16px;
  background:orange;
  border-radius:50%;
  border:2px solid #000;
  cursor:pointer;
  margin-top:-5px;
}

.ctrl input[type="range"]::-moz-range-track{
  height:6px;
  background:#222;
}

.ctrl input[type="range"]::-moz-range-thumb{
  width:16px;
  height:16px;
  background:orange;
  border:2px solid #000;
  border-radius:50%;
  cursor:pointer;
}

#clock{
  color:#0f0;
  font-size:12px;
  margin-top:4px;
}
</style>
</head>

<body>

<div class="controls-row">
    <div class="ctrl">
      Vol
      <input type="range" id="volume" min="0" max="1" step="0.01" value="1">
    </div>
    <div class="ctrl">
      Bass
      <input type="range" id="bass" min="-20" max="20" value="0">
    </div>
    <div class="ctrl">
      Treble
      <input type="range" id="treble" min="-20" max="20" value="0">
    </div>
  </div>

</div>

let t = 0;
let timer = null;

playBtn.onclick = () => {
  if(audio.paused){
    audio.play();
    playBtn.textContent = "PAUSE";
    if(!timer){
      timer = setInterval(() => {
        t++;
        clock.textContent = new Date(t*1000).toISOString().substr(11,8);
      },1000);
    }
  }else{
    audio.pause();
    playBtn.textContent = "PLAY";
    clearInterval(timer);
    timer = null;
  }
};

const AudioContext = window.AudioContext || window.webkitAudioContext;
const ctx = new AudioContext();
const source = ctx.createMediaElementSource(audio);
const analyser = ctx.createAnalyser();
analyser.fftSize = 256;

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

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

source.connect(bassFilter);
bassFilter.connect(trebleFilter);
trebleFilter.connect(analyser);
analyser.connect(ctx.destination);

audio.onplay = () => ctx.resume();

volume.oninput = () => audio.volume = volume.value;
bass.oninput = () => bassFilter.gain.value = bass.value;
treble.oninput = () => trebleFilter.gain.value = treble.value;

const ctxL = vuL.getContext('2d');
const ctxR = vuR.getContext('2d');
const vb  = vumeter.getContext('2d');

function drawNeedle(ctx,val){
  ctx.clearRect(0,0,100,50);
  ctx.beginPath();
  ctx.arc(45,45,35,Math.PI,0);
  ctx.strokeStyle="green";
  ctx.lineWidth=3;
  ctx.stroke();

ctx.save();
  ctx.translate(45,45);
  ctx.rotate(-Math.PI + val*Math.PI);
  ctx.beginPath();
  ctx.moveTo(0,0);
  ctx.lineTo(35,0);
  ctx.strokeStyle="red";
  ctx.lineWidth=4;
  ctx.stroke();
  ctx.restore();
}

function animate(){
  let data = new Uint8Array(analyser.frequencyBinCount);
  analyser.getByteFrequencyData(data);
  let level = data.reduce((a,b)=>a+b)/data.length;
  let norm = level/180;

drawNeedle(ctxL,norm);
  drawNeedle(ctxR,norm);

vb.clearRect(0,0,260,50);
  vb.fillStyle="red";
  vb.fillRect(0,0,norm*260,50);

requestAnimationFrame(animate);
}
animate();
</script>

</body>
</html>