PCM音频实时播放：音频字节数组（16/8位）转为PCM ArrayBuffer流

Posted 2023-04-04 ccy607

转载

类型化数组是建立在ArrayBuffer对象的基础上的。它的作用是，分配一段可以存放数据的连续内存区域。

var buf = new ArrayBuffer(32); //生成一段32字节的内存区域，即变量buf在内存中占了32字节大小
ArrayBuffer对象的byteLength属性，返回所分配的内存区域的字节长度。
buf.byteLength //32

ArrayBuffer作为内存区域，可以存放多种类型的数据。不同数据有不同的存储方式，这就叫做“视图”。目前，javascript提供以下类型的视图
Int8Array：8位有符号整数，长度1个字节。
Uint8Array：8位无符号整数，长度1个字节。
Int16Array：16位有符号整数，长度2个字节。
Uint16Array：16位无符号整数，长度2个字节。
Int32Array：32位有符号整数，长度4个字节。
Uint32Array：32位无符号整数，长度4个字节。
Float32Array：32位浮点数，长度4个字节。
Float64Array：64位浮点数，长度8个字节。

// audioArr  pcm字节数组（16位）Int8类型   每两位数字代表一个字节  [11,11,22,33] => 代表两个字节
// Int8 => Int16  每两位合成一位  低位 + 高位 * 256
var arraybuffer = new Int8Array(audioArr)
var arraybuffer1 = new Int16Array(data.msgdata.audio.length / 2)
arraybuffer1 = arraybuffer1.map((item, index) => arraybuffer[index * 2] + arraybuffer[index * 2 + 1] * 256)
this.player.feed(arraybuffer1.buffer)

//  audioArr  pcm字节数组（8位） 每一位数字代表一个字节  [11,11,22,33] => 代表四个字节
// 第一步： audio: int8数-128~127 ***转化***  uint8数0~255 (低位转高位:正数不变：127 => 127,负数加255：-1 => 255   -128 => 128)
// 第二步： uint8数0~255 ***映射*** int16数  映射方法为：先减去 128 再乘以 256    0 => -128 => -32768     128 => 0 => 0    255 => 127 => 32512
// 转化：   uint8 转化为 int16   -128 => -32768   0 => 0        127 => 32512
// 映射：   uint8 映射为 int16                    0 => -32768   128 => 0         255 => 32512
var arraybuffer2 = new Uint8Array(audioArr)
var arraybuffer3 = new Int16Array(data.msgdata.audio.length)
arraybuffer3 = arraybuffer3.map((item, index) => 32768 / 128 * (arraybuffer2[index] - 128))
this.player.feed(arraybuffer3.buffer)

创建PCMPlayer

this.player = createPCMPlayer(
   inputCodec: 'Int16',
   channels: data.channels,
   sampleRate: data.rate, // 采样率 单位Hz
   flushTime: 200,
)

PCM插件地址

