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: black; color: #eee; font-family: Arial, sans-serif; padding: 10px; }
  h2 { margin-bottom: 5px; }
  #currentTrack { color: lime; 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: 5px 10px; background: black; border: 2px solid orange; color: white; 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: 95px; height: 10px; background: #222; cursor: pointer; }
  .slider::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 16px; background: orange; 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: #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; cursor: default; max-height: 252px; overflow-y: auto; background: black; width: 100%; }
  #playlist li { padding: 2px 5px; cursor: pointer; }
  #playlist li.active { color: orange; }

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

.visuals { display: flex; gap: 10px; justify-content: center; margin-top: 15px; flex-wrap: wrap; }
  canvas.vis { background: black; border: 2px solid #333; width: 400px; height: 40px; }

/* VU analógico */
  #vuNeedle { background: #000; border: 2px solid orange; border-radius: 50%; margin-right: 10px; }

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

<body><font size="1">
<h2 style="display: flex; align-items: baseline; flex-wrap: wrap;">
  🔊🎵  Trisha-RB4-3C - RD5 Network
  <span id="currentTrack" style="color: orange; 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>

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

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

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(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(analyser);
  analyser.connect(audioCtx.destination);

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

// EQ sliders individuales
  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)+'%';
    });
    // Inicializar porcentaje al cargar
    percentSpan.textContent = Math.round((parseFloat(slider.value)+20)/40*100)+'%';
  });

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

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

function drawOscilloscope() {
  ctxOsc.clearRect(0, 0, canvasOsc.width, canvasOsc.height);
  let data = new Uint8Array(analyser.fftSize);
  analyser.getByteTimeDomainData(data);
  ctxOsc.beginPath();
  ctxOsc.lineWidth = 2.2;
  ctxOsc.strokeStyle = "rgba(0,255,120,0.9)";
  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);
}

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

let grad = ctxVU.createLinearGradient(0, 0, width, 0);
  grad.addColorStop(0, "orange");
  grad.addColorStop(1, "red");
  ctxVU.fillStyle = grad;
  ctxVU.fillRect(0, canvasVU.height / 3, width, canvasVU.height / 3);

requestAnimationFrame(drawVUMeter);
}

const canvasNeedle = document.getElementById('vuNeedle');
const ctxNeedle = canvasNeedle.getContext('2d');
const cx = canvasNeedle.width / 2;
const cy = canvasNeedle.height / 2;
let angle = -Math.PI / 2;

function drawNeedle() {
  if (!analyser) { requestAnimationFrame(drawNeedle); return; }

const data = new Uint8Array(analyser.frequencyBinCount);
  analyser.getByteFrequencyData(data);
  const avg = data.reduce((a, b) => a + b, 0) / data.length;
  const rms = avg / 255;
  const target = (-Math.PI / 2) + rms * Math.PI;

angle += (target - angle) * 0.1;

ctxNeedle.clearRect(0, 0, canvasNeedle.width, canvasNeedle.height);
  ctxNeedle.beginPath();
  ctxNeedle.arc(cx, cy, 30, Math.PI, 0);
  ctxNeedle.strokeStyle = '#0f0';
  ctxNeedle.lineWidth = 2;
  ctxNeedle.stroke();

ctxNeedle.save();
  ctxNeedle.translate(cx, cy);
  ctxNeedle.rotate(angle);
  ctxNeedle.beginPath();
  ctxNeedle.moveTo(0, 0);
  ctxNeedle.lineTo(35, 0);
  ctxNeedle.strokeStyle = '#f33';
  ctxNeedle.lineWidth = 5;
  ctxNeedle.stroke();
  ctxNeedle.restore();

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

requestAnimationFrame(drawNeedle);
}

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();
});
</script>
<center>
<a href="https://dorix.com.co/rd5/index.html" ><font color="orange">█ INGRESAR A RD5 Network </a> <MARQUEE width="70%" height="16px"> <FONT COLOR="YELLOW"><FONT SIZE="4">Reproductor Trisha modelo RB4-3C, CON ECUALIZADOR DE 5 BANDAS de RD5 Network 2025 ----PARA CARGAR TUS AUDIOS Y ESCUCHARLOS HACE CLICK 
DONDE DICE ELEGIR ARCHIVOS-----PUBLICA TU AVISO EN LA PAGINA dorix.com.co/rd5 y tambien en cada uno de estos reproductores que estan saliendo PARA QUE LOS DISFRUTES
------------- REIKI A DISTANCIA Y CODIGOS SAGRADOS, POR JULIO MIRANDA, REIKISTA, Y SONOTERAPEUTA, +54 11 2302 2158 MANDA WHATSAPP Y CONSULTA!!--------</MARQUEE>█
</body>
</html>