RD5 GOLD v14.0 - FINAL BOSS

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>RD5 – AutoDJ Oyente</title>

.medidor{
  width:90px;
  height:90px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid #f3cf7a;
  background:black;
}
#audioWrapper audio{
  width:210px;
  background:white;
  border-radius:8px;
  padding:4px;
  filter:invert(1) sepia(1) saturate(1) hue-rotate(-30deg);
}

.controles{display:flex;gap:24px}
.ctrl{display:flex;flex-direction:column;align-items:center;font-size:12px}
.ctrl div{font-size:11px;margin-top:4px}
input[type=range]{
  -webkit-appearance:none;
  width:90px;height:8px;
  background:#333;border-radius:7px;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px;height:14px;
  background:#e3a465;border-radius:50%;
  border:2px solid blue;
}
#btnPlay{width:100px;height:100px;cursor:pointer;}
</style>
</head>

<body>

const gain = ctx.createGain();
const bassF = ctx.createBiquadFilter();
bassF.type="lowshelf"; bassF.frequency.value=200;
const trebF = ctx.createBiquadFilter();
trebF.type="highshelf"; trebF.frequency.value=3000;

const analyser = ctx.createAnalyser();
analyser.fftSize = 128;

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

/* CONTROLES */
const vol = document.getElementById("vol");
const bass = document.getElementById("bass");
const treb = document.getElementById("treb");
const pVol = document.getElementById("pVol");
const pBass = document.getElementById("pBass");
const pTreb = document.getElementById("pTreb");

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)+"%";}
treb.oninput = ()=>{trebF.gain.value=treb.value;pTreb.textContent=Math.round((treb.value+15)/30*100)+"%";}

/* PLAYLIST */
let playlist=[], index=0;

fetch("tracks.json?"+Date.now())
.then(r=>r.json())
.then(d=>{
  playlist=d||[];
  if(playlist.length) player.src=playlist[0];
});

player.onended=()=>{
  if(playlist.length===0) return;
  index = (index+1) % playlist.length;
  player.src = playlist[index];
  player.play();
};

/* BOTÓN PLAY CON ARO PERFECTO */
const btnPlay = document.getElementById("btnPlay");
const bc = btnPlay.getContext("2d");
let playing = false;

function drawBtn(){
  const w = btnPlay.width;
  const h = btnPlay.height;
  const cx = w/2;
  const cy = h/2;
  const outerR = Math.min(w,h)/2 - 4;
  const innerR = outerR - 4;

bc.clearRect(0,0,w,h);

// aro externo
  bc.beginPath();
  bc.arc(cx,cy,outerR,0,2*Math.PI);
  bc.lineWidth = 2;
  bc.strokeStyle = "#f3cf7a";
  bc.stroke();

// círculo interno
  bc.beginPath();
  bc.arc(cx,cy,innerR,0,2*Math.PI);
  bc.fillStyle = "blue";
  bc.fill();

// icono play/pause
  bc.fillStyle = "black";
  if(!playing){
    const size = innerR*0.7;
    bc.beginPath();
    bc.moveTo(cx - size/3, cy - size/2);
    bc.lineTo(cx - size/3, cy + size/2);
    bc.lineTo(cx + size/2, cy);
    bc.fill();
  } else {
    const barW = innerR*0.25;
    const barH = innerR*1.2;
    bc.fillRect(cx - barW - 2, cy - barH/2, barW, barH);
    bc.fillRect(cx + 2, cy - barH/2, barW, barH);
  }
}
drawBtn();

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

/* ESPECTRO */
const sc = document.getElementById("spec").getContext("2d");
const buf = new Uint8Array(analyser.frequencyBinCount);

(function draw(){
  requestAnimationFrame(draw);
  analyser.getByteFrequencyData(buf);
  sc.clearRect(0,0,90,90);
  for(let i=0;i<16;i++){
    let h = buf[i]/255*90;
    sc.fillStyle="blue";
    sc.fillRect(i*5,90-h,3,h);
  }
})();
</script> <center> <br> 
   <li><a href="oyente2.html"><font color="white">Recarga de reproductor</a></li>
</body>
</html>