RD5 GOLD v14.0 - FINAL BOSS

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Reproductor Win95 - RD5 Network</title>
<style>
  /* --- Estilo Windows 95 --- */
  body {
    background: grey;
    font-family: "MS Sans Serif", Arial, sans-serif;
    margin: 0;
    padding: 10px;
    color: white;
  }
  h2 {
    font-size: 14pt;
    margin: 0 0 5px 0;
    padding: 4px;
    background: brown;
    color: white;
    border: 2px solid #c0c0c0;
  }
  #currentTrack {
    font-size: 14pt;
    color: lime;
    display: block;
    margin-bottom: 8px;
  }
  #controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 6px;
    background: #333;
    border: 2px solid white;
  }
  button {
    font-family: "MS Sans Serif", Arial, sans-serif;
    font-size: 15pt;
    padding: 2px 6px;
    background: #c0c0c0;
    border: 2px solid black;
    cursor: pointer;
  }
  button:active { border: 2px inset red; }
  input[type=file] { font-family: "MS Sans Serif", Arial, sans-serif; font-size: 10pt; }
  .slider-container { display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .slider {
    -webkit-appearance: none;
    width: 80px;
    height: 14px;
    background: black;
    border: 2px solid white;
    cursor: pointer;
  }
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: red;
    border: 2px solid red;
  }
  .eq-container { display: flex; gap: 6px; justify-content: center; margin-top: 5px; flex-wrap: wrap; }
  .eq-band { display: flex; flex-direction: column; align-items: center; }
  #progress { width: 100%; margin-top: 6px; -webkit-appearance: none; height: 16px; background: #333; border: 2px solid white; }
  #progress::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 20px; background: red; border: 2px solid red; }
  #playlist { list-style: none; padding: 4px; margin-top: 6px; cursor: default; max-height: 260px; overflow-y: auto; background: black; border: 2px solid white; }
  #playlist li { padding: 2px 4px; cursor: pointer; }
  #playlist li.active { background: green; color: white; }
  #time { font-family: "MS Sans Serif", Arial, sans-serif; font-size: 18pt; text-align: center; margin-top: 4px; color: white; }
  canvas.vis { background: black; border: 2px solid black; width: 300px; height: 50px; }
  #vuNeedle, #vuNeedleR { background: #c0c0c0; border: 2px solid black; border-radius: 50%; }
  .percent { font-size: 8pt; margin-top: 2px; }
</style>
</head>
<body>

<font size="1">
<h2 style="display: flex; align-items: baseline; flex-wrap: wrap;">
 Trisha-RB4-3CC - RD5 Network
  <span id="currentTrack" style="color: LIME; margin-left: 10px;"></span>
</h2><font size="3">

<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">
    <span class="percent" id="volumePercent">50%</span>
  </div>

<button id="clearPlaylist">Limpiar Lista</button>
</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 currentTrackEl = document.getElementById('currentTrack');

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

const canvasNeedleL = document.getElementById('vuNeedle');
const ctxNeedleL = canvasNeedleL.getContext('2d');
const canvasNeedleR = document.getElementById('vuNeedleR');
const ctxNeedleR = canvasNeedleR.getContext('2d');
let angleL = -Math.PI/2;
let angleR = -Math.PI/2;

// --- Carga de archivos sin borrar ---
fileInput.addEventListener('change', (e) => {
  playlist.push(...Array.from(e.target.files));
  if(currentIndex===-1) currentIndex=0;
  updatePlaylist();
  loadTrack(currentIndex);
});

// --- Limpiar lista ---
document.getElementById('clearPlaylist').onclick = () => {
  playlist = [];
  currentIndex = -1;
  audio.pause();
  audio.currentTime = 0;
  playlistEl.innerHTML = '';
  currentTrackEl.textContent = '';
  progressEl.value = 0;
};

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

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

// --- Audio Context & EQ ---
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 = analyserR.fftSize = 256;
  splitter.connect(analyserL,0); splitter.connect(analyserR,1);

const volumePercent=document.getElementById('volumePercent');
  volumeSlider.addEventListener('input',()=>{ 
    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)+'%';
  });

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

// --- Visuales ---
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;
    ctxEQ.fillStyle=`hsl(${i/data.length*360},100%,50%)`;
    ctxEQ.fillRect(i*barWidth, canvasEQ.height-barHeight, barWidth, barHeight);
  }
  requestAnimationFrame(drawEQ);
}

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="green";
  for(let i=0;i<data.length;i++){
    let x=(i/data.length)*canvasOsc.width;
    let y=(data[i]/255)*canvasOsc.height;
    i===0?ctxOsc.moveTo(x,y):ctxOsc.lineTo(x,y);
  }
  ctxOsc.stroke();
  requestAnimationFrame(drawOscilloscope);
}

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="gray";
  ctxVU.fillRect(0,canvasVU.height/3,canvasVU.width,canvasVU.height/3);
  let grad=ctxVU.createLinearGradient(0,0,width,0);
  grad.addColorStop(0,"yellow"); grad.addColorStop(1,"red");
  ctxVU.fillStyle=grad;
  ctxVU.fillRect(0,canvasVU.height/3,width,canvasVU.height/3);
  requestAnimationFrame(drawVUMeter);
}

// --- Agujas ---
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,25,Math.PI,0); ctx.strokeStyle="green"; ctx.lineWidth=3; ctx.stroke();
  ctx.save(); ctx.translate(cx,cy); ctx.rotate(angle);
  ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(30,0); ctx.strokeStyle="red"; ctx.lineWidth=4; ctx.stroke();
  ctx.restore(); ctx.beginPath(); ctx.arc(cx,cy,3,0,2*Math.PI); ctx.fillStyle="#555"; ctx.fill();
}

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

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

// --- Auto siguiente pista ---
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(); } });
</script>

</body>
CODIGO GBBY 5207418 H.E.
</html>