如何使用JavaScript将MPEG音频与视频合并为MP4文件？

常见问题排查与修复 #

针对你使用FFmpeg.js遇到的报错问题，结合代码逻辑给出修正方案：

1. 补全异步处理与错误捕获 #

原代码的自执行函数未处理异步逻辑，且缺少错误捕获，导致无法定位报错原因。

2. 优化FFmpeg命令参数 #

直接使用-c copy可能因音视频编码不兼容导致失败，建议指定编码参数保证MP4容器兼容性。

3. 添加下载逻辑 #

原函数仅返回文件数据，未实现下载触发，需补充Blob转换与下载触发代码。

修正后的完整代码 #

<script src='https://unpkg.com/@ffmpeg/ffmpeg@0.9.6/dist/ffmpeg.min.js'></script>
<script>
async function mergeVideoAndDownload(videoSource, audioSource) {
    const { createFFmpeg, fetchFile } = FFmpeg;
    const ffmpeg = createFFmpeg({ log: true }); // 开启日志便于排查问题
    try {
        await ffmpeg.load();
        
        // 将音视频写入FFmpeg虚拟文件系统
        ffmpeg.FS('writeFile', 'input-video.mp4', await fetchFile(videoSource));
        // 注意音频后缀需与实际格式匹配，比如MP3就写.mp3
        ffmpeg.FS('writeFile', 'input-audio.mp3', await fetchFile(audioSource));
        
        // 执行合并命令，视频直接复制编码，音频转AAC保证MP4兼容
        await ffmpeg.run(
            '-i', 'input-video.mp4',
            '-i', 'input-audio.mp3',
            '-c:v', 'copy',
            '-c:a', 'aac',
            '-strict', 'experimental',
            'output.mp4'
        );
        
        // 读取生成的文件并触发下载
        const outputData = ffmpeg.FS('readFile', 'output.mp4');
        const blob = new Blob([outputData.buffer], { type: 'video/mp4' });
        
        const downloadUrl = URL.createObjectURL(blob);
        const aTag = document.createElement('a');
        aTag.href = downloadUrl;
        aTag.download = 'merged-video.mp4';
        document.body.appendChild(aTag);
        aTag.click();
        document.body.removeChild(aTag);
        URL.revokeObjectURL(downloadUrl);
        
        // 清理虚拟文件系统
        ffmpeg.FS('unlink', 'input-video.mp4');
        ffmpeg.FS('unlink', 'input-audio.mp3');
        ffmpeg.FS('unlink', 'output.mp4');
    } catch (err) {
        console.error('合并失败:', err);
    } finally {
        ffmpeg.exit();
    }
}

// 调用示例，替换成实际的视频/音频URL或File对象
(async () => {
    await mergeVideoAndDownload('你的视频地址', '你的音频地址');
})();
</script>

关键注意事项 #

• 格式匹配：音频文件后缀必须和实际格式一致，否则FFmpeg无法正确识别编码。
• 跨域限制：若音视频来自外部域名，需目标服务器开启CORS，否则fetchFile会读取失败。
• 日志排查：开启log: true后，可在控制台查看FFmpeg运行细节，快速定位编码不兼容、文件读取失败等问题。
• 版本兼容：v0.9.6为旧版本，若问题仍存在，可尝试升级至最新稳定版的@ffmpeg/ffmpeg。

内容的提问来源于stack exchange，提问作者Hari Das