RD5 GOLD v14.0 - FINAL BOSS

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Trisha TINY-BJ2 - 8 Band EQ ARMOURED</title>
<style>
    body { background:#231815; color:white; font-family:Arial, sans-serif; margin:15px; overflow-x: hidden; }
    #contador { font-size: 20px; margin-top:10px; color:white; font-family: monospace; border-top: 1px solid #3a2c28; padding-top: 10px; }
    .linea { display:flex; align-items:flex-start; gap:15px; flex-wrap:wrap; }
    
    .cont-sliders { display: flex; gap: 8px; align-items: flex-end; background: #1a110f; padding: 10px; border-radius: 8px; border: 1px solid #3a2c28; box-shadow: inset 0 0 10px #000; }
    .control-vertical { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 42px; }
    
    .slider-v { -webkit-appearance: slider-vertical; width: 8px; height: 60px; background: #3a2c28; outline: none; cursor: pointer; }
    
    .val-pct { font-size: 9px; color: #e3a465; font-family: monospace; min-height: 11px; }
    label { font-size: 8px; text-transform: uppercase; color: #888; font-weight: bold; }
    
    canvas.vu { background:black; border:4px solid #888; border-radius:50%; box-shadow: 0 0 5px #000; }
    
    #lista { margin-top:10px; max-height:300px; overflow-y:auto; list-style:none; padding-left:0; user-select: none; border: 1px solid #3a2c28; background: #1a110f; border-radius: 4px; }
    #lista li { padding:8px 12px; cursor: move; border-bottom: 1px solid #333; font-size: 13px; color: #ccc; transition: background 0.1s; }
    #lista li:hover { background: #2a1f1c; }
    #lista li.active { background:#42322f; color:orange; font-weight: bold; border-left: 4px solid orange; }
    #lista li.dragging { opacity: 0.4; background: #e3a465; color: black; }

#prog { -webkit-appearance:none; appearance:none; width:100%; height:8px; background:#3a2c28; border-radius:5px; margin: 15px 0; cursor: pointer; }
    #prog::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; background:orange; border-radius:50%; border:2px solid black; cursor:pointer; }
    
    #btnLimpiar { padding: 5px; background: #e3a465; color: black; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; writing-mode: vertical-lr; text-transform: uppercase; height: 105px; font-size: 11px; }
</style>
</head>
<body>

<div class="cont-sliders">
        <div class="control-vertical"><label>VOL</label><input type="range" id="vol" class="slider-v" min="0" max="1" step="0.01" value="0.7"><span id="v-vol" class="val-pct">70%</span></div>
        <div class="control-vertical"><label>32Hz</label><input type="range" id="eq1" class="slider-v" min="-15" max="15" step="1" value="0"><span id="v-eq1" class="val-pct">0</span></div>
        <div class="control-vertical"><label>64Hz</label><input type="range" id="eq2" class="slider-v" min="-15" max="15" step="1" value="0"><span id="v-eq2" class="val-pct">0</span></div>
        <div class="control-vertical"><label>125Hz</label><input type="range" id="eq3" class="slider-v" min="-15" max="15" step="1" value="0"><span id="v-eq3" class="val-pct">0</span></div>
        <div class="control-vertical"><label>500Hz</label><input type="range" id="eq4" class="slider-v" min="-15" max="15" step="1" value="0"><span id="v-eq4" class="val-pct">0</span></div>
        <div class="control-vertical"><label>1kHz</label><input type="range" id="eq5" class="slider-v" min="-15" max="15" step="1" value="0"><span id="v-eq5" class="val-pct">0</span></div>
        <div class="control-vertical"><label>4kHz</label><input type="range" id="eq6" class="slider-v" min="-15" max="15" step="1" value="0"><span id="v-eq6" class="val-pct">0</span></div>
        <div class="control-vertical"><label>8kHz</label><input type="range" id="eq7" class="slider-v" min="-15" max="15" step="1" value="0"><span id="v-eq7" class="val-pct">0</span></div>
        <div class="control-vertical"><label>16kHz</label><input type="range" id="eq8" class="slider-v" min="-15" max="15" step="1" value="0"><span id="v-eq8" class="val-pct">0</span></div>
        <button id="btnLimpiar">Limpiar Lista</button>
    </div>
</div>

<input type="range" id="prog" min="0" max="100" step="0.1" value="0">
<div id="contador">00:00 / 00:00 � <span id="currentTrack" style="font-weight:bold; color:orange;">esperando motor...</span></div>
<ul id="lista"></ul>

let playlist = [];
let index = 0;
let sourceNode, gainNode, filters = [], splitter, anaL, anaR;

function upVal(id, val, isPct=false) { 
    const el = document.getElementById('v-'+id);
    if(el) el.textContent = isPct ? Math.round(val*100)+'%' : val; 
}

player.onplay = () => { if(audioCtx.state === "suspended") audioCtx.resume(); initAudio(); dibujarBtn(); };
player.onpause = () => { dibujarBtn(); };

function createFilter(freq, type = "peaking") {
    const f = audioCtx.createBiquadFilter();
    f.type = type; f.frequency.value = freq; f.Q.value = 1.4; f.gain.value = 0;
    return f;
}

function initAudio(){
    if(sourceNode) return;
    sourceNode = audioCtx.createMediaElementSource(player);
    gainNode = audioCtx.createGain();
    gainNode.gain.value = document.getElementById('vol').value;

filters = [
        createFilter(32, "lowshelf"), createFilter(64), createFilter(125),
        createFilter(500), createFilter(1000), createFilter(4000),
        createFilter(8000), createFilter(16000, "highshelf")
    ];

let lastNode = sourceNode;
    filters.forEach((f, i) => {
        const slider = document.getElementById('eq' + (i+1));
        if(slider) f.gain.value = slider.value;
        lastNode.connect(f); lastNode = f;
    });
    
    lastNode.connect(gainNode); gainNode.connect(audioCtx.destination);
    splitter = audioCtx.createChannelSplitter(2);
    gainNode.connect(splitter);
    anaL = audioCtx.createAnalyser(); anaR = audioCtx.createAnalyser(); 
    anaL.fftSize = 256; anaR.fftSize = 256;
    splitter.connect(anaL,0); splitter.connect(anaR,1);
}

archivos.onchange = e => {
    const nuevos = [...e.target.files].filter(f=>f.type.startsWith("audio/"));
    if(nuevos.length === 0) return;
    playlist = playlist.concat(nuevos);
    renderLista();
    if(!player.src && playlist.length) { index = 0; cargar(); }
};

lista.ondragover = e => { e.preventDefault(); e.dataTransfer.dropEffect = "move"; };
lista.ondrop = e => {
    e.preventDefault();
    const fromIdx = parseInt(e.dataTransfer.getData('text/plain'));
    const targetEl = e.target.closest('li');
    if(!targetEl) return;
    const allItems = [...lista.querySelectorAll('li')];
    const toIdx = allItems.indexOf(targetEl);
    
    const [movedItem] = playlist.splice(fromIdx, 1);
    playlist.splice(toIdx, 0, movedItem);
    
    const currentName = playlist[index]?.name;
    renderLista();
    if(currentName) index = playlist.findIndex(f => f.name === currentName);
    actualizarLista();
};

function actualizarLista(){
    [...lista.children].forEach((li, i) => {
        li.classList.remove("active");
        if(i === index) li.classList.add("active");
    });
}

function cargar(){
    if(!playlist[index]) return;
    if(player.src) URL.revokeObjectURL(player.src);
    player.src = URL.createObjectURL(playlist[index]);
    player.load(); actualizarLista();
}

vol.oninput = e => { upVal('vol', e.target.value, true); if(gainNode) gainNode.gain.value = e.target.value; };
[1,2,3,4,5,6,7,8].forEach(num => {
    const el = document.getElementById('eq'+num);
    if(el) el.oninput = e => {
        upVal('eq'+num, e.target.value);
        if(filters[num-1]) filters[num-1].gain.value = +e.target.value;
    };
});

player.onended = () => { if(index < playlist.length - 1) { index++; cargar(); player.play(); } };
player.ontimeupdate = () => {
    if(player.duration){
        prog.max = player.duration; prog.value = player.currentTime;
        let m1=Math.floor(player.currentTime/60), s1=Math.floor(player.currentTime%60).toString().padStart(2,0);
        let m2=Math.floor(player.duration/60), s2=Math.floor(player.duration%60).toString().padStart(2,0);
        contador.innerHTML = `${m1}:${s1} / ${m2}:${s2} � <span style="color:orange;">${playlist[index].name}</span>`;
    }
};
prog.oninput = () => player.currentTime = prog.value;
btnLimpiar.onclick = () => { playlist = []; index = 0; player.pause(); player.src = ""; lista.innerHTML = ""; contador.innerHTML = "00:00 / 00:00 � <span style='color:orange;'>Trisha TINY-BJ2</span>"; };

<h1 style="color:orange; font-size: 24px; margin-top:20px; font-weight: bold; text-shadow: 2px 2px 5px black;">Trisha TINY-BJ2</h1>

</body>
</html>