RD5 GOLD v14.0 - FINAL BOSS

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Editor Pro - Dual Audio Fix</title>
    <style>
        body { background: #0c0c0c; color: #eee; font-family: sans-serif; margin: 0; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
        header { background: #1a1a1a; padding: 10px 20px; border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center; }
        .main { display: flex; flex: 1; overflow: hidden; }
        .assets { width: 240px; background: #151515; border-right: 1px solid #333; padding: 15px; overflow-y: auto; }
        .preview-zone { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #000; position: relative; }
        #canvas-preview { max-width: 90%; max-height: 70%; background: #111; border: 2px solid #333; }
        
        #progress-wrapper { width: 90%; margin-top: 15px; display: none; }
        #progress-container { background: #222; height: 12px; border-radius: 6px; overflow: hidden; border: 1px solid #333; }
        #progress-bar { width: 0%; height: 100%; background: #0f8; box-shadow: 0 0 10px #0f8; }
        #progress-text { color: #0f8; font-size: 12px; font-weight: bold; margin-bottom: 5px; text-align: right; font-family: monospace; }

.timeline-container { height: 280px; background: #1a1a1a; border-top: 2px solid #333; padding: 10px; overflow-y: auto; }
        .track { display: flex; align-items: center; background: rgba(255,255,255,0.02); min-height: 75px; margin-bottom: 5px; border-radius: 4px; position: relative; padding-left: 110px; border: 1px solid #222; }
        .track::before { content: attr(data-label); position: absolute; left: 10px; font-size: 10px; color: #0f8; font-weight: bold; width: 80px; }
        
        .item-clip { height: 60px; background: #2c3e50; border: 1px solid #0f8; border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 130px; margin-right: 5px; position: relative; padding: 5px; }
        .item-audio { height: 50px; background: #1a3a3a; border: 1px solid #3498db; border-radius: 4px; display: flex; align-items: center; padding: 5px; min-width: 160px; position: relative; }
        .dur-input { width: 55px; background: #000; color: #0f8; border: 1px solid #444; font-size: 11px; text-align: center; margin-top: 5px; border-radius: 3px; }
        .btn { padding: 8px 15px; cursor: pointer; border: none; font-weight: bold; border-radius: 4px; margin-bottom: 5px; }
        .btn-play { background: #0f8; color: #000; margin-top: 10px; width: 220px; }
        .btn-play.active { background: #ffcc00; }
        .btn-export { background: #007bff; color: white; }
        .remove { position: absolute; top: 2px; right: 2px; background: #ff4444; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 10px; width: 18px; height: 18px; }
    </style>
</head>
<body>

<header>
    <h2>VIDEO ENGINE v5 - DUAL AUDIO</h2>
    <button id="exportBtn" class="btn btn-export" onclick="procesar(true)">?? EXPORTAR MP4</button>
</header>

<div class="main">
    <div class="assets">
        <button class="btn" style="background:#444; color:white; width:100%" onclick="document.getElementById('load').click()">+ CLIP (V/I)</button>
        <input type="file" id="load" multiple accept="video/*,image/*" style="display:none" onchange="cargarArchivos(this.files)">
        
        <p style="font-size: 11px; color: #888; margin-top: 20px;">PISTAS DE AUDIO</p>
        <button class="btn" style="background:#222; color:#3498db; width:100%; border:1px solid #3498db;" onclick="document.getElementById('audio1').click()">?? AUDIO 1</button>
        <button class="btn" style="background:#222; color:#3498db; width:100%; border:1px solid #3498db;" onclick="document.getElementById('audio2').click()">?? AUDIO 2</button>
        
        <input type="file" id="audio1" accept="audio/*" style="display:none" onchange="cargarAudio(1, this.files[0])">
        <input type="file" id="audio2" accept="audio/*" style="display:none" onchange="cargarAudio(2, this.files[0])">
    </div>
    
    <div class="preview-zone">
        <canvas id="canvas-preview"></canvas>
        <div id="progress-wrapper">
            <div id="progress-text">IDLE</div>
            <div id="progress-container"><div id="progress-bar"></div></div>
        </div>
        <button id="playBtn" class="btn btn-play" onclick="togglePlay()">? PLAY PREVIEW</button>
    </div>
</div>

const canvas = document.getElementById('canvas-preview');
    const ctx = canvas.getContext('2d');
    const playBtn = document.getElementById('playBtn');
    const progressBar = document.getElementById('progress-bar');
    const progressText = document.getElementById('progress-text');
    const progressWrapper = document.getElementById('progress-wrapper');

canvas.width = 800; canvas.height = 600;

function cargarArchivos(files) {
        for (let f of files) clips.push({ url: URL.createObjectURL(f), type: f.type.startsWith('video') ? 'video' : 'image', name: f.name, duration: 5 });
        renderTimeline();
    }

function cargarAudio(num, file) {
        if (file) audioTracks[num] = { url: URL.createObjectURL(file), name: file.name, duration: 10 };
        renderTimeline();
    }

for(let n=1; n<=2; n++) {
            const aTrack = document.getElementById(`track-audio${n}`);
            aTrack.innerHTML = '';
            if(audioTracks[n]) {
                aTrack.innerHTML += `<div class="item-audio">
                    <span style="flex:1; font-size:10px">${audioTracks[n].name.substring(0,12)}</span>
                    <input type="number" class="dur-input" value="${audioTracks[n].duration}" onchange="audioTracks[${n}].duration=Number(this.value)">
                    <button class="remove" onclick="audioTracks[${n}]=null;renderTimeline()">×</button>
                </div>`;
            }
        }
    }

async function procesar(esExportacion) {
        if (isWorking && esExportacion) return;
        isWorking = true; isPaused = false; totalTimeGlobal = 0; currentMedia = [];
        progressWrapper.style.display = 'block';
        playBtn.innerText = "? PAUSAR";

const audioCtx = new AudioContext();
        const dest = audioCtx.createMediaStreamDestination();
        const chunks = [];
        let recorder = null;

const duracionTotal = clips.reduce((acc, c) => acc + Number(c.duration), 0);

if (esExportacion) {
            const stream = canvas.captureStream(30);
            const combined = new MediaStream([...stream.getVideoTracks(), ...dest.stream.getAudioTracks()]);
            recorder = new MediaRecorder(combined, { mimeType: 'video/webm; codecs=vp9' });
            recorder.ondataavailable = e => { if(e.data.size > 0) chunks.push(e.data); };
            recorder.onstop = () => {
                const blob = new Blob(chunks, { type: 'video/mp4' });
                const a = document.createElement('a');
                a.href = URL.createObjectURL(blob);
                a.download = "video_final.mp4"; a.click();
            };
            recorder.start();
        }

// DISPARAR AMBAS PISTAS DE AUDIO
        [1, 2].forEach(n => {
            if (audioTracks[n]) {
                const bgAudio = new Audio(audioTracks[n].url);
                const src = audioCtx.createMediaElementSource(bgAudio);
                src.connect(dest);
                if (!esExportacion) src.connect(audioCtx.destination);
                bgAudio.play();
                currentMedia.push(bgAudio);
            }
        });

for (let clip of clips) {
            const dur = Number(clip.duration);
            let clipTime = 0;
            await new Promise(resolve => {
                const vid = clip.type === 'video' ? document.createElement('video') : null;
                const img = clip.type === 'image' ? new Image() : null;
                if (img) img.src = clip.url;
                if (vid) {
                    vid.src = clip.url; vid.muted = esExportacion;
                    const vSrc = audioCtx.createMediaElementSource(vid);
                    vSrc.connect(dest);
                    if (!esExportacion) vSrc.connect(audioCtx.destination);
                    vid.play();
                    currentMedia.push(vid);
                }
                let lastFrame = Date.now();
                const frame = () => {
                    if (!isWorking) return;
                    if (!isPaused) {
                        const now = Date.now();
                        const dt = (now - lastFrame) / 1000;
                        lastFrame = now;
                        clipTime += dt; totalTimeGlobal += dt;
                        if (img) ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                        if (vid) ctx.drawImage(vid, 0, 0, canvas.width, canvas.height);
                        let porc = Math.min(Math.floor((totalTimeGlobal / duracionTotal) * 100), 100);
                        progressBar.style.width = porc + '%';
                        progressText.innerText = (esExportacion ? "RENDER: " : "VISTA: ") + porc + "%";
                    } else { lastFrame = Date.now(); }
                    if (clipTime < dur) requestAnimationFrame(frame);
                    else { if (vid) { vid.pause(); currentMedia = currentMedia.filter(m => m !== vid); } resolve(); }
                };
                requestAnimationFrame(frame);
            });
        }

if (recorder) {
            setTimeout(() => { recorder.stop(); finish(); }, 1000);
        } else { finish(); }

function finish() {
            isWorking = false;
            currentMedia.forEach(m => { m.pause(); m.remove(); });
            audioCtx.close();
            playBtn.innerText = "? PLAY PREVIEW";
            playBtn.classList.remove('active');
            setTimeout(() => progressWrapper.style.display = 'none', 1000);
        }
    }
</script>
</body>
</html>