在js中如何实现音频的流式播放？

Question

在js中如何实现音频的流式播放，即边接收语音数据边播放，减少延时？

目前已成功调用了阿里云的语音合成接口，并将返回的每一包语音流通过socket传到js中，最后如何在js中实现流式播放，即边接收语音数据边播放，减少延时。可能受限于我的技术水平，试过网上的各种方法效果都不理想，还请各位帮忙解决，谢谢~

Answer 1

// 创建AudioContext对象
const audioContext = new (window.AudioContext || window.webkitAudioContext)();

// 创建GainNode对象来控制音量
const gainNode = audioContext.createGain();
gainNode.connect(audioContext.destination);

// 创建一个用于存储音频数据的数组
let audioData = [];

// 创建WebSocket连接
const socket = new WebSocket('wss://你的服务器地址');

// 监听WebSocket消息
socket.addEventListener('message', (event) => {
  // 接收音频数据
  const audioChunk = event.data;

  // 将音频数据存储到数组中
  audioData.push(audioChunk);

  // 如果数组中的数据足够多，就开始播放
  if (audioData.length > 5) {
    playAudio();
  }
});

function playAudio() {
  // 创建一个可变长度的数组缓冲区
  const audioBuffer = audioContext.createBuffer(1, audioData.length, audioContext.sampleRate);
  const channelData = audioBuffer.getChannelData(0);

  // 将接收到的音频数据拷贝到数组缓冲区中
  for (let i = 0; i < audioData.length; i++) {
    channelData[i] = audioData[i];
  }

  // 创建一个音频源节点
  const source = audioContext.createBufferSource();
  source.buffer = audioBuffer;
  source.connect(gainNode);

  // 播放音频
  source.start();

  // 清空音频数据数组
  audioData = [];
}