RD5 GOLD v14.0 - FINAL BOSS

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Reproductor Tiny</title>

/* contador + track */
#contador {
  font-size: 20px;
  margin-top:4px;
  color:white;
  font-family: monospace;
}

/* linea principal */
.linea {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

/* sliders */
.slider {
  width:90px;
  -webkit-appearance:none;
  appearance:none;
  height:8px;
  background:#3a2c28;
  border-radius:5px;
  outline:none;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:14px;
  height:14px;
  background:#e3a465;
  border-radius:50%;
  border:2px solid black;
  cursor:pointer;
}

/* barra de progreso */
#prog {
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:8px;
  background:#3a2c28;
  border-radius:5px;
  outline:none;
  margin-top:5px;
}
#prog::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:14px;
  height:14px;
  background:#e3a465;
  border-radius:50%;
  border:3px solid black;
  cursor:pointer;
}

/* VU */
canvas.vu {
  background:black;
  border:4px solid #999;
  border-radius:50%;
}

/* lista con tope + scroll */
#lista {
  margin-top:10px;
  max-height:370px;
  overflow-y:auto;
  list-style:none;
  padding-left:0;
}
#lista li {
  padding:3px 3px;
  cursor:pointer;
  border-radius:2px;
}
#lista li:hover { background:#2a201d; }
#lista li.active { background:#42322f; color:orange; }

/* bot?n limpiar */
#btnLimpiar {
  margin-left:10px;
  padding:6px 12px;
  background:#e3a465;
  color:black;
  border:none;
  border-radius:4px;
  cursor:pointer;
}
#btnLimpiar:hover { background:orange; }
</style>
</head>
<body>

<canvas id="btnPlay" class="vu" width="70" height="70" style="cursor:pointer;"></canvas>

<canvas id="vuL" class="vu" width="70" height="70"></canvas>
  <canvas id="vuR" class="vu" width="70" height="70"></canvas>

<canvas id="vuECG" class="vu" width="70" height="70"></canvas>
  <canvas id="vuSpectrum" class="vu" width="70" height="70"></canvas>

<div>
    <label>Vol</label><br>
    <input type="range" id="vol" class="slider" min="0" max="1" step="0.01" value="0.7">
  </div>
  <div>
    <label>Bajos</label><br>
    <input type="range" id="bass" class="slider" min="-15" max="15" step="1" value="0">
  </div>
  <div>
    <label>Medios</label><br>
    <input type="range" id="mid" class="slider" min="-15" max="15" step="1" value="0">
  </div>
  <div>
    <label>Agudos</label><br>
    <input type="range" id="treble" class="slider" min="-15" max="15" step="1" value="0">
  </div>

<button id="btnLimpiar">Limpiar Lista</button>
</div>

<div id="contador">00:00 / 00:00 * <span id="currentTrack" style="font-weight:bold; color:orange;">cargar archivos</span></div>

const player = document.createElement('audio'); // reproductor invisible
const archivos = document.getElementById('archivos');
const lista = document.getElementById('lista');
const prog = document.getElementById('prog');
const contador = document.getElementById('contador');
const btnLimpiar = document.getElementById('btnLimpiar');

let playlist = [];
let index = 0;

let sourceNode, gainNode, bassFilter, midFilter, trebleFilter, splitter, anaL, anaR;

/* habilitar audio al tocar play */
player.addEventListener("play", async ()=>{
  if(audioCtx.state === "suspended") await audioCtx.resume();
  initAudio();
});

/* nodos */
function initAudio(){
  if(sourceNode) return;

sourceNode = audioCtx.createMediaElementSource(player);

gainNode = audioCtx.createGain();

bassFilter = audioCtx.createBiquadFilter();
  bassFilter.type = "lowshelf";
  bassFilter.frequency.value = 200;

midFilter = audioCtx.createBiquadFilter();
  midFilter.type = "peaking";
  midFilter.frequency.value = 1000;
  midFilter.Q.value = 1;

trebleFilter = audioCtx.createBiquadFilter();
  trebleFilter.type = "highshelf";
  trebleFilter.frequency.value = 3000;

// Cadena EQ
  sourceNode.connect(bassFilter);
  bassFilter.connect(midFilter);
  midFilter.connect(trebleFilter);
  trebleFilter.connect(gainNode);

gainNode.connect(audioCtx.destination);

splitter = audioCtx.createChannelSplitter(2);
  gainNode.connect(splitter);

anaL = audioCtx.createAnalyser();
  anaR = audioCtx.createAnalyser();
  anaL.fftSize = 256;
  anaR.fftSize = 256;

splitter.connect(anaL,0);
  splitter.connect(anaR,1);
}

