RD5 GOLD v14.0 - FINAL BOSS

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mini Trisha Player</title>
<style>
body {
  background:#000;
  color:#0f0;
  font-family:Arial, Helvetica, sans-serif;
  padding:10px;
}

#playerContainer{
  height:110px;
  border:1px solid #0f0;
  padding:8px;
  margin-bottom:10px;
}

button, input[type=range] {
  background:black;
  color:#0f0;
  border:1px solid #0f0;
  padding:5px 10px;
  margin:3px;
  cursor:pointer;
}

#progressWrap{
  margin-bottom:6px;
}

#progress{
  width:100%;
}

#time{
  text-align:center;
  font-size:20px;
  margin-bottom:3px;
}

#currentFile {
  font-size:14px;
  text-align:center;
  font-family:"Courier New", monospace;
  border:1px inset #060;
  padding:2px 5px;
  margin-top:2px;
}

ul#lista {
  cursor:pointer;
  max-height:300px;
  overflow-y:auto;
  border:1px solid #0f0;
  padding:8px;
  list-style:none;
  margin:0;
}

li {
  padding:4px;
  border-bottom:1px solid #033;
}

li:hover { background:#022; }
li.active { background:#060; }

#vumeters {
  display:flex;
  justify-content:center;
  gap:20px;
  margin-top:5px;
}

.controls {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:5px;
}

.eq {
  display:flex;
  align-items:center;
  gap:6px;
}

label { font-size:12px; }
</style>
</head>

<body>

<div id="playerContainer">
  <div>
    <font size="3">TRISHA MINI  
    <input type="file" id="fileInput" multiple accept="audio/*">
    <button onclick="playStop()">Play / Stop</button>
    <button onclick="clearList()">Limpiar lista</button>
  </div>

<id="vumeters">
    <canvas id="vuL" width="120" height="70"></canvas>
    <canvas id="vuR" width="120" height="70"></canvas>
  </div>

</div>
 
<div id="progressWrap">
  <input type="range" id="progress" min="0" value="0" step="0.1">
  <div id="time">00:00 / 00:00</div>
<font color="white">  <div id="currentFile"> <font face="arial">pista::  -</div>
</div><font color="lime">

let files = [];
let currentIndex = -1;

/* =========================
   AUDIO CONTEXT + FILTROS
========================= */

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioContext = new AudioContext();

const source = audioContext.createMediaElementSource(audio);
const analyser = audioContext.createAnalyser();

// EQ
const lowFilter = audioContext.createBiquadFilter();
lowFilter.type = "lowshelf";
lowFilter.frequency.value = 200;

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

const highFilter = audioContext.createBiquadFilter();
highFilter.type = "highshelf";
highFilter.frequency.value = 3000;

const gainNode = audioContext.createGain();

// Cadena
source
  .connect(lowFilter)
  .connect(midFilter)
  .connect(highFilter)
  .connect(analyser)
  .connect(gainNode)
  .connect(audioContext.destination);

analyser.fftSize = 256;
const dataArray = new Uint8Array(analyser.frequencyBinCount);

/* =========================
   CONTROLES
========================= */

document.getElementById("volume").addEventListener("input", e=>{
  gainNode.gain.value = e.target.value;
});

/* =========================
   CARGA DE ARCHIVOS
========================= */

input.addEventListener("change", () => {
  for (let file of input.files){
    files.push(file);

let li = document.createElement("li");
    li.textContent = file.name;

li.addEventListener("click", () => {
      playTrack(files.indexOf(file));
    });

lista.appendChild(li);
  }
});

/* =========================
   REPRODUCCI�N
========================= */

function playTrack(index){
  if(!files[index]) return;

currentIndex = index;

const url = URL.createObjectURL(files[index]);
  audio.src = url;
  audio.play();

document.querySelectorAll("li").forEach(li => li.classList.remove("active"));
  lista.children[index].classList.add("active");

currentFile.textContent = "CURRENT FILE: " + files[index].name;
}

/* =========================
   PASAR A SIGUIENTE (LOOP PLAYLIST)
========================= */

audio.addEventListener("ended", () => {
  if (files.length === 0) return;

currentIndex++;

if (currentIndex >= files.length){
    currentIndex = 0;
  }

playTrack(currentIndex);
});

/* =========================
   PROGRESO + TIEMPO
========================= */

audio.addEventListener("loadedmetadata", () => {
  progress.max = Math.floor(audio.duration);
});

audio.addEventListener("timeupdate", () => {
  progress.value = audio.currentTime;

const current = formatTime(audio.currentTime);
  const total = formatTime(audio.duration);

timeDisplay.textContent = `${current} / ${total}`;
});

progress.addEventListener("input", () => {
  audio.currentTime = progress.value;
});

function formatTime(sec){
  if(!sec) return "00:00";
  const m = Math.floor(sec / 60);
  const s = Math.floor(sec % 60);
  return `${m}:${s.toString().padStart(2,"0")}`;
}

/* =========================
   LIMPIAR LISTA
========================= */

function clearList(){
  files = [];
  lista.innerHTML = "";
  audio.pause();
  audio.src = "";
  currentIndex = -1;
  progress.value = 0;
  timeDisplay.textContent = "00:00 / 00:00";
  currentFile.textContent = "CURRENT FILE: -";
}

/* =========================
   VUMETROS ANALOGICOS
========================= */

const canvasL = document.getElementById('vuL');
const canvasR = document.getElementById('vuR');
const ctxL = canvasL.getContext('2d');
const ctxR = canvasR.getContext('2d');

function drawAnalogVU(ctx,value){
  const w = ctx.canvas.width;
  const h = ctx.canvas.height;
  const cx = w/2;
  const cy = h;

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

ctx.fillStyle = "#000";
  ctx.fillRect(0,0,w,h);

ctx.beginPath();
  ctx.strokeStyle = "#0f0";
  ctx.lineWidth = 3;
  ctx.arc(cx, cy, 45, Math.PI, 2*Math.PI);
  ctx.stroke();

const angle = Math.PI + value * Math.PI;
  const len = 45;

const x = cx + Math.cos(angle) * len;
  const y = cy + Math.sin(angle) * len;

ctx.beginPath();
  ctx.strokeStyle = "red";
  ctx.lineWidth = 4;
  ctx.moveTo(cx,cy);
  ctx.lineTo(x,y);
  ctx.stroke();

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

function animateVU(){
  analyser.getByteFrequencyData(dataArray);

let avg = dataArray.reduce((a,b)=>a+b) / dataArray.length / 255;

drawAnalogVU(ctxL, avg);
  drawAnalogVU(ctxR, avg * 0.9);

requestAnimationFrame(animateVU);
}
animateVU();

/* Desbloquear AudioContext */
document.body.addEventListener("click", ()=>{
  if(audioContext.state === "suspended"){
    audioContext.resume();
  }
},{once:true});
// PLAY / PAUSE con BARRA ESPACIADORA
document.addEventListener("keydown", function(event){
  if(event.code === "Space"){
    event.preventDefault(); // evita scroll
    if(audio.paused){
      if(currentIndex === -1 && files.length > 0){
        playTrack(0); // si no hay pista activa, reproducir la primera
      } else {
        audio.play();
      }
    } else {
      audio.pause();
    }
  }
});

</script>

</body>
</html>