前言

国庆前有一个需求，需要把多段音频合并成一个音频播放，做不出来国庆就要加班。为了美好假期必须节日前搞定，所幸实现起来还挺顺利的，下面介绍一下具体的实现过程。

crunker

刚开始拿到这个需求，首先想到的就是循环合并，但是用哪种方式解析录音，如何拼接一时也没想好，后来同事推荐了crunker库，轻松地完成了该需求。 crunker是一个音频处理库，有着合并、连接、播放音频等功能，所需的音频合并完成能够实现，每个功能都有一个具体的API:

• fetchAudio:接收多个音频为参数，解析音频文件，返回AudioBuffer数组。
• mergeAudio:接收AduioBuffer数组，合并AduioBuffer为一个，实现该需求的核心方法。
• concatAudio:接收AduioBUffer数组，按顺序连接多个音频。该方法与merge实现方式时有所不同的，我们可以看下具体的源码。

mergeAudio将音频数据每个循环放到output里面，最终返回是一个新的AudioBuffer，而concatAudio只是做了拼接，每段音频数据没有再次循环，output的是多段连接起来的AudioBuffer。

• export:导出录音，接收AudioBuffer与导出格式，导出格式一般为aduio/mp3，mp3兼容性是最好的，返回一个对象，包含着blob（音频流）、element（播放音频元素）、url（blob转换的地址）三个属性。blob转url一般使用的是URL.createObjectUrl，并且crunker连播放元素都搞好了，非常的nice。
• download:下载音频，接收一个blob音频流与下载名称。
• padAduio:在任意位置填充音频流，接收三个参数： buffer：音频流。 padStart:填充位置。sconds：填充时长。
• play:接收buffer参数，播放音频。
• notSupported:接收一个callback，当浏览器不兼容该以上方法时返回。 以上所有的API都是通过promise封装的，所有我们需要用.then或者await进行下一步，这些API刚好形成完整的需求链。

使用

下面我们用crunker合并音频，先准备两段音频，然后安装依赖。

   yarn add crunker

在需要的页面中引入crunker:

   import Crunker from 'crunker'

然后创建实例，根据上述API，分成三步走：

• fetchAudio解析音频。
• mergeAudio合并音频。
• export导出音频。 注意我们的音频地址，最好是绝对路径，如果是静态资源要根据index.html写相对路径。打开console，就能得到合并后的数据。 根据导出的音频数据，我们可以用于下载、播放等功能，比如我们将返回的element添加到页面上，就能够直接播放。 有了想要的数据，就实现对应的需求即可。

总结

crunker完成音频合并一气呵成，非常的简便。需要音频的路径，如果是静态资源一定要写对路径，并且打包后查看对应资源是否存在。