Js使用ffmpeg在视频中合成音频背景音乐

ffmpeg

使用场景是需要在web端对视频的背景音乐进行混音合成。

注意:

以下所有的使用案例均基于vue3 setup。

同时由于@ffmpeg版本不同会导致使用的api不同，使用案例前需要注意@ffmpeg版本问题。

如果使用的是0.12+需要使用新的api，详情请看文档

npm

bash 复制代码

npm install @ffmpeg/ffmpeg@^0.11.0

npm install @ffmpeg/core@^0.11.0

视频中合成背景音乐

html 复制代码

<template></template>

<script setup>
import { ref, onUnmounted, onMounted } from 'vue'
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

const ffmpeg = createFFmpeg({ log: true });

/**
 * 根据在线的音频地址将音频合成到视频背景音乐中
 * @param {string} url 在线视频链接
 * @param {string} type 视频类型
 * @param {object} voiceItem 音频素材对象
 * @param {string} voiceItem.startT 音频素材出现的开始时间
 * @param {number} voiceItem.url 音频素材的地址url
 */
const videoVoiceCompose = async (url, type, voiceItem) => {
    if (!ffmpeg.isLoaded()) {
        await ffmpeg.load();
    }
    if (!url) return;

    const {url: voiceUrl, startT: startTime} = voiceItem;

    const inputName = `input.${type}`;
    const outputName = `output.${type}`;
    const voiceType = voiceUrl.split(".").pop();
    const voiceFileName = `image.${voiceType}`;

    // 将输入文件保存到虚拟文件系统
    if (url.startsWith('blob:')) {
        // 处理 Blob URL
        const arrayBuffer = await fetchBlobAsArrayBuffer(url);
        ffmpeg.FS('writeFile', inputName, new Uint8Array(arrayBuffer));
    } else if (url.startsWith('http://') || url.startsWith('https://')) {
        // 处理网络地址
        await ffmpeg.FS('writeFile', inputName, await fetchFile(url));
    }
    await ffmpeg.FS('writeFile', voiceFileName, await fetchFile(voiceUrl));

    // 运行 FFmpeg 命令
    try {
        await ffmpeg.run(
            '-i', inputName,
            '-i', voiceFileName,
            '-filter_complex', `[1:a]adelay=${startTime * 1000}|${startTime * 1000}[a1];[0:a][a1]amix=inputs=2:duration=first[aout]`,
            '-map', `0:v`,
            '-map', `[aout]`,
            '-c:v', 'copy',
            '-c:a', 'aac',
            "-strict", "experimental",
            outputName,
            "-hide_banner"
        )

        // 读取输出文件
        let arrayBuffer = ffmpeg.FS('readFile', outputName).buffer; // 读取缓存

        // 创建下载链接并通过回调下载保存到本地
        const fileUrl = URL.createObjectURL(new Blob([arrayBuffer])); // 转为Blob URL

        // 释放内存
        ffmpeg.FS('unlink', inputName);
        ffmpeg.FS('unlink', outputName);

        return {
            fileUrl,
            outputName
        };
    } catch (e) {
        console.log(e);
    }
}

const downloadFile = (url, fileName = `clip.mp4`) => {
    const link = document.createElement('a');
    link.href = url;
    link.download = fileName;
    link.click();
}

onMounted(async () => {
	const url = "http://xxx.mp4"
	const type = /\.([a-zA-Z0-9]+)$/.exec(url)?.[1];
	// 从2s开始将 http://xxx.mp3 中的背景音乐合成到url的视频背景音乐中
    const {fileUrl} = await videoVoiceCompose (url, type, {url: "http://xxx.mp3", startT: 2})
    downloadFile(fileUrl)
})

onUnmounted(() => {
    ffmpeg.exit();
})
</script>