RD5 GOLD v14.0 - FINAL BOSS

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Reproductor Completo - RD5 Network</title>
<style>
body { background:#D9D6CA; color: black; font-family: Arial, sans-serif; padding: 10px; }
h2 { margin-bottom: 5px; }
#currentTrack { color: grey; font-family: Arial; 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: 15px 10px; background: #D9D6CA; border: 2px solid black; color: black; cursor: pointer; }
button:hover { background: WHITE; }
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: 95px; height: 10px; background: grey; cursor: pointer; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 16px; background: black; border-radius: 50%; border: none; }
.eq-container { display: flex; gap: 15px; justify-content: center; margin-top: 5px; flex-wrap: wrap; }
.eq-band { display: flex; flex-direction: column; align-items: center; }
#progress { width: 100%; margin-top: 10px; -webkit-appearance: none; background: GREY; height: 20px; cursor: pointer; }
#progress::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; background: BLACK; border-radius: 50%; border: none; }

#playlist { list-style: none; padding: 5px; margin-top: 15px; cursor: default; max-height: 252px; overflow-y: auto; background: #D9D6CA; width: 100%; }
#playlist li { padding: 2px 5px; cursor: pointer; }
#playlist li.active { color: BROWN; }

#time { text-align: center; font-size: 18px; margin-top: 5px; color: BLACK; font-family: monospace; }

.visuals { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
canvas.vis { background: black; border: 2px solid #333; width: 200px; height: 50px; }

#vuNeedle, #vuNeedleR { background: #D9D6CA; border: 2px solid BLACK; border-radius: 50%; margin-right: 10px; }

.percent { color: BLACK; font-size: 0.9em; margin-top: 2px; }
</style>
</head>

<body><font size="1">
<h2 style="display: flex; align-items: baseline; flex-wrap: wrap;">
  🔊🎵  Trisha-3CC-BASIC - RD5 Network
  <span id="currentTrack" style="color: GREY; 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>
  <button id="clearPlaylist">Limpiar Lista</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>

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 canvasOsc = document.getElementById('oscCanvas');
const canvasVU = document.getElementById('vumCanvas');
const canvasNeedleL = document.getElementById('vuNeedle');
const canvasNeedleR = document.getElementById('vuNeedleR');

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

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

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(f=>{
    let filt=audioCtx.createBiquadFilter();
    filt.type='peaking'; filt.frequency.value=f; filt.Q.value=1; filt.gain.value=0; return filt;
  });

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

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 drawOscilloscope(){
  const ctx=canvasOsc.getContext('2d');
  ctx.clearRect(0,0,canvasOsc.width,canvasOsc.height);
  let data=new Uint8Array(analyser.fftSize);
  analyser.getByteTimeDomainData(data);
  ctx.beginPath();
  ctx.lineWidth=2; ctx.strokeStyle="WHITE";
  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) ctx.moveTo(x,y); else ctx.lineTo(x,y);
  }
  ctx.stroke();
  requestAnimationFrame(drawOscilloscope);
}

function drawVUMeter(){
  const ctx=canvasVU.getContext('2d');
  ctx.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;
  ctx.fillStyle="rgba(80,80,80,0.3)";
  ctx.fillRect(0,canvasVU.height/3,canvasVU.width,canvasVU.height/3);
  let grad=ctx.createLinearGradient(0,0,width,0);
  grad.addColorStop(0,"orange"); grad.addColorStop(1,"red");
  ctx.fillStyle=grad;
  ctx.fillRect(0,canvasVU.height/3,width,canvasVU.height/3);
  requestAnimationFrame(drawVUMeter);
}

// Agujas estéreo

const ctxNeedleL = canvasNeedleL.getContext('2d');
const ctxNeedleR = canvasNeedleR.getContext('2d');
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,30,Math.PI,0);
  ctx.strokeStyle='GREY'; ctx.lineWidth=2; ctx.stroke();
  ctx.save(); ctx.translate(cx,cy); ctx.rotate(angle);
  ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(38,0);
  ctx.strokeStyle='BLACK'; ctx.lineWidth=4; ctx.stroke();
  ctx.restore();
  ctx.beginPath(); ctx.arc(cx,cy,3,0,2*Math.PI); ctx.fillStyle='GREY'; ctx.fill();
}

// Controles básicos

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

// Progreso y tiempo

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>