使用Web Audio API拼接MP3音频后，如何生成可用的HTML audio标签URL？

你的代码存在三个核心问题，导致生成的URL无法在audio标签中正常使用：

1. 输出AudioBuffer长度计算错误：仅使用了第一个音频Buffer的长度，未累加所有输入音频的总长度，导致拼接后的音频被截断。
2. 音频样本复制逻辑错误：每次复制都从输出Buffer的索引0开始，导致多个音频重叠而非依次拼接。
3. 直接转换AudioBuffer为Blob无效：AudioBuffer存储的是原始PCM音频样本，不是MP3、WAV这类编码后的音频格式，HTML audio标签无法直接识别原始PCM数据。

修正后的实现方案 #

我们需要先正确拼接AudioBuffer，再将其编码为浏览器支持的音频格式（比如WAV），最后生成可用于audio标签的URL。以下是基于MediaRecorder的兼容性较好的实现：

async concatenateAudioFiles(urls) {
    const audioContext = new (window.AudioContext || window.webkitAudioContext)();

    // 1. 拉取并解码所有音频文件为AudioBuffer
    const audioBuffers = await Promise.all(
        urls.map(url => fetch(url)
            .then(res => res.arrayBuffer())
            .then(buf => audioContext.decodeAudioData(buf))
        )
    );

    // 2. 计算拼接后音频的总长度
    const totalLength = audioBuffers.reduce((sum, buf) => sum + buf.length, 0);
    const sampleRate = audioBuffers[0].sampleRate;
    const channels = audioBuffers[0].numberOfChannels;

    // 3. 创建用于拼接的输出AudioBuffer
    const outputBuffer = audioContext.createBuffer(channels, totalLength, sampleRate);

    // 4. 正确复制音频样本到输出Buffer（依次拼接而非重叠）
    let offset = 0;
    for (const buffer of audioBuffers) {
        for (let channel = 0; channel < channels; channel++) {
            const outputData = outputBuffer.getChannelData(channel);
            const inputData = buffer.getChannelData(channel);
            outputData.set(inputData, offset);
        }
        offset += buffer.length;
    }

    // 5. 将AudioBuffer转换为可编码的MediaStream
    const source = audioContext.createBufferSource();
    source.buffer = outputBuffer;
    const destination = audioContext.createMediaStreamDestination();
    source.connect(destination);
    source.start();

    // 6. 使用MediaRecorder编码音频为WAV格式（兼容性好）
    return new Promise((resolve) => {
        const recorder = new MediaRecorder(destination.stream, { mimeType: 'audio/wav' });
        const chunks = [];

        recorder.ondataavailable = (e) => chunks.push(e.data);
        recorder.onstop = () => {
            const blob = new Blob(chunks, { type: 'audio/wav' });
            const audioUrl = URL.createObjectURL(blob);
            resolve(audioUrl);
        };

        recorder.start();
        // 录制结束：等待BufferSource播放完毕后停止录制
        setTimeout(() => recorder.stop(), outputBuffer.duration * 1000);
    });
}

代码说明 #

• 正确拼接音频：通过offset变量记录当前复制的位置，确保每个音频片段依次写入输出Buffer，不会重叠。
• MediaRecorder编码：将拼接后的AudioBuffer转为MediaStream，再通过MediaRecorder编码为WAV格式（几乎所有浏览器都支持），生成的Blob可以直接被audio标签识别。
• 简化数据拉取：用fetch替代XMLHttpRequest，代码更简洁。

使用时直接调用函数，将返回的URL赋值给audio标签的src属性即可：

concatenateAudioFiles(['url1.mp3', 'url2.mp3'])
    .then(url => {
        const audio = document.querySelector('audio');
        audio.src = url;
    });

内容的提问来源于stack exchange，提问作者Devendra Karkar