`; return; } let html = ''; files.forEach(f => { const statusText = f.status === 'done' ? 'done' : (f.status === 'processing' ? 'processing' : 'pending'); const statusClass = f.status === 'done' ? 'done' : ''; const sizeStr = (f.size / 1024).toFixed(1) + ' KB'; html += ` `; }); fileListContainer.innerHTML = html; // attach event listeners inside queue document.querySelectorAll('.preview-btn').forEach(btn => { btn.addEventListener('click', (e) => { const id = parseInt(btn.dataset.id); const fileItem = files.find(f => f.id === id); if (fileItem) { const url = URL.createObjectURL(fileItem.file); audioPreview.src = url; audioPreview.load(); audioPreview.play().catch(() => {}); noPreviewMsg.style.display = 'none'; } }); }); document.querySelectorAll('.remove-btn').forEach(btn => { btn.addEventListener('click', (e) => { const id = parseInt(btn.dataset.id); removeFileById(id); }); }); document.querySelectorAll('.download-btn').forEach(btn => { btn.addEventListener('click', (e) => { const id = parseInt(btn.dataset.id); const fileItem = files.find(f => f.id === id); if (fileItem && fileItem.outputBlob) { const a = document.createElement('a'); a.href = fileItem.outputUrl; a.download = `converted_${fileItem.name.split('.').slice(0,-1).join('.')}.${outputFormat.value}`; a.click(); } }); }); } function removeFileById(id) { const index = files.findIndex(f => f.id === id); if (index !== -1) { if (files[index].outputUrl) URL.revokeObjectURL(files[index].outputUrl); files.splice(index, 1); renderQueue(); } } // ----- add files ----- function addFiles(selectedFiles) { for (let file of selectedFiles) { if (file.size > 200 * 1024 * 1024) { alert(`File ${file.name} exceeds 200MB – may cause memory issues.`); continue; } const id = nextId++; files.push({ id, file, name: file.name, size: file.size, status: 'pending', outputBlob: null, outputUrl: null, outputSize: null }); } renderQueue(); } // ----- event listeners upload ----- browseBtn.addEventListener('click', () => fileInput.click()); fileInput.addEventListener('change', (e) => { if (e.target.files.length) addFiles(Array.from(e.target.files)); fileInput.value = ''; }); // drag & drop ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(e => dropZone.addEventListener(e, (ev) => ev.preventDefault())); dropZone.addEventListener('dragover', () => dropZone.classList.add('dragover')); dropZone.addEventListener('dragleave', () => dropZone.classList.remove('dragover')); dropZone.addEventListener('drop', (e) => { dropZone.classList.remove('dragover'); if (e.dataTransfer.files.length) addFiles(Array.from(e.dataTransfer.files)); }); dropZone.addEventListener('click', (e) => { if (e.target === browseBtn || e.target.closest('.upload-btn')) return; fileInput.click(); }); // clear buttons clearAllBtn.addEventListener('click', () => { files.forEach(f => { if (f.outputUrl) URL.revokeObjectURL(f.outputUrl); }); files = []; renderQueue(); }); clearCompletedBtn.addEventListener('click', () => { files = files.filter(f => f.status !== 'done'); renderQueue(); }); // ----- conversion logic ----- async function convertFile(fileItem) { if (!ffmpegLoaded) throw new Error('FFmpeg not ready'); currentFileId = fileItem.id; fileItem.status = 'processing'; renderQueue(); const inputFileName = fileItem.name; const outExt = outputFormat.value; const outputFileName = `converted_${Date.now()}.${outExt}`; // prepare args let args = []; const start = parseFloat(trimStart.value) || 0; const end = trimEnd.value ? parseFloat(trimEnd.value) : null; if (end !== null && end > start) { args.push('-ss', start.toString(), '-i', inputFileName, '-to', (end - start).toString()); } else if (start > 0) { args.push('-ss', start.toString(), '-i', inputFileName); } else { args.push('-i', inputFileName); } // codec if (outExt === 'mp3') args.push('-codec:a', 'libmp3lame'); else if (outExt === 'aac') args.push('-codec:a', 'aac'); else if (outExt === 'ogg') args.push('-codec:a', 'libvorbis'); else if (outExt === 'flac') args.push('-codec:a', 'flac'); else if (outExt === 'wav') args.push('-codec:a', 'pcm_s16le'); // bitrate (not for wav) if (outExt !== 'wav') args.push('-b:a', bitrateSelect.value); // channels args.push('-ac', channelsSelect.value); // sample rate args.push('-ar', sampleRateSelect.value); args.push('-y', outputFileName); // read file const fileData = await fetchFile(fileItem.file); ffmpeg.FS('writeFile', inputFileName, fileData); // run progressArea.classList.remove('hidden'); currentFileLabel.innerText = fileItem.name; progressFill.style.width = '0%'; progressPercent.innerText = '0%'; progressStatus.innerText = 'starting'; cancelBtn.disabled = false; try { await ffmpeg.run(...args); if (cancelCurrent) { cancelCurrent = false; return; // discard } const outputData = ffmpeg.FS('readFile', outputFileName); const blob = new Blob([outputData.buffer], { type: 'audio/' + outExt }); const url = URL.createObjectURL(blob); fileItem.outputBlob = blob; fileItem.outputUrl = url; fileItem.outputSize = blob.size; fileItem.status = 'done'; // update download area (latest file) globalDownloadLink.href = url; globalDownloadLink.download = `converted_${fileItem.name}.${outExt}`; downloadArea.classList.remove('hidden'); // cleanup fs ffmpeg.FS('unlink', inputFileName); ffmpeg.FS('unlink', outputFileName); } catch (err) { fileItem.status = 'pending'; alert(`Conversion failed for ${fileItem.name}: ${err.message}`); } finally { if (fileItem.id === currentFileId) currentFileId = null; renderQueue(); if (!files.some(f => f.status === 'processing')) { progressArea.classList.add('hidden'); cancelBtn.disabled = true; isConverting = false; } } } // process queue sequentially async function processQueue() { if (isConverting || !ffmpegLoaded) return; isConverting = true; cancelCurrent = false; cancelBtn.disabled = false; for (let f of files) { if (cancelCurrent) break; if (f.status === 'pending') { await convertFile(f); } } isConverting = false; cancelBtn.disabled = true; progressArea.classList.add('hidden'); cancelCurrent = false; } convertAllBtn.addEventListener('click', processQueue); cancelBtn.addEventListener('click', () => { cancelCurrent = true; cancelBtn.disabled = true; progressStatus.innerText = 'cancelling...'; // ffmpeg will finish current step but we discard result }); // disable bitrate for wav outputFormat.addEventListener('change', () => { bitrateSelect.disabled = outputFormat.value === 'wav'; }); })();