如何在浏览器中播放pcm音频

欢迎访问博客原文：https://lightfish.cn/2019-01-01-browser-pcm-add-wav-header

前言

最近在整理音视频编程的知识，回忆起半年多，有一次需求是在后台播放某来源的 pcm 文件，当时处理方法用了点技巧，记录下来

背景：业务需求，在web后台里播放 pcm 文件，文件不大(约300KB，已知 pcm 的参数采样率16000，采样位数16，声道数1

如何播放

浏览器是无法直接播放 pcm 音频的，因为 pcm 是比较原始的音频格式:

PCM（Puls Code Modulation）全称脉码调制录音，PCM录音就是将声音的模拟信号表示成0,1标识的数字信号，未经任何编码和压缩处理，所以可以认为PCM是未经压缩的音频原始格式。PCM格式文件中不包含头部信息，播放器无法知道采样率，声道数，采样位数，音频数据大小等信息，导致无法播放。

如何让浏览器识别 pcm

浏览器可以播放另一种音频格式：WAV格式全称为WAVE，前面提到只需要在PCM文件的前面添加WAV文件头，就可以生成WAV格式文件

所以我的解决方法是给 pcm 添加 wav header，接下来就是 browser javascript 的实践编码了

javascript 如何处理文件流

js 在处理文件流、网络数据，常用到 ArrayBuffer 类型，关于 ArrayBuffer 类型的API调用方法，需要事先多了解。

• 第一步，ajax异步获取网络 pcm 文件的 ArrayBuffer

const getWebFileArrayBuffer = async (url) => {
   
  return await fetch(url).then(response => response.arrayBuffer())
}

• 第二步，对获取的 pcm 文件流 ArrayBuffer 添加 wav header，我们先弄明白 header 的构造:

看以上图片，我们需要将获取到的 pcm data 添加 44 bytes 的 header，根据 header 的结构，对齐、紧凑地填充信息，在 javascript 中，需要使用 DataView 类型帮助我们进行字节填充的操作，注意DataView提供的 API 默认使用 little end 的数据格式，需要额外定义 big end 格式填充字节的方法。

以下以代码来说明如何一步一步填充字节信息：

const getWebPcm2WavArrayBuffer = async (url) => {
   
  const bytes = await getWebFileArrayBuffer(url)
  return addWavHeader(bytes, 16000, 16, 1) // 这里是当前业务需求，特定的参数，采样率16000，采样位数16，声道数1
}

const addWavHeader = function (samples, sampleRateTmp, sampleBits, channelCount) {
   
  let dataLength = samples.byteLength
  /* 新的buffer类，预留 44 bytes 的　heaer 空间 */
  let buffer = new ArrayBuffer(44 + dataLength)
  /* 转为 Dataview, 利用 API 来填充字节 */
  let view = new