RD5 GOLD v14.0 - FINAL BOSS

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Radio Ultra Rápida</title>

#controls{
  display:flex;
  gap:20px;
  align-items:center;
  flex-wrap:wrap;
}

button{
  padding:10px 25px;
  background:red;
  border:1px solid ORANGE;
  color:black;
  cursor:pointer;
}

.slider-box{
  display:flex;
  flex-direction:column;
  gap:5px;
}

input[type=range]{
  width:150px;
  height:12px;
}

#vumeter{
  width:100%;
  height:25px;
  background:#111;
  margin-top:20px;
  border-radius:10px;
  overflow:hidden;
}

#vumeter-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,lime,yellow,red);
  transition:width 0.08s linear;
}
</style>
</head>

<body>

<h2>🔊 S.A.S.- Carga rapida de señal</h2>

<div class="slider-box">
    <label>Volumen</label>
    <input type="range" min="0" max="1" step="0.01" value="0.8" id="vol">
  </div>

<div class="slider-box">
    <label>Graves</label>
    <input type="range" min="-15" max="15" value="0" id="bass">
  </div>

<div class="slider-box">
    <label>Agudos</label>
    <input type="range" min="-15" max="15" value="0" id="treble">
  </div>
</div>

let ctx, analyser, gainNode, bassFilter, trebleFilter, source;
let playing = false;

const playBtn = document.getElementById("playBtn");
const vumeter = document.getElementById("vumeter-fill");

// Inicializa solo al tocar PLAY (máxima velocidad)
function initAudio(){
  if(ctx) return;

ctx = new (window.AudioContext || window.webkitAudioContext)();
  analyser = ctx.createAnalyser();
  analyser.fftSize = 64;

gainNode = ctx.createGain();

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

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

source = ctx.createMediaElementSource(audio);

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

startVumeter();
}

// PLAY / STOP
playBtn.onclick = () => {
  initAudio();
  if(!playing){
    audio.play();
    playBtn.textContent = "STOP";
    playing = true;
  }else{
    audio.pause();
    playBtn.textContent = "PLAY";
    playing = false;
  }
};

// Controles
vol.oninput = e => gainNode.gain.value = e.target.value;
bass.oninput = e => bassFilter.gain.value = e.target.value;
treble.oninput = e => trebleFilter.gain.value = e.target.value;

// Vúmetro ultra liviano
function startVumeter(){
  const data = new Uint8Array(analyser.frequencyBinCount);
  function loop(){
    analyser.getByteFrequencyData(data);
    let level = data.reduce((a,b)=>a+b,0) / data.length;
    vumeter.style.width = level + "%";
    requestAnimationFrame(loop);
  }
  loop();
}
</script>

</body>
</html>