需求小能手——crunker合并音频

前言

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

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完成音频合并一气呵成,非常的简便。需要音频的路径,如果是静态资源一定要写对路径,并且打包后查看对应资源是否存在。

相关推荐
吞掉星星的鲸鱼31 分钟前
使用高德api实现天气查询
前端·javascript·css
lilye6634 分钟前
程序化广告行业(55/89):DMP与DSP对接及数据统计原理剖析
java·服务器·前端
....49235 分钟前
Vue3 + Element Plus + AntV X6 实现拖拽树组件
javascript·vue.js·elementui·antvx6
zhougl9962 小时前
html处理Base文件流
linux·前端·html
花花鱼3 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_3 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo4 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之6 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端6 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡6 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript