RD5 GOLD v14.0 - FINAL BOSS

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Trisha - Reproductor Graves y Agudos</title>
<style>
body { background:BLACK; color:WHITE; font-family:Arial,sans-serif; padding:10px; }
h2 { margin-bottom:5px; }
#currentTrack { color:red; font-size:1.1em; display:block; margin-bottom:10px; }
#controls { margin:10px 0; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
button { padding:5px 10px; background:RED; border:1px solid #555; color:BLACK; cursor:pointer; }
button:hover { background:LIME; }
input[type=file] { cursor:pointer; margin-bottom:5px; }
.slider-container { display:flex; flex-direction:column; align-items:center; gap:3px; }
.slider { -webkit-appearance:none; width:100px; height:10px; background:#222; cursor:pointer; }
.slider::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; background:lime; border-radius:50%; border:none; }

#progress { width:100%; margin-top:10px; -webkit-appearance:none; background:#222; height:20px; cursor:pointer; }
#progress::-webkit-slider-thumb { -webkit-appearance:none; width:15px; height:15px; background:lime; border-radius:50%; border:none; }

#playlist { list-style:none; padding:5px; margin-top:15px; max-height:300px; overflow-y:auto; background:BLACK; width:100%; }
#playlist li { padding:2px 5px; cursor:pointer; }
#playlist li.active { color:LIME; }
#time { text-align:right; font-size:14px; margin-top:5px; color:#0f0; font-family:monospace; }

canvas { background:black; border:1px solid #333; width:300px; height:40px; margin-top:10px; }
.visuals { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
</style>
</head>
<body>

<h2 style="display: flex; align-items: baseline; flex-wrap: wrap;">
  <span><body><font size="3">🔊🎵🎶 Trisha - Reproductor de Audio - RD5 Network</span>
  <span id="currentTrack" style="color: LIME; margin-left: 10px;"></span>
</h2>

<div id="controls">
<input type="file" id="audioFile" accept="audio/*" multiple>
<button id="play">Play</button>
<button id="pause">Pause</button>
<button id="stop">Stop</button>

<div class="slider-container">
<label>Volumen</label>
<input type="range" min="0" max="1" step="0.01" value="0.5" class="slider" id="volumeSlider">
</div>

<div class="slider-container">
<label>Graves (60Hz)</label>
<input type="range" min="-20" max="20" value="0" class="slider" id="eq60">
</div>

<div class="slider-container">
<label>Agudos (16kHz)</label>
<input type="range" min="-20" max="20" value="0" class="slider" id="eq16000">
</div>
</div>

// Elementos
const fileInput = document.getElementById('audioFile');
const playlistEl = document.getElementById('playlist');
const progressEl = document.getElementById('progress');
const volumeSlider = document.getElementById('volumeSlider');
const timeDisplay = document.getElementById('time');
const currentTrackEl = document.getElementById('currentTrack');
const eq60 = document.getElementById('eq60');
const eq16k = document.getElementById('eq16000');

// Canvas
const canvasEQ = document.getElementById('eqCanvas');
const ctxEQ = canvasEQ.getContext('2d');
const canvasOsc = document.getElementById('oscCanvas');
const ctxOsc = canvasOsc.getContext('2d');
const canvasVU = document.getElementById('vumCanvas');
const ctxVU = canvasVU.getContext('2d');

// ===== LISTA =====
fileInput.addEventListener('change', e=>{
  playlist = Array.from(e.target.files);
  currentIndex = 0;
  updatePlaylist();
  loadTrack(currentIndex);
});

function loadTrack(index){
  const file = playlist[index];
  if(!file) return;
  audio.src = URL.createObjectURL(file);
  audio.load();
  setupAudioContext();
  highlightCurrent();
  currentTrackEl.textContent=file.name;
}

// ===== AUDIO CONTEXT =====
function setupAudioContext(){
  if(audioCtx) return;
  audioCtx = new (window.AudioContext||window.webkitAudioContext)();
  analyser = audioCtx.createAnalyser();
  analyser.fftSize=256;
  gainNode = audioCtx.createGain();

eqFilters = [];
  let freqs = [60,16000];
  eqFilters = freqs.map(f=>{
    let filter = audioCtx.createBiquadFilter();
    filter.type='peaking';
    filter.frequency.value = f;
    filter.Q.value = 1;
    filter.gain.value = 0;
    return filter;
  });

let src = audioCtx.createMediaElementSource(audio);
  src.connect(eqFilters[0]);
  eqFilters[0].connect(eqFilters[1]);
  eqFilters[1].connect(gainNode);
  gainNode.connect(analyser);
  analyser.connect(audioCtx.destination);

eq60.addEventListener('input', ()=>{eqFilters[0].gain.value=parseFloat(eq60.value);});
  eq16k.addEventListener('input', ()=>{eqFilters[1].gain.value=parseFloat(eq16k.value);});

drawEQ();
  drawOscilloscope();
  drawVUMeter();
}

// ===== CONTROL TECLA ESPACIO =====
document.addEventListener('keydown', e => {
    if(e.code === 'Space') {
        e.preventDefault();
        audio.paused ? audio.play() : audio.pause();
    }
});

// ===== CONTROLES =====
document.getElementById('play').onclick=()=>audio.play();
document.getElementById('pause').onclick=()=>audio.pause();
document.getElementById('stop').onclick=()=>{audio.pause(); audio.currentTime=0;}
volumeSlider.addEventListener('input', ()=>{ if(gainNode) gainNode.gain.value=parseFloat(volumeSlider.value); });

// ===== DIBUJO EQ =====
function drawEQ(){
  ctxEQ.clearRect(0,0,canvasEQ.width,canvasEQ.height);
  let data = new Uint8Array(analyser.frequencyBinCount);
  analyser.getByteFrequencyData(data);
  let barWidth = canvasEQ.width/data.length;
  for(let i=0;i<data.length;i++){
    let barHeight = (data[i]/255)*canvasEQ.height;
    let hue = i/data.length*360;
    ctxEQ.fillStyle=`hsl(${hue},100%,50%)`;
    ctxEQ.fillRect(i*barWidth,canvasEQ.height-barHeight,barWidth,barHeight);
  }
  requestAnimationFrame(drawEQ);
}

// ===== OSCILOSCOPIO =====
function drawOscilloscope(){
  ctxOsc.clearRect(0,0,canvasOsc.width,canvasOsc.height);
  let data = new Uint8Array(analyser.fftSize);
  analyser.getByteTimeDomainData(data);
  ctxOsc.beginPath();
  ctxOsc.lineWidth=2;
  ctxOsc.strokeStyle="lime";
  for(let i=0;i<data.length;i++){
    let x = (i/data.length)*canvasOsc.width;
    let y = (data[i]/255)*canvasOsc.height;
    if(i===0) ctxOsc.moveTo(x,y);
    else ctxOsc.lineTo(x,y);
  }
  ctxOsc.stroke();
  requestAnimationFrame(drawOscilloscope);
}

// ===== VUMETRO =====
function drawVUMeter(){
  ctxVU.clearRect(0,0,canvasVU.width,canvasVU.height);
  let data = new Uint8Array(analyser.frequencyBinCount);
  analyser.getByteFrequencyData(data);
  let avg = data.reduce((a,b)=>a+b,0)/data.length;
  let width = (avg/255)*canvasVU.width;
  ctxVU.fillStyle="rgba(80,80,80,0.3)";
  ctxVU.fillRect(0,canvasVU.height/3,canvasVU.width,canvasVU.height/3);
  ctxVU.fillStyle="orange";
  ctxVU.fillRect(0,canvasVU.height/3,width,canvasVU.height/3);
  requestAnimationFrame(drawVUMeter);
}

// ===== PROGRESO =====
audio.addEventListener('timeupdate', ()=>{
  if(audio.duration){
    progressEl.value = (audio.currentTime/audio.duration)*100;
    timeDisplay.textContent = formatTime(audio.currentTime)+' / '+formatTime(audio.duration);
  }
});
progressEl.addEventListener('input', ()=>{ if(audio.duration) audio.currentTime=(progressEl.value/100)*audio.duration; });
function formatTime(sec){ const m=Math.floor(sec/60), s=Math.floor(sec%60); return `${m.toString().padStart(2,'0')}:${s.toString().padStart(2,'0')}`; }

function highlightCurrent(){ Array.from(playlistEl.children).forEach((li,i)=>li.classList.toggle('active',i===currentIndex)); }
audio.addEventListener('ended', ()=>{ if(currentIndex<playlist.length-1) currentIndex++; else currentIndex=0; loadTrack(currentIndex); audio.play(); });
</script>
</body>
</html>