首页/文章/javascript

纯JS实现多个音频的拼接或者合并

2023-12-26

1414 字约 5 分钟

...

学习

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11022 鑫空间-鑫生活
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

一、温故而知新

3年前有更新过JS对audio音频剪裁的实现，昨天更新了JS改变原始音频信息来实现音量的调整，今天我们再讲讲如何使用JS实现多个音频的拼接（下图1）与合并（下图2）。

拼接：

合并：

这下子，纯JS操作MP3/WAV音频资源的活儿都齐全了。

操作过程本质上大同小异。

ArrayBuffer转AudioBuffer，然后读取音频信息，对采样信息进行处理。

话不多说，来看看如何实现的。

二、多个音频的拼接

方法如下：


const concatAudio = (arrBufferList) =\> {
    
    const audioBufferList = arrBufferList;
    
    const maxChannelNumber = Math.max(...audioBufferList.map(audioBuffer => audioBuffer.numberOfChannels));
    
    const totalLength = audioBufferList.map((buffer) => buffer.length).reduce((lenA, lenB) => lenA + lenB, 0);

    
    const newAudioBuffer = audioContext.createBuffer(maxChannelNumber, totalLength, audioBufferList\[0\].sampleRate);
    
    let offset = 0;

    audioBufferList.forEach((audioBuffer, index) => {
        for (let channel = 0; channel < audioBuffer.numberOfChannels; channel++) {
            newAudioBuffer.getChannelData(channel).set(audioBuffer.getChannelData(channel), offset);
        }

        offset += audioBuffer.length;
    });

    return newAudioBuffer;
}

语法：

concatAudio(arrBufferList);

其中：

arrBufferList

指需要合并的AudioBuffer数组。

那如何获得音频的AudioBuffer数据呢？

可以使用 new AudioContext().decodeAudioData(arrayBuffer) 方法转换。

那如何得到arrayBuffer数据呢？

本地资源可以使用FileReader对象读取为ArrayBuffer，在线资源可以使用fetch请求获取。

这里演示使用Fetch API得到音频的AudioBuffer数据。


const audioContext = new AudioContext();

const getAudioBuffer = (src) =\> {
    return new Promise((resolve, reject) => {
        fetch(src).then(response => response.arrayBuffer()).then(arrayBuffer => {
            audioContext.decodeAudioData(arrayBuffer).then(buffer => {
                resolve(buffer);
            });
        })
    })
}

假设现在有下面两个音频地址：

const audioSrc = \[
    './assets/1.wav',
    './assets/2.wav'
\];

则使用下面几行JS就可以实现得到concat拼接后的新的音频的AudioBuffer数据了。

const arrBufferList = await Promise.all(audioSrc.map(src => getAudioBuffer(src)));

有了AudioBuffer数据，我们就可以播放音频，或者转为可下载的音频格式。

眼见为实，您可以狠狠地点击这里：纯JS实现音频的合并或拼接demo

点击演示页面中的“拼接”按钮，如下图所示，此时，就可以看到在下面的色块区域内显示了拼接后的音频了：

三、多个音频的合并

音频的合并指的是多个音频同时播放，但是是合在一个视频中。

我也弄了个JS函数方法：


const mergeAudio = (arrBufferList) =\> {
    
    const audioBufferList = arrBufferList;
    
    const maxDuration = Math.max(...audioBufferList.map(audioBuffer => audioBuffer.duration));
    
    const maxChannelNumber = Math.max(...audioBufferList.map(audioBuffer => audioBuffer.numberOfChannels));
    
    const newAudioBuffer = audioContext.createBuffer(maxChannelNumber, audioBufferList\[0\].sampleRate \* maxDuration, audioBufferList\[0\].sampleRate);
    
    audioBufferList.forEach((audioBuffer, index) => {
        for (let channel = 0; channel < audioBuffer.numberOfChannels; channel++) {
            const outputData = newAudioBuffer.getChannelData(channel);
            const bufferData = audioBuffer.getChannelData(channel);

            for (let i = audioBuffer.getChannelData(channel).length \- 1; i >= 0; i--) {
                outputData\[i\] += bufferData\[i\];
            }

            newAudioBuffer.getChannelData(channel).set(outputData);
        }
    });

    return newAudioBuffer;
}

其中：

arrBufferList

指需要合并的AudioBuffer数组。

mergeAudio 方法的语法和具体的使用和上面的 concatAudio 方法类似，这里就不再赘述了。

demo也是同一个页面：纯JS实现音频的合并或拼接demo

点击“合并”按钮，就可以得到背景音乐和段落音频合二为一后的新的音频了（右键播放器可以下载此视频）：

完整的实现代码均在demo页面上。

相信国内没有比我这里更直观更容易上手的演示代码了。

四、使用开源的项目

如果你对原生实现不怎么感兴趣，也可以使用开源项目。

其实还挺多的，之前找了一个，没记住，忘记了。

那就用这个项目吧，名字奇奇怪怪的，叫做crunker：https://github.com/jaggad/crunker

使用示意：

let crunker = new Crunker();

crunker
  .fetchAudio('/song.mp3', '/another-song.mp3')
  .then((buffers) => {
    
    return crunker.mergeAudio(buffers);
  })
  .then((merged) => {
    
    return crunker.export(merged, 'audio/mp3');
  })
  .then((output) => {
    
    crunker.download(output.blob);
    document.body.append(output.element);
    console.log(output.url);
  })
  .catch((error) => {
    
  });