RD5 GOLD v14.0 - FINAL BOSS

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Radio Online - Graves y Agudos</title>
<style>
  body { background: black; color: white; font-family: Arial, sans-serif; padding: 10px; }
  h2 { margin-bottom: 15px; }
  #controls { display: flex; gap: 20px; align-items: center; justify-content: flex-start; flex-wrap: wrap; }
  button { padding: 10px 25px; background: red; border: 1px solid #555; color: black; cursor: pointer; font-size: 1em; }
  button:hover { background: cyan; }
  .slider-container { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
  .slider { -webkit-appearance: none; width: 150px; height: 12px; background: #222; cursor: pointer; }
  .slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; background: lime; border-radius: 50%; border: none; }
  .eq-container { display: flex; gap: 20px; align-items: center; }
  .eq-band { display: flex; flex-direction: column; align-items: flex-start; }
  #vumeter { width: 100%; height: 25px; background: #111; margin: 20px 0; border-radius: 10px; overflow: hidden; }
  #vumeter-fill { height: 100%; width: 0%; background: orange; transition: width 0.05s linear; }
  label { font-size: 0.9em; }
</style>
</head>
<body>

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

<div class="eq-container">
    <div class="eq-band">
      <label>Graves</label>
      <input type="range" min="-20" max="20" value="0" class="slider" id="eqBass">
    </div>
    <div class="eq-band">
      <label>Agudos</label>
      <input type="range" min="-20" max="20" value="0" class="slider" id="eqTreble">
    </div>
  </div>
</div>

// ===== AudioContext y EQ =====
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const source = audioCtx.createMediaElementSource(audio);
const gainNode = audioCtx.createGain();
const analyser = audioCtx.createAnalyser();
analyser.fftSize = 256;

const eqBass = audioCtx.createBiquadFilter();
eqBass.type = 'lowshelf';
eqBass.frequency.value = 60;
eqBass.gain.value = 0;

const eqTreble = audioCtx.createBiquadFilter();
eqTreble.type = 'highshelf';
eqTreble.frequency.value = 8000;
eqTreble.gain.value = 0;

// Conexión
source.connect(eqBass);
eqBass.connect(eqTreble);
eqTreble.connect(gainNode);
gainNode.connect(analyser);
analyser.connect(audioCtx.destination);

// ===== Sliders =====
document.getElementById('eqBass').addEventListener('input', e => { eqBass.gain.value = parseFloat(e.target.value); });
document.getElementById('eqTreble').addEventListener('input', e => { eqTreble.gain.value = parseFloat(e.target.value); });
document.getElementById('volumeSlider').addEventListener('input', e => { gainNode.gain.value = parseFloat(e.target.value); });

// ===== Play/Pause =====
let playing = false;
document.getElementById('playPause').addEventListener('click', () => {
  if(!playing){
    audioCtx.resume();
    audio.play();
    document.getElementById('playPause').textContent = 'Pause';
    playing = true;
  } else {
    audio.pause();
    document.getElementById('playPause').textContent = 'Play >';
    playing = false;
  }
});

// ===== Vumeter =====
const vumeterFill = document.getElementById('vumeter-fill');
function drawVumeter(){
  requestAnimationFrame(drawVumeter);
  let data = new Uint8Array(analyser.frequencyBinCount);
  analyser.getByteFrequencyData(data);
  let avg = data.reduce((a,b)=>a+b,0)/data.length;
  vumeterFill.style.width = avg + '%';
}
drawVumeter();
</script>

</body>
</html>