💡 支持格式: MP4, MKV, AVI, WebM, MP3, WAV, AAC, OGG 等
最大文件: 500MB | 使用 FFmpeg.wasm 处理
`;
document.body.appendChild(container);
// 绑定事件
bindEvents();
}
// 绑定事件
function bindEvents() {
const overlay = document.getElementById('avm-overlay');
const closeBtn = document.getElementById('avm-close');
const videoZone = document.getElementById('avm-video-zone');
const audioZone = document.getElementById('avm-audio-zone');
const videoInput = document.getElementById('avm-video-input');
const audioInput = document.getElementById('avm-audio-input');
const mergeBtn = document.getElementById('avm-merge-btn');
const resetBtn = document.getElementById('avm-reset-btn');
// 关闭
overlay.addEventListener('click', hidePanel);
closeBtn.addEventListener('click', hidePanel);
// 视频拖放
setupDropZone(videoZone, videoInput, 'video', (file) => {
videoFile = file;
document.getElementById('avm-video-info').textContent = file.name + ` (${formatSize(file.size)})`;
videoZone.classList.add('has-file');
});
// 音频拖放
setupDropZone(audioZone, audioInput, 'audio', (file) => {
audioFile = file;
document.getElementById('avm-audio-info').textContent = file.name + ` (${formatSize(file.size)})`;
audioZone.classList.add('has-file');
});
// 合并按钮
mergeBtn.addEventListener('click', startMerge);
// 重置按钮
resetBtn.addEventListener('click', resetAll);
}
// 设置拖放区域
function setupDropZone(zone, input, type, onFile) {
const handleFile = (file) => {
if (type === 'video' && !file.type.startsWith('video/')) {
showStatus('请选择视频文件', 'error');
return;
}
if (type === 'audio' && !file.type.startsWith('audio/') && !file.type.startsWith('video/')) {
showStatus('请选择音频文件', 'error');
return;
}
if (file.size > CONFIG.maxFileSize) {
showStatus('文件超过500MB限制', 'error');
return;
}
onFile(file);
};
zone.addEventListener('click', () => input.click());
zone.addEventListener('dragover', (e) => {
e.preventDefault();
zone.classList.add('dragover');
});
zone.addEventListener('dragleave', () => {
zone.classList.remove('dragover');
});
zone.addEventListener('drop', (e) => {
e.preventDefault();
zone.classList.remove('dragover');
const file = e.dataTransfer.files[0];
if (file) handleFile(file);
});
input.addEventListener('change', (e) => {
const file = e.target.files[0];
if (file) handleFile(file);
});
}
// 显示/隐藏面板
function showPanel() {
document.getElementById('avm-overlay').classList.add('show');
document.getElementById('avm-container').classList.add('show');
}
function hidePanel() {
document.getElementById('avm-overlay').classList.remove('show');
document.getElementById('avm-container').classList.remove('show');
}
// 显示状态
function showStatus(msg, type = 'info') {
const el = document.getElementById('avm-status');
el.textContent = msg;
el.className = `avm-status show ${type}`;
setTimeout(() => el.classList.remove('show'), 5000);
}
// 格式化文件大小
function formatSize(bytes) {
if (bytes < 1024) return bytes + ' B';
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
if (bytes < 1024 * 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
return (bytes / (1024 * 1024 * 1024)).toFixed(1) + ' GB';
}
// 加载FFmpeg
async function loadFFmpeg() {
if (ffmpegLoaded) return true;
showStatus('正在加载 FFmpeg...', 'info');
const progressEl = document.getElementById('avm-progress');
const progressFill = document.getElementById('avm-progress-fill');
const progressText = document.getElementById('avm-progress-text');
progressEl.classList.add('show');
progressFill.style.width = '10%';
progressText.textContent = '加载 FFmpeg 核心文件...';
try {
const { FFmpeg } = await import('@ffmpeg/ffmpeg');
const { fetchFile, toBlobURL } = await import('@ffmpeg/util');
ffmpeg = new FFmpeg();
ffmpeg.on('progress', ({ progress }) => {
const percent = Math.round(progress * 100);
progressFill.style.width = percent + '%';
progressText.textContent = `处理中... ${percent}%`;
});
progressFill.style.width = '30%';
progressText.textContent = '下载 FFmpeg WASM...';
const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/umd';
await ffmpeg.load({
coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
});
progressFill.style.width = '100%';
progressText.textContent = '准备完成!';
// 暴露到全局供其他函数使用
window.ffmpegFetchFile = fetchFile;
setTimeout(() => progressEl.classList.remove('show'), 500);
ffmpegLoaded = true;
return true;
} catch (err) {
console.error('FFmpeg load error:', err);
progressEl.classList.remove('show');
showStatus('FFmpeg 加载失败: ' + err.message, 'error');
return false;
}
}
// 开始合并
async function startMerge() {
if (!videoFile) {
showStatus('请选择视频文件', 'error');
return;
}
if (!audioFile) {
showStatus('请选择音频文件', 'error');
return;
}
const mergeBtn = document.getElementById('avm-merge-btn');
const progressEl = document.getElementById('avm-progress');
const progressFill = document.getElementById('avm-progress-fill');
const progressText = document.getElementById('avm-progress-text');
const format = document.getElementById('avm-format').value;
const outputName = document.getElementById('avm-output-name').value || 'merged_video';
mergeBtn.disabled = true;
progressEl.classList.add('show');
progressFill.style.width = '0%';
progressText.textContent = '准备文件...';
try {
// 加载FFmpeg
if (!await loadFFmpeg()) {
throw new Error('FFmpeg 加载失败');
}
progressFill.style.width = '20%';
progressText.textContent = '读取视频文件...';
// 写入文件
const videoData = await videoFile.arrayBuffer();
const audioData = await audioFile.arrayBuffer();
await ffmpeg.writeFile('input_video', new Uint8Array(videoData));
await ffmpeg.writeFile('input_audio', new Uint8Array(audioData));
progressFill.style.width = '40%';
progressText.textContent = '合并中...';
// 执行合并
const outputFile = `${outputName}.${format}`;
await ffmpeg.exec([
'-i', 'input_video',
'-i', 'input_audio',
'-c:v', 'copy',
'-c:a', 'aac',
'-strict', 'experimental',
'-shortest',
outputFile
]);
progressFill.style.width = '80%';
progressText.textContent = '生成输出文件...';
// 读取输出
const data = await ffmpeg.readFile(outputFile);
const blob = new Blob([data.buffer], { type: `video/${format}` });
// 下载
progressFill.style.width = '100%';
progressText.textContent = '准备下载...';
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = outputFile;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
showStatus('✅ 合并完成! 文件已下载', 'success');
// 清理
await ffmpeg.deleteFile('input_video');
await ffmpeg.deleteFile('input_audio');
await ffmpeg.deleteFile(outputFile);
} catch (err) {
console.error('Merge error:', err);
showStatus('合并失败: ' + err.message, 'error');
} finally {
mergeBtn.disabled = false;
setTimeout(() => progressEl.classList.remove('show'), 3000);
}
}
// 重置
function resetAll() {
videoFile = null;
audioFile = null;
document.getElementById('avm-video-info').textContent = '';
document.getElementById('avm-audio-info').textContent = '';
document.getElementById('avm-video-zone').classList.remove('has-file');
document.getElementById('avm-audio-zone').classList.remove('has-file');
document.getElementById('avm-video-input').value = '';
document.getElementById('avm-audio-input').value = '';
document.getElementById('avm-status').classList.remove('show');
}
// 注册菜单
GM_registerMenuCommand('🎬 ' + CONFIG.title, showPanel);
// 初始化
createUI();
// 页面加载后自动显示面板
window.addEventListener('load', () => {
setTimeout(showPanel, 500);
});
})();