RD5 GOLD v14.0 - FINAL BOSS

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

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

/* CUADRITO DEL LOGO (cuadrado siempre) */
.logo-box{
  width:80px;
  height:80px;
  border:2px solid orange;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
}

/* BOTÓN PLAY/PAUSE */
#playBtn{
  width:70px;
  height:70px;
  border-radius:50%;
  border:3px solid red;
  color:black;
  background:red;
  cursor:pointer;
  font-size:17px;
}
#playBtn:hover{
  background:#0f0;
  color:#000;
}

/* VÚMETROS */
canvas{
  background:#000;
  border:1px solid orange;
}

/* CONTROLES */
.ctrl{
  display:flex;
  flex-direction:column;
  font-size:12px;
  text-align:center;
}

/* === SLIDERS NARANJA === */
.ctrl input[type="range"]{
  -webkit-appearance:none;
  width:150px;
  height:15px;
  background:#333;
  border-radius:6px;
  outline:none;
  overflow:hidden;
  border:2px solid orange;
}

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

/* perilla */
.ctrl input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:20px;
  height:20px;
  background:orange;
  border-radius:50%;
  cursor:pointer;
  border:2px solid #000;
  box-shadow:-200px 0 0 200px orange; /* pinta el progreso en naranja */
}

/* Firefox */
.ctrl input[type="range"]::-moz-range-track{
  height:12px;
  background:#222;
}
.ctrl input[type="range"]::-moz-range-progress{
  background:orange;
  height:12px;
}
.ctrl input[type="range"]::-moz-range-thumb{
  width:16px;
  height:16px;
  background:orange;
  border:2px solid #000;
  border-radius:50%;
  cursor:pointer;
}
</style>
</head>
<body>

<button id="playBtn">PLAY</button>

<audio id="radio" crossorigin="anonymous">
    <source src="https://stream.zeno.fm/uqfs2e03h2zuv" type="audio/mpeg">
  </audio>

<canvas id="vuL" width="90" height="50"></canvas>

<canvas id="vuR" width="90" height="50"></canvas>

<canvas id="vumeter" width="260" height="50"></canvas>

<div class="ctrl">
    Vol<br><input type="range" id="volume" min="0" max="1" step="0.01" value="1">
  </div>

<div class="ctrl">
    Treble<br><input type="range" id="treble" min="-20" max="20" value="0">
  </div>

</div>

const AudioContext = window.AudioContext || window.webkitAudioContext;
const ctx = new AudioContext();

const source = ctx.createMediaElementSource(audio);
const analyser = ctx.createAnalyser();
analyser.fftSize = 256;

// filtros
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();

// PLAY / PAUSE
playBtn.onclick=()=>{
  if(audio.paused){
    audio.play();
    playBtn.textContent="PAUSE";
  } else {
    audio.pause();
    playBtn.textContent="PLAY";
  }
};

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

// ========== AGUJAS ==========
const ctxL = vuL.getContext('2d');
const ctxR = vuR.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();

let ang = -Math.PI + val * Math.PI;

ctx.save();
  ctx.translate(45,45);
  ctx.rotate(ang);
  ctx.beginPath();
  ctx.moveTo(0,0);
  ctx.lineTo(35,0);
  ctx.strokeStyle="red";
  ctx.lineWidth=4;
  ctx.stroke();
  ctx.restore();
}

// ========== BARRA ==========
const vb = vumeter.getContext('2d');

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;

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

// barra
  vb.clearRect(0,0,160,50);
  vb.fillStyle="red";
  vb.fillRect(0,01,norm*160,50);

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

</body>
</html>