class Player 
  constructor(option) 
    this.init(option)
  

  init(option) 
    const defaultOption = 
      inputCodec: 'Int16', // 传入的数据是采用多少位编码，默认16位
      channels: 1, // 声道数
      sampleRate: 8000, // 采样率 单位Hz
      flushTime: 1000, // 缓存时间 单位 ms
    

    this.option = Object.assign(, defaultOption, option) // 实例最终配置参数
    this.samples = new Float32Array() // 样本存放区域
    this.interval = setInterval(this.flush.bind(this), this.option.flushTime)
    this.convertValue = this.getConvertValue()
    this.typedArray = this.getTypedArray()
    this.initAudioContext()
    this.bindAudioContextEvent()
  

  getConvertValue() 
    // 根据传入的目标编码位数
    // 选定转换数据所需要的基本值
    const inputCodecs = 
      Int8: 128,
      Int16: 32768,
      Int32: 2147483648,
      Float32: 1,
    
    if (!inputCodecs[this.option.inputCodec]) 
      throw new Error(
        'wrong codec.please input one of these codecs:Int8,Int16,Int32,Float32'
      )
    
    return inputCodecs[this.option.inputCodec]
  

  getTypedArray() 
    // 根据传入的目标编码位数
    // 选定前端的所需要的保存的二进制数据格式
    // 完整TypedArray请看文档
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray
    const typedArrays = 
      Int8: Int8Array,
      Int16: Int16Array,
      Int32: Int32Array,
      Float32: Float32Array,
    
    if (!typedArrays[this.option.inputCodec]) 
      throw new Error(
        'wrong codec.please input one of these codecs:Int8,Int16,Int32,Float32'
      )
    
    return typedArrays[this.option.inputCodec]
  

  initAudioContext() 
    // 初始化音频上下文的东西
    this.audioCtx = new (window.AudioContext || window.webkitAudioContext)()
    // 控制音量的 GainNode
    // https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/createGain
    this.gainNode = this.audioCtx.createGain()
    this.gainNode.gain.value = 1
    this.gainNode.connect(this.audioCtx.destination)
    this.startTime = this.audioCtx.currentTime
  

  static isTypedArray(data) 
    // 检测输入的数据是否为 TypedArray 类型或 ArrayBuffer 类型
    return (
      (data.byteLength &&
        data.buffer &&
        data.buffer.constructor == ArrayBuffer) ||
      data.constructor == ArrayBuffer
    )
  

  isSupported(data) 
    // 数据类型是否支持
    // 目前支持 ArrayBuffer 或者 TypedArray
    if (!Player.isTypedArray(data))  throw new Error('请传入ArrayBuffer或者任意TypedArray') 
    return true
  

  // 将获取的数据不断累加到 samples 样本存放区域
  feed(data) 
    this.isSupported(data)

    // 获取格式化后的buffer
    data = this.getFormatedValue(data)
    // 开始拷贝buffer数据
    // 新建一个Float32Array的空间， 包含 samples 和传入的 data
    const tmp = new Float32Array(this.samples.length + data.length)
    // 复制当前的实例的buffer值（历史buff)
    // 从头（0）开始复制
    tmp.set(this.samples, 0)
    // 复制传入的新数据
    // 从历史buff位置开始
    tmp.set(data, this.samples.length)
    // 将新的完整buff数据赋值给samples
    // interval定时器也会从samples里面播放数据
    this.samples = tmp
    // console.log('this.samples', this.samples)
  

  getFormatedValue(data) 
    if (data.constructor == ArrayBuffer) 
      data = new this.typedArray(data)
     else 
      data = new this.typedArray(data.buffer)
    

    const float32 = new Float32Array(data.length)

    for (let i = 0; i < data.length; i++) 
      // buffer 缓冲区的数据，需要是IEEE754 里32位的线性PCM，范围从-1到+1
      // 所以对数据进行除法
      // 除以对应的位数范围，得到-1到+1的数据
      // float32[i] = data[i] / 0x8000;
      float32[i] = data[i] / this.convertValue
    
    return float32
  

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

  destroy() 
    if (this.interval) 
      clearInterval(this.interval)
    
    this.samples = null
    this.audioCtx.close()
    this.audioCtx = null
  

  flush() 
    if (!this.samples.length) return
    const self = this
    var bufferSource = this.audioCtx.createBufferSource()
    if (typeof this.option.onended === 'function') 
      bufferSource.onended = function(event) 
        self.option.onended(this, event)
      
    
    const length = this.samples.length / this.option.channels
    // createBuffer：创建AudioBuffer对象 channels: 通道数    length: 一个代表 buffer 中的样本帧数的整数   sampleRate: 采样率
    // 持续时间 = length / sampleRate  length: 22050帧   sampleRate：44100Hz  持续时间 = 22050 / 44100 = 0.5s
    const audioBuffer = this.audioCtx.createBuffer(
      this.option.channels,
      length,
      this.option.sampleRate
    )

    for (let channel = 0; channel < this.option.channels; channel++) 
      // getChannelData： 返回一个 Float32Array,  其中包含与通道关联的 PCM 数据，通道参数定义
      // 参数： channel: 获取特定通道数据的索引
      const audioData = audioBuffer.getChannelData(channel)
      let offset = channel
      let decrement = 50
      for (let i = 0; i < length; i++) 
        audioData[i] = this.samples[offset]
        /* fadein */
        if (i < 50) 
          audioData[i] = (audioData[i] * i) / 50
        
        /* fadeout*/
        if (i >= length - 51) 
          audioData[i] = (audioData[i] * decrement--) / 50
        
        offset += this.option.channels
      
    

    if (this.startTime < this.audioCtx.currentTime) 
      this.startTime = this.audioCtx.currentTime
    
    // console.log('start vs current ' + this.startTime + ' vs ' + this.audioCtx.currentTime + ' duration: ' + audioBuffer.duration);
    bufferSource.buffer = audioBuffer
    bufferSource.connect(this.gainNode)
    bufferSource.start(this.startTime)
    this.startTime += audioBuffer.duration
    this.samples = new Float32Array()
  

  async pause() 
    await this.audioCtx.suspend()
  

  async continue() 
    await this.audioCtx.resume()
  

  bindAudioContextEvent() 
    const self = this
    if (typeof self.option.onstatechange === 'function') 
      this.audioCtx.onstatechange = function(event) 
        self.option.onstatechange(this, event, self.audioCtx.state)
      
    
  

