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

ccy607

已于 2022-11-26 10:37:04 修改

阅读量3.3k

点赞数 2

分类专栏： js 文章标签：音视频 pcm 前端

于 2022-11-24 10:53:46 首次发布

本文链接：https://blog.csdn.net/ccy607/article/details/126854592

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

转载

类型化数组是建立在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
}