RD5 GOLD v14.0 - FINAL BOSS

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

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

/* PLAYER */
audio{
  width:180px;
  height:63px;
  background:green;
}

audio::-webkit-media-controls-panel{
  background:green;
}
/* VÚMETROS */
canvas{
  background:#000;
  border:1px solid orange;
}

/* SLIDERS GRISES + BOTÓN NARANJA */
input[type=range]{
  -webkit-appearance:none;
  width:120px;
  height:6px;
  background:#555;
  border:1px solid #777;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:16px;
  height:20px;
  background:orange;
  border:1px solid #000;
  cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:16px;
  height:20px;
  background:orange;
  border:1px solid #000;
  cursor:pointer;
}

/* CONTENEDOR SLIDERS EN LINEA */
.sliders{
  display:flex;
  align-items:center;
  gap:15px;
}

.slider-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  font-size:12px;
}
</style>
</head>

<body>

<div class="sliders">
  <div class="slider-box">
    VOL
    <input type="range" id="volume" min="0" max="1" step="0.01" value="1">
  </div>

</div>

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

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

// VÚMETROS DE AGUJA
const ctxL = vuL.getContext('2d');
const ctxR = vuR.getContext('2d');

function drawNeedle(ctx,val){
  ctx.clearRect(0,0,100,80);

ctx.beginPath();
  ctx.arc(50,50,40,Math.PI,0);
  ctx.strokeStyle="green";
  ctx.lineWidth=4;
  ctx.stroke();

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

ctx.save();
  ctx.translate(50,50);
  ctx.rotate(ang);
  ctx.beginPath();
  ctx.moveTo(0,0);
  ctx.lineTo(40,0);
  ctx.strokeStyle="red";
  ctx.lineWidth=5;
  ctx.stroke();
  ctx.restore();
}

// VÚMETRO MULTICOLOR
const vuBar = vumeter.getContext('2d');

function animateMeters(){
  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);

vuBar.clearRect(0,0,150,60);

let width = norm * 150;

let gradient = vuBar.createLinearGradient(0,0,150,0);
  gradient.addColorStop(0,"green");
  gradient.addColorStop(0.6,"orange");
  gradient.addColorStop(1,"red");

vuBar.fillStyle = gradient;
  vuBar.fillRect(0,5,width,50);
  vuBar.strokeStyle="orange";
  vuBar.strokeRect(0,5,150,50);

requestAnimationFrame(animateMeters);
}

animateMeters();
</script>

</body>
</html>