前言

最近做需求用到了pcm-player插件，当时翻了一下源码，简单清晰，入手级别的源码学习，下面我们就来学习pcm-player源码。

pcm-player

pcm-player是一款简单的pcm数据流播放器，用法很简单，传入配置项初始化实例，然后用feed方法播放语音流，我们在github上打开pcm-player找到src文件夹，里面就是功能源码。

ts声明文件

首先我们来看下ts声明文件，这里面包含着参数类型，能够帮助我们理解源码，感觉作者正在用ts重构源码，因为下面方法还是用js写的。我们从上往下阅读声明文件，declare module声明文件/模块的语法，然后定义了几个接口，最后是定义了一个类。

接口option就是初始化的配置项，包括四个参数与两个函数，下面定义的类就是核心功能，整个文件我们需要注意两个类型：

• AudioContext：Audio相关的API，播放就是通过原生API实现的。
• typedArrays接口: 类型化数据类型，跟pcm流的编码格式相关，也就是我们传入的数据格式，只接受定义的四种格式。

init

从定义的类我们知道定义的公共方法有五个：

• feed:播放语音流。
• volumn:控制音量。
• destory:销毁实例。
• pause:暂停播放。
• continue:继续播放。 我们就从这个方法入手阅读源码，第一步是我们找到init方法。

1. 初始化配置项：init接收一个option可选参数，函数中定义了defaultOption默认配置项，用Object.assign合并传入的参数。
2. 根据配置项赋值：interval表示缓存播放，具体时间由配置项flushTime决定。convertValue表示编码位数，typedArray表示具体的二进制数据，这两个都由配置项中的inputCodec决定。
3. 初始化音频：intiAudioContext用来初始化音频上下文，bindAudioContextEvent用来绑定音频事件,AudioContext可以控制音频处理解码等执行。具体由new AudioContext创建实例，实例的createGain方法用于控制音量，而绑定事件由onstatechange方法控制。 以上就是init的大致过程，interval的时候会执行flush函数，这个函数我们不能忽略，该函数包含了录音播放的逻辑，首先使用createBufferSource创建一个播放源bufferSource，通过createBuffer创建audioBuffer，将audio数据填入到audioBuffer，将数据赋值给bufferSource的buffer，用bufferSource.connect连接音量，最后用bufferSource.start播放。

feed

init之后，接下来就是feed方法，该方法接收一个data数据。在flush函数中数据来源是samples变量，feed主要是将我们传过来的数据处理赋值给samples。

1. 数据校验，校验传入的数据是否符合ArrayBuffer或TypedArray。
2. 格式化数据，对于闯入的数据都会用Float32Array重新拷贝一份，然后赋值给samples进行播放。最终格式化的缓冲区数据都在-1到1之间。

其他

剩下的方法就非常简单，通过调用实例化的方法或赋值控制。

• volumn控制音量：音量是通过gainNode控制，接收的参数直接赋值给value。

volume(volume) {
this.gainNode.gain.value = volume
}

• destroy：销毁实例，将涉及到的变量赋值为null，interval用clearInterval，audioCtx用close方法。
• pause、continue：暂停与继续就是调用audioCtx相关方法，suspend——暂停，resume——继续。

总结

pcm-player就是通过AudioContext播放录音数据，gainNode控制音量，重点还是数据的处理，将数据进行了一次格式化，根据不同的声道处理数据。