RD5 GOLD v14.0 - FINAL BOSS

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Reproductor Trisha - Estilo Win95</title>
<style>
  body { 
    background: #c0c0c0; 
    font-family: "Tahoma", sans-serif; 
    padding: 20px; 
    color: black;
  }

.window {
    background-color: #e0e0e0;
    border: 2px solid #000080;
    padding: 10px;
    width: 1200px;
  }

h2 {
    font-size: 16px;
    background-color: #000080;
    color: white;
    padding: 3px 5px;
    margin: 0 -10px 10px -10px;
  }

#currentFile {
    margin-bottom: 10px; 
    font-size: 14px; 
    color: #000080;
  }

#controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }

button {
    padding: 15px 10px;
    background: #e0e0e0;
    border: 2px solid #000080;
    color: black;
    cursor: pointer;
    font-family: "Tahoma";
  }
  button:hover { background: #000080; color: white; }

input[type=file] { cursor: pointer; }

.slider-container, .eq-container { display: flex; gap: 10px; margin-top: 5px; }
  .slider { -webkit-appearance: none; width: 95px; height: 10px; background: #c0c0c0; cursor: pointer; }
  .slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; background: #000080; border-radius: 50%; border: 1px solid #000; }

#playlist { list-style: none; padding: 5px; margin-top: 10px; cursor: default; max-height: 260px; overflow-y: auto; background: #fff; border: 2px inset #808080; width: 100%; }
  #playlist li { padding: 2px 5px; cursor: pointer; }
  #playlist li.active { background: #000080; color: white; }

#progress { width: 100%; margin-top: 10px; -webkit-appearance: none; background: #c0c0c0; height: 16px; cursor: pointer; border: 2px inset #808080; }
  #progress::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; background: #000080; border-radius: 50%; border: 1px solid #000; }

canvas { background-color: #000; border: 2px inset #808080; width: 80px; height: 80px; }

.percent { font-size: 0.8em; color: black; text-align: center; }
</style>
</head>
<body>

<div class="window">
  <h2 style="display: flex; align-items: baseline; flex-wrap: wrap;">
    Trisha-RB4-3CX - RD5 Network
  </h2>
  <div id="currentFile">Elige archivos con el boton de abajo</div>
  
  <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>
    
    <canvas id="vuNeedle" width="80" height="80"></canvas>
    <canvas id="vuNeedleR" width="80" height="80"></canvas>

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

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 currentFileEl = document.getElementById('currentFile');

const canvasNeedleL = document.getElementById('vuNeedle');
const ctxNeedleL = canvasNeedleL.getContext('2d');
const canvasNeedleR = document.getElementById('vuNeedleR');
const ctxNeedleR = canvasNeedleR.getContext('2d');

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

function highlightCurrent() {
  Array.from(playlistEl.children).forEach((li,i)=>li.classList.toggle('active', i===currentIndex));
}

function setupAudioContext(){
  if(audioCtx) return;
  audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  source = audioCtx.createMediaElementSource(audio);
  gainNode = audioCtx.createGain();

analyser = audioCtx.createAnalyser();
  analyser.fftSize = 256;

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

source.connect(eqFilters[0]);
  for(let i=0;i<eqFilters.length-1;i++) eqFilters[i].connect(eqFilters[i+1]);
  eqFilters[eqFilters.length-1].connect(gainNode);

gainNode.connect(audioCtx.destination);
  gainNode.connect(analyser);

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

analyserL = audioCtx.createAnalyser();
  analyserR = audioCtx.createAnalyser();
  analyserL.fftSize = 256;
  analyserR.fftSize = 256;

splitter.connect(analyserL, 0);
  splitter.connect(analyserR, 1);

// volumen
  const volumePercent = document.getElementById('volumePercent');
  volumeSlider.addEventListener('input', ()=>{
    if(gainNode) gainNode.gain.value = parseFloat(volumeSlider.value);
    volumePercent.textContent = Math.round(volumeSlider.value*100)+'%';
  });

const eqIDs = ['eq60','eq250','eq1000','eq4000','eq16000'];
  eqIDs.forEach((id,i)=>{
    const slider = document.getElementById(id);
    const percentSpan = document.getElementById(id+'Percent');
    slider.addEventListener('input', ()=>{
      eqFilters[i].gain.value = parseFloat(slider.value);
      percentSpan.textContent = Math.round((parseFloat(slider.value)+20)/40*100)+'%';
    });
    percentSpan.textContent = Math.round((parseFloat(slider.value)+20)/40*100)+'%';
  });

drawNeedle();
}

document.getElementById('play').onclick = ()=>audio.play();
document.getElementById('pause').onclick = ()=>audio.pause();
document.getElementById('stop').onclick = ()=>{audio.pause(); audio.currentTime=0;};

let angleL = -Math.PI/2, angleR = -Math.PI/2;
function drawNeedle(){
  if(!analyserL || !analyserR){ requestAnimationFrame(drawNeedle); return; }

const dataL = new Uint8Array(analyserL.frequencyBinCount);
  analyserL.getByteFrequencyData(dataL);
  const rmsL = dataL.reduce((a,b)=>a+b,0)/dataL.length/255;

const dataR = new Uint8Array(analyserR.frequencyBinCount);
  analyserR.getByteFrequencyData(dataR);
  const rmsR = dataR.reduce((a,b)=>a+b,0)/dataR.length/255;

const targetL = -Math.PI/2 + rmsL*Math.PI;
  const targetR = -Math.PI/2 + rmsR*Math.PI;

angleL += (targetL-angleL)*0.12;
  angleR += (targetR-angleR)*0.12;

drawSingleNeedle(ctxNeedleL, canvasNeedleL, angleL);
  drawSingleNeedle(ctxNeedleR, canvasNeedleR, angleR);

requestAnimationFrame(drawNeedle);
}

function drawSingleNeedle(ctx, canvas, angle){
  let cx=canvas.width/2, cy=canvas.height/2;
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.beginPath();
  ctx.arc(cx,cy,40,Math.PI,0);
  ctx.strokeStyle='green';
  ctx.lineWidth=4;
  ctx.stroke();

ctx.save();
  ctx.translate(cx,cy);
  ctx.rotate(angle);
  ctx.beginPath();
  ctx.moveTo(0,0);
  ctx.lineTo(38,0);
  ctx.strokeStyle='#f33';
  ctx.lineWidth=6;
  ctx.stroke();
  ctx.restore();

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

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')}`;
}

audio.addEventListener('ended', ()=>{
  if(currentIndex<playlist.length-1) currentIndex++; else currentIndex=0;
  loadTrack(currentIndex);
  audio.play();
});

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

document.getElementById('play').onclick = () => audio.play();
document.getElementById('pause').onclick = () => audio.pause();
document.getElementById('stop').onclick = () => { audio.pause(); audio.currentTime=0; };

</script>
</body>
</html>