RD5 GOLD v14.0 - FINAL BOSS

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rd5 - 5 barras</title>
<style>
body { 
  margin: 0; 
  background: #231815; 
  color: white; 
  font-family: Arial; 
}

/* El cuadro principal apila las "líneas" verticalmente */
.cuadro { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  padding: 15px; 
  gap: 20px; 
}

/* Cada línea agrupa elementos y baja a la siguiente fila si no hay espacio (flex-wrap) */
.linea { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 12px; 
  flex-wrap: wrap; 
}

.logo { 
  width: 90px; 
  height: 70px; 
  background: #111; 
  border: 2px solid orange; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}
.logo img { max-width: 100%; max-height: 100%; }

/* ===== PLAY ===== */
#btnPlay { 
  background: black; 
  border: 4px solid #888; 
  border-radius: 50%; 
  cursor: pointer; 
}

/* ===== ESPECTRO ===== */
#vuSpec { 
  background: black; 
  border: 3px solid #888; 
  border-radius: 14px; 
}

/* ===== CONTROLES ===== */
.ctrl { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  font-size: 12px; 
}
.ctrl div { 
  font-size: 11px; 
  color: orange; 
}
input[type=range] { 
  -webkit-appearance: none; 
  width: 120px; 
  height: 8px; 
  background: #3a2c28; 
  border-radius: 5px; 
  cursor: pointer; 
}
input[type=range]::-webkit-slider-thumb { 
  -webkit-appearance: none; 
  width: 14px; 
  height: 14px; 
  background: #e3a465; 
  border-radius: 50%; 
  border: 2px solid black; 
}
</style>
</head>
<body>

const bassF = ctx.createBiquadFilter(); bassF.type = "lowshelf"; bassF.frequency.value = 200;
const midF = ctx.createBiquadFilter(); midF.type = "peaking"; midF.frequency.value = 1000;
const trebF = ctx.createBiquadFilter(); trebF.type = "highshelf"; trebF.frequency.value = 3000;
const analyser = ctx.createAnalyser(); analyser.fftSize = 256;

src.connect(bassF); 
bassF.connect(midF); 
midF.connect(trebF); 
trebF.connect(gain); 
gain.connect(analyser); 
analyser.connect(ctx.destination);

/* ===== CONTROLES ===== */
vol.oninput = () => { gain.gain.value = vol.value; pVol.textContent = Math.round(vol.value * 100) + "%"; };
bass.oninput = () => { bassF.gain.value = bass.value; pBass.textContent = Math.round((+bass.value + 15) / 30 * 100) + "%"; };
mid.oninput = () => { midF.gain.value = mid.value; pMid.textContent = Math.round((+mid.value + 15) / 30 * 100) + "%"; };
treb.oninput = () => { trebF.gain.value = treb.value; pTreb.textContent = Math.round((+treb.value + 15) / 30 * 100) + "%"; };

/* ===== PLAY DIBUJO ===== */
const bctx = btnPlay.getContext("2d");
let playing = false;

function drawBtn() {
  bctx.clearRect(0, 0, 70, 70);
  bctx.beginPath();
  bctx.arc(35, 35, 30, 0, Math.PI * 2);
  bctx.fillStyle = "#e3a465";
  bctx.fill();

bctx.fillStyle = "#000";
  if (!playing) {
    bctx.beginPath();
    bctx.moveTo(28, 22);
    bctx.lineTo(28, 48);
    bctx.lineTo(48, 35);
    bctx.fill();
  } else {
    bctx.fillRect(26, 22, 6, 26);
    bctx.fillRect(38, 22, 6, 26);
  }
}
drawBtn();

btnPlay.onclick = async () => {
  if (ctx.state === "suspended") await ctx.resume();
  playing = !playing;
  playing ? player.play() : player.pause();
  drawBtn();
  if (playing) requestAnimationFrame(loop);
};

/* ===== ESPECTRO (ECO) ===== */
const sctx = vuSpec.getContext("2d");
const data = new Uint8Array(analyser.frequencyBinCount);
let last = 0, FPS = 20;

function loop(t) {
  if (!playing) return;
  if (t - last < 1000 / FPS) { requestAnimationFrame(loop); return; }
  last = t;

analyser.getByteFrequencyData(data);
  sctx.clearRect(0, 0, 260, 70);

// --- LÓGICA DE 5 BARRAS ---
  const numBars = 5;
  const bucketSize = Math.floor(data.length / numBars); // 128 / 5 = 25 frecuencias por barra
  const barWidth = 260 / numBars; // Ancho para cada una de las 5 barras (52px)

for (let b = 0; b < numBars; b++) {
    let sum = 0;
    // Promediamos los valores de frecuencia de este bloque
    for (let j = 0; j < bucketSize; j++) {
      sum += data[b * bucketSize + j];
    }
    const avg = sum / bucketSize;
    const h = avg / 255 * 70; // Altura máxima limitada a 70px

sctx.fillStyle = `hsl(${b * (360 / numBars)}, 100%, 50%)`;
    // Dibujamos la barra restando un par de píxeles al ancho para que se note la separación
    sctx.fillRect(b * barWidth, 70 - h, barWidth - 4, h);
  }

requestAnimationFrame(loop);
}
</script>
</body>
</html>