前言
国庆前有一个需求，需要把多段音频合并成一个音频播放，做不出来国庆就要加班。为了美好假期必须节日前搞定，所幸实现起来还挺顺利的，下面介绍一下具体的实现过程。
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合并音频，先准备两段音频，然后安装依赖。
js
yarn add crunker在需要的页面中引入crunker:
js
import Crunker from 'crunker'然后创建实例，根据上述API，分成三步走：
- fetchAudio解析音频。
- mergeAudio合并音频。
- export导出音频。
注意我们的音频地址，最好是绝对路径，如果是静态资源要根据index.html写相对路径。打开console，就能得到合并后的数据。 
根据导出的音频数据，我们可以用于下载、播放等功能，比如我们将返回的element添加到页面上，就能够直接播放。 
有了想要的数据，就实现对应的需求即可。
总结
crunker完成音频合并一气呵成，非常的简便。需要音频的路径，如果是静态资源一定要写对路径，并且打包后查看对应资源是否存在。