/* agregar archivos sin borrar existentes */
archivos.addEventListener("change", e=>{
  const nuevos = [...e.target.files].filter(f=>f.type.startsWith("audio/"));
  playlist = playlist.concat(nuevos);
  renderLista();
  if(player.src === "" && playlist.length) { index = 0; cargar(); }
});

/* render lista */
function renderLista(){
  lista.innerHTML = "";
  playlist.forEach((f,i)=>{
    const li=document.createElement("li");
    li.textContent = f.name;
    li.dataset.i = i;
    li.onclick = ()=>{ index=i; cargar(); player.play(); actualizarLista(); };
    lista.appendChild(li);
  });
  actualizarLista();
}

function actualizarLista(){
  [...lista.children].forEach(li=> li.classList.remove("active"));
  const act = lista.querySelector(`li[data-i="${index}"]`);
  if(act) act.classList.add("active");
}

/* cargar tema */
function cargar(){
  if(!playlist[index]) return;
  player.src = URL.createObjectURL(playlist[index]);
  player.load();
  actualizarLista();
}

/* EQ + volumen */
vol.oninput    = e => gainNode && (gainNode.gain.value = e.target.value);
bass.oninput   = e => bassFilter && (bassFilter.gain.value = +e.target.value);
mid.oninput    = e => midFilter && (midFilter.gain.value = +e.target.value);
treble.oninput = e => trebleFilter && (trebleFilter.gain.value = +e.target.value);

