源码学习——pcm-player

前言

最近做需求用到了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。
js 复制代码
volume(volume) {
this.gainNode.gain.value = volume
}
  • destroy:销毁实例,将涉及到的变量赋值为null,interval用clearInterval,audioCtx用close方法。
  • pause、continue:暂停与继续就是调用audioCtx相关方法,suspend ------暂停,resume ------继续。

总结

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

相关推荐
QQ1__8115175156 小时前
Spring boot名城小区物业管理系统信息管理系统源码-SpringBoot后端+Vue前端+MySQL【可直接运行】
前端·vue.js·spring boot
钛态6 小时前
前端微前端架构:大项目的救命稻草还是自找麻烦?
前端·vue·react·web
一粒黑子6 小时前
【实战解析】阿里开源 PageAgent:纯前端 GUI Agent,一行JS让网页支持自然语言操控
前端·javascript·开源
独角鲸网络安全实验室6 小时前
2026微信小程序抓包全解析:从实操落地到合规风控,解锁前端调试新范式
前端·微信小程序·小程序·抓包·系统代理绕过·https证书严格校验·进程隔离
紫微AI6 小时前
前端文本测量成了卡死一切创新的最后瓶颈,pretext实现突破了
前端·人工智能·typescript
GISer_Jing6 小时前
AI前端(From豆包)
前端·aigc·ai编程
IT枫斗者6 小时前
前端部署后如何判断“页面是不是最新”?一套可落地的版本检测方案(适配 Vite/Vue/React/任意 SPA)
前端·javascript·vue.js·react.js·架构·bug
测试修炼手册6 小时前
[测试技术] 深入理解 JSON Web Token (JWT)
前端·json
AI老李6 小时前
2026 年 Web 前端开发的 8 个趋势!
前端
里欧跑得慢6 小时前
15. Web可访问性最佳实践:让每个用户都能平等访问
前端·css·flutter·web