音频流ACC在IOS浏览器中如何进行播放

因为音频流ACC 在IOS 浏览器中无法使用MediaSource 来进行播放,可以使用 通过存储buffer 然后达到一定量的数据然后就进行播放

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
let bufferLengthArr = new ArrayBuffer(0); // 储存 ws返回的buffer
const decodedBuffers = []; // 存储音频流的代码
const maxBuffLength = 10240; // 最大buffer长度
// 封装webSocket 并且在连接的时候触发对应的操作
 new WebSocketMethod({
    url: `url`,
    onOpen() {
      audioSocketSend({ type: "audio", detail: "scrcpy" });
      if (systemInfo.platform !== "ios") {
        // 安卓操作
      } else {
        // ios 操作
        startBuffer();
      }
    },
    onMessage(event) {
      if (systemInfo.platform !== "ios") {

      } else {
        // ios 操作
        iosOnMessage(event);
      }
    },
  });
  


//  ios 音频播放
const startBuffer = () => {
// 存储音频的数据为空时就递归当前的自己
  if (!decodedBuffers.length) {
    setTimeout(startBuffer, 1);
    return false;
  }
  // 进行播放声音
  const source = audioCtx.createBufferSource();
  source.buffer = decodedBuffers.shift();
  source.connect(audioCtx.destination);
  source.start(0); // 立即播放音频
  source.onended = () => {
  // 播放完成以后在继续进行播放
    startBuffer();
  };
};

// ios 添加流
const iosOnMessage = (event) => {
// 进行流拼接
  bufferLengthArr = appendBuff(bufferLengthArr, event.data);
  if (bufferLengthArr.byteLength >= maxBuffLength) {
    // 继续解构赋值给新的流
    const deconstructBuffer = appendBuff(bufferLengthArr, new ArrayBuffer(0));
    // 重置合流数据
    bufferLengthArr = new ArrayBuffer(0);
    // 进行解码并且添加到数组内
    audioCtx.decodeAudioData(deconstructBuffer).then((buffer) => {
      decodedBuffers.push(buffer);
    });
  }
};

// buff 拼接
const appendBuff = (target, newBuff) => {
  // 总长度
  const totalLength = target.byteLength + newBuff.byteLength;

  // 在 TypedArray 构造函数里传入一个数字,构建指定长度的内存片段
  const uint8 = new Uint8Array(totalLength);

  // 使用 set 方法把 ArrayBuffer 依次添加进去
  // Uint8Array.set(array: ArrayLike<number>, offset?: number | undefined): void
  uint8.set(new Uint8Array(target));
  uint8.set(new Uint8Array(newBuff), target.byteLength);

  // 返回 TypedArray 的 ArrayBuffer 数据
  return uint8.buffer;
};
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值