源码学习——crunker音频库

前言

前段时间做了一个合并音频的需求,当时用了crunker库快速完成了该需求,后面抽时间翻了下crunker源码,发现该库源码写的也非常清晰,主要是用Audio相关API完成的,简单易懂,本节我就来介绍一下crunker源码。

源码

crunker是利用音频API处理音频的库,有合并、导出、下载等功能,打开对应的github,找到src文件夹,crunker.ts文件就是各个方法的源码。

转换

fetchAudio 用于将音频文件转换为AudioBuffer;我们先明确AudioBuffer是什么?AudioBuffer就是内存中的音频资源,日常开发中我们拿到的音频一般是保存地址,说白了就是一段字符串,不可能进行二次操作,并且Web的Aduio API往往是对内存中的资源进行操作,所以我们先拿到音频资源。实现该方法分成了两步:

  1. 通过fetch请求文件地址,获取ArrayBuffer数据。
  2. new一个AudioContext,将ArrayBuffer转换成AudioBuffer。

步骤非常简单,但是我们最好了解用到的API,方便理解:

  • fetch:一个异步获取资源的API,返回一个promise对象。
  • AudioContext:音频上下文,可以处理音频,比如创建、解码等。
  • AudioContext.decodeAudioData:AudioContext的一个方法,用来解码ArrayBuffer,返回AudioBuffer。
  • ArrayBuffer:数据缓冲区,可以用来操作和存储二进制数据。

通过以上分析我们就能写出fetchAduio函数,这里我们就以单个录音地址为参数,源码中是接收录音地址数组为参数。

合并

mergeAudio可以用多个AudioBuffer数据合并成一个AduioBuffer,结合着fetchAudio它可以用合并多个音频文件,具体步骤如下:

  1. 使用createBuffer创建一个空白的AudioBuffer,用来存储合并后的AudioBuffer。
  2. 循环AudioBuffer数组,获取对应的音频通道数据。
  3. 循环音频通道数据,添加到空白AudioBuffer对应的通道中。 合并要复杂点,这里运用了两次循环,我们要清楚每次循环的目的是什么?在此之前我们还是要了解新的API:
  • AudioContext.createBuffer:创建空白AudioBuffer对象。
  • AudioBuffer.numberOfChannels:表示音频通道数,也就是我们说的声道,声道一般就是单声道(Mono)和立体声(Stereo),所以该值一般为1或者2。
  • AudioBuffer.getChannelData:获取各个通道中的PCM数据。
    注意,我们在创建AudioBuffer时传递的参数,比如声道数、时间必须是参数数组中的最大值,这样才能保证所有的音频数据被合并。

播放

play用来播放音频,接收一个AudioBuffer。播放的思路就很简单,创建音频源进行播放。用到的API如下:

  • AudioContext.createBufferSource创建音频源,可以接收AudioBuffer来进行播放。
  • connect:音频源方法,连接到目标节点。
  • start:音频源方法,播放音频。

总结

以上方法理解起来并不困难,用到的API都是Audio API,我相信大部分人不会专门去MDN翻看这些API,通过学习源码我们就能理解掌握,下次碰到Audio相关就会有相关思路,甚至慢慢写出复杂逻辑。上述案例是用js重构了一下,源码用的是ts,感兴趣的可以继续探索。

相关推荐
八月ouc14 分钟前
每日小知识点:10.14 webpack 有几种文件指纹
前端·webpack
苏琢玉17 分钟前
从 Hexo 到 Astro:重构我的个人博客
前端·hexo
街尾杂货店&24 分钟前
webpack - 单独打包指定JS文件(因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改)
前端·javascript·webpack
月光技术杂谈25 分钟前
用Deepseek 实现一个基于web的扣图应用
前端·javascript·html5·ccs·tensorflow.js·canvas api
金梦人生1 小时前
Css性能优化
前端·css
Holin_浩霖1 小时前
UI设计的底层逻辑:从组件到系统的跃迁
前端
Holin_浩霖1 小时前
前端开发者的 Web3 全图解实战 二
前端
写代码的皮筏艇1 小时前
CSS属性继承与特殊值
前端·css
kevlin_coder1 小时前
🚀 实现同一个滚动区域包含多个虚拟滚动列表
前端·javascript
金梦人生1 小时前
JS 性能优化
前端·javascript