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" />
<title>Autoestéreo RD5 - Fondo Negro</title>
<style>
:root {
  --bg: #000;
  --red: #e11;
  --panel: #000;    /* ahora carcaza negra */
  --panel2: #111;   /* display oscuro */
  --panel3: #222;   /* vumetro */
}

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  font-family: "Courier New", monospace;
  color: var(--red);
}

#autostereo {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--panel);
  border: 2px solid black;
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 128px;
  box-sizing: border-box;
}

button#playBtn {
  background: black;
  border: 2px solid var(--red);
  color: var(--red);
  border-radius: 50%;
  width: 70px;
  height: 70px;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#autoLed {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #330;
  border: 2px solid #440;
  box-shadow: none;
  transition: box-shadow 0.15s linear;
  margin-left: 6px;
}
#autoLed.active {
  background: #2bff6b;
  box-shadow: 0 0 8px #2bff6b66;
}

#display {
  font-size: 20px;
  background: var(--panel2);
  padding: 8px 14px;
  border: 2px solid var(--red);
  border-radius: 8px;
  letter-spacing: 3px;
  width: 108px;
  text-align: center;
}

#vumeter {
  width: 140px;
  height: 38px;
  background: var(--panel3);
  border: 2px solid var(--red);
  border-radius: 6px;
  overflow: hidden;
}
.bar {
  height: 100%;
  background: var(--red);
  width: 0%;
  transition: width 0.05s linear;
}

.knob-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 70px;
}
.knob {
  width: 56px;
  height: 56px;
  border: 2px solid var(--red);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #600, #200);
  position: relative;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-135deg);
  transition: transform 0.1s linear;
}
.knob::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 27px;
  width: 3px;
  height: 14px;
  background: var(--red);
  border-radius: 2px;
  transform-origin: bottom center;
}
.label {
  font-size: 13px;
  text-align: center;
  color: var(--red);
}
.small {
  font-size: 11px;
  opacity: 0.9;
}

@media (max-width: 520px) {
  #autostereo {
    transform: scale(0.95);
    padding: 8px;
    gap: 10px;
    height: 110px;
  }
  .knob-container {
    width: 60px;
  }
}
</style>
</head>
<body>

<div class="knob-container">
    <div class="knob" id="volKnob"></div>
    <div class="label small">Volumen</div>
  </div>

<div class="knob-container">
    <div class="knob" id="bassKnob"></div>
    <div class="label small">Graves</div>
  </div>

<div class="knob-container">
    <div class="knob" id="trebleKnob"></div>
    <div class="label small">Agudos</div>
  </div>
</div>

let running=false, startTime=0, displayTimer=null, ledInterval=null;

const ctx=new (window.AudioContext||window.webkitAudioContext)();
const src=ctx.createMediaElementSource(audio);
const bassFilter=ctx.createBiquadFilter(); bassFilter.type='lowshelf'; bassFilter.frequency.value=200; bassFilter.gain.value=0;
const trebleFilter=ctx.createBiquadFilter(); trebleFilter.type='highshelf'; trebleFilter.frequency.value=3000; trebleFilter.gain.value=0;
const gainNode=ctx.createGain(); gainNode.gain.value=0.6;

src.connect(gainNode);
gainNode.connect(ctx.destination);

const analyser=ctx.createAnalyser(); analyser.fftSize=1024;
gainNode.connect(analyser);
const byteData=new Uint8Array(analyser.frequencyBinCount);

src.disconnect();
src.connect(bassFilter).connect(trebleFilter).connect(gainNode).connect(ctx.destination);

function updateVumeter(){
  analyser.getByteFrequencyData(byteData);
  let sum=0;
  for(let i=0;i<byteData.length;i++) sum+=byteData[i];
  let pct=Math.min(100,(sum/byteData.length)/2.55);
  bar.style.width=pct+'%';
  if(running) requestAnimationFrame(updateVumeter);
}

async function calibrateVisual(duration=1000){
  if(ledInterval) clearInterval(ledInterval);
  let on=true;
  ledInterval=setInterval(()=>{ autoLed.style.background=on?'#2bff6b':'#330'; on=!on; },200);
  return new Promise(res=>setTimeout(()=>{
    clearInterval(ledInterval);
    autoLed.style.background='#330';
    res();
  },duration));
}

playBtn.onclick=async()=>{
  if(!running){
    await ctx.resume();
    await audio.play();
    running=true;
    playBtn.textContent='❚❚';
    startTime=Date.now();
    displayTimer=setInterval(updateDisplay,100);
    updateVumeter();
    calibrateVisual(1000);
  }else{
    audio.pause();
    running=false;
    playBtn.textContent='▶';
    clearInterval(displayTimer);
    bar.style.width='0%';
    if(ledInterval) clearInterval(ledInterval);
    autoLed.style.background='#330';
  }
};

volKnob.setVisual(60);
bassKnob.setVisual(50);
trebleKnob.setVisual(50);
</script>

</body>
<br>

</html>