export function createPCMPlayer(data) 
  var PCMPlayer = new Player(data)
  return PCMPlayer

如何将 PCM 音频流转换为在线播放

【中文标题】如何将 PCM 音频流转换为在线播放

【英文标题】：How to convert PCM audio stream for online play

【发布时间】：2015-11-06 17:02:30

【问题描述】：

我可以访问 PCM 音频缓冲区的音频流。我应该清楚我无权访问音频文件。我只能访问 4096 字节的音频数据块流。

PCM 缓冲区采用以下格式：

PCM 诠释 16 小端序 两个通道 交错式

为了在标准浏览器上支持音频播放，我需要将音频转换为以下格式：

PCM 浮点数 32 大端序 两个通道（最多） 去交错

此音频来自 iOS 应用程序，因此我可以访问 Swift 和 Objective C（虽然我对 Objective C 不太满意...这使得 Apple 的 Audio Converter Services 几乎无法使用，因为 Swift 真的不喜欢指针）。

此外，播放将在浏览器上进行，因此我可以在客户端 Javascript 或服务器端处理转换。我精通以下服务器端语言，可以进行转换：

Java（首选） PHP Node.js Python

如果有人知道用这些语言中的任何一种执行此操作的方法，请告诉我。我已经在这方面工作了足够长的时间，以至于我可能会理解如何做到这一点的非常技术性的描述。

我目前的计划是使用按位运算来解交织左右声道，然后使用Web Audio API 将 Int 16 Buffer 转换为 Float 32 Buffer。这看起来是个好计划吗？

感谢您的帮助，谢谢。

【参考方案1】：

我目前的计划是使用按位运算来解交织左右声道，然后使用 Web Audio API 将 Int 16 缓冲区转换为 Float 32 缓冲区。这看起来是个好计划吗？

是的，这正是您需要做的。我在我的应用程序中做同样的事情，这种方法效果很好，并且确实是唯一有意义的方法。由于带宽量，您不想从服务器向客户端发送 32 位浮点样本。在客户端进行转换。

【讨论】：

非常感谢。很多事情都失败了，我想确保这种按位策略没有根本上的缺陷。如果您不介意后续问题，您发现将音频数据从手机发送到客户端的最佳方式是什么？这是一个 Chromecast 应用程序，因此所有数据都必须是文本的。现在我将音频数据作为 base 64 编码字符串发送（据我所知，这是将文本数据发送到浏览器的唯一方法）。我更愿意发送一个 UTF-16 字符串，但我担心 Javascript 无法正确解析它。

@WilliamRosenbloom 您实际上可以通过 websocket 发送二进制数据。现代 JavaScript 实现支持类型化数组，因此您可以拥有最原始有效形式的 16 位样本数组。 BinaryJS 为你包装了这个。 (binaryjs.com) 您可以在客户端和服务器之间打开任意流。

我仍然遇到一些麻烦。解码后的音频中有很多噪音。如果您能看看我的next question，我将不胜感激。再次感谢您。