/* progreso + contador + track */
player.addEventListener("timeupdate", ()=>{
  if(player.duration){
    prog.max = player.duration;
    prog.value = player.currentTime;

let m1=Math.floor(player.currentTime/60);
    let s1=Math.floor(player.currentTime%60).toString().padStart(2,"0");
    let m2=Math.floor(player.duration/60);
    let s2=Math.floor(player.duration%60).toString().padStart(2,"0");

/* siguiente tema */
player.addEventListener("ended", ()=>{
  if(index < playlist.length-1){
    index++;
    cargar();
    player.play();
  }
});

/* espacio = play/pause */
document.addEventListener("keydown", e=>{
  if(e.code==="Space"){
    e.preventDefault();
    player.paused ? player.play() : player.pause();
  }
});

/* bot?n limpiar */
btnLimpiar.addEventListener("click", ()=>{
  playlist = [];
  index = 0;
  player.pause();
  player.src = "";
  lista.innerHTML = "";

contador.innerHTML = `00:00 / 00:00 ?   <span id="currentTrack" style="font-weight:bold; color:orange;"> <font size="2">Trisha TINY-BJ2 </span>`;
});

/* ===== VUMETROS ===== */
const ctxL = document.getElementById("vuL").getContext("2d");
const ctxR = document.getElementById("vuR").getContext("2d");

let aL = -Math.PI; // inicio izquierda
let aR = -Math.PI;

function aguja(ctx, ang){
  ctx.clearRect(0,0,70,70);

// Fondo semicircular
  ctx.beginPath();
  ctx.arc(35,35,28,-Math.PI,0,false); 
  ctx.strokeStyle="#231815";
  ctx.lineWidth=30;
  ctx.stroke();
  ctx.save();
    ctx.translate(35,35);
  ctx.rotate(ang);
  ctx.beginPath();
  ctx.moveTo(0,0);
  ctx.lineTo(32,0);
  ctx.strokeStyle="lime";
  ctx.lineWidth=3;
  ctx.stroke();
  ctx.restore();

// Centro
  ctx.beginPath();
  ctx.arc(35,35,3,0,2*Math.PI);
  ctx.fillStyle="grey";
  ctx.fill();
}

/* Mapear nivel de audio a ?ngulo (-PI a 0) */
function mapLevelToAngle(level){
  level = Math.min(1, Math.max(0, level));
  return -Math.PI + level * Math.PI;
}

/* Bot?n circular play/pause */
const btnC = document.getElementById("btnPlay");
let playing = false;
const ctxBtn = btnC.getContext("2d");
function dibujarBtn(){
  ctxBtn.clearRect(0,0,70,70);
  ctxBtn.beginPath();
  ctxBtn.arc(35,35,30,0,2*Math.PI);
  ctxBtn.fillStyle = playing ? "orange" : "#42322f";
  ctxBtn.fill();
  if(!playing){
    ctxBtn.beginPath();
    ctxBtn.moveTo(28,22);
    ctxBtn.lineTo(28,48);
    ctxBtn.lineTo(48,35);
    ctxBtn.closePath();
    ctxBtn.fillStyle = "black";
    ctxBtn.fill();
  } else {
    ctxBtn.fillStyle="black";
    ctxBtn.fillRect(28,22,6,26);
    ctxBtn.fillRect(40,22,6,26);
  }
}
dibujarBtn();
btnC.onclick = ()=>{
  if(!player.src) return;
  playing = !playing;
  playing ? player.play() : player.pause();
  dibujarBtn();
};

/* VU ECG */
const ctxECG = document.getElementById("vuECG").getContext("2d");
function loopECG(){
  if(anaL){
    let data = new Uint8Array(anaL.fftSize);
    anaL.getByteTimeDomainData(data);
    ctxECG.clearRect(0,0,70,70);
    ctxECG.beginPath();
    ctxECG.moveTo(0,35);
    for(let i=0;i<data.length;i++){
      let y = 35 + (data[i]-128)/128*30;
      let x = i/data.length*70;
      ctxECG.lineTo(x,y);
    }
    ctxECG.strokeStyle = "lime";
    ctxECG.lineWidth = 2;
    ctxECG.stroke();
  }
  requestAnimationFrame(loopECG);
}
loopECG();

/* VU Spectrum */
const ctxSpec = document.getElementById("vuSpectrum").getContext("2d");
function loopSpectrum(){
  if(anaR){
    let data = new Uint8Array(anaR.frequencyBinCount);
    anaR.getByteFrequencyData(data);
    ctxSpec.clearRect(0,0,70,70);
    let barWidth = 70/data.length;
    for(let i=0;i<data.length;i++){
      let h = data[i]/255*70;
      ctxSpec.fillStyle = `hsl(${i/data.length*360},100%,50%)`;
      ctxSpec.fillRect(i*barWidth,70-h,barWidth,h);
    }
  }
  requestAnimationFrame(loopSpectrum);
}

/* Loop principal VU original */
function loopVU(){
  if(anaL){
    let L=new Uint8Array(anaL.frequencyBinCount);
    let R=new Uint8Array(anaR.frequencyBinCount);
    anaL.getByteFrequencyData(L);
    anaR.getByteFrequencyData(R);
    let rmsL=-1.57 + L.reduce((a,b)=>a+b,0)/L.length/255*3.14;
    let rmsR=-1.57 + R.reduce((a,b)=>a+b,0)/R.length/255*3.14;
    aL += (rmsL - aL)*0.1;
    aR += (rmsR - aR)*0.1;
    aguja(ctxL,aL);
    aguja(ctxR,aR);
  }
  requestAnimationFrame(loopVU);
}
loopVU();
loopSpectrum();
/* ===== Navegaci?n con teclado: flechas + Enter + scroll autom?tico ===== */
document.addEventListener("keydown", e => {
  if(!playlist.length) return;

if(e.code === "ArrowDown") {
    e.preventDefault();
    index = (index + 1) % playlist.length;
    actualizarLista();
    scrollLista();
  }
  if(e.code === "ArrowUp") {
    e.preventDefault();
    index = (index - 1 + playlist.length) % playlist.length;
    actualizarLista();
    scrollLista();
  }
  if(e.code === "Enter") {
    e.preventDefault();
    cargar();
    player.play();
    dibujarBtn(); // actualizar bot?n play
  }
});

/* Mantener la pista seleccionada visible */
function scrollLista(){
  const li = lista.querySelector(`li[data-i="${index}"]`);
  if(li){
    const listaRect = lista.getBoundingClientRect();
    const liRect = li.getBoundingClientRect();
    if(liRect.top < listaRect.top){
      lista.scrollTop -= (listaRect.top - liRect.top);
    } else if(liRect.bottom > listaRect.bottom){
      lista.scrollTop += (liRect.bottom - listaRect.bottom);
    }
  }
}

</script>
<h1><font size="5"><font color="orange">Trisha TINY-BJ2</h1>
</body>
</html>