如何播放二进制音频流且能拼接长度？

Question

如何播放二进制音频流且能拼接长度？

如图通过ws能一直接收二进制音频流直到结束

// * 将所有二进制流推进一个数组 - audioArray 
const blob = new Blob(audioArray, { type: 'audio/mp3' })
new Audio(URL.createObjectURL(blob)).play()

此代码能整合所有音频流并播放，但这种方式需要等待传输完成后才能播放

如何能在接收第一段音频流时就开始播放，后续到达的流继续附加在后面播放

求各位大佬提供个思路(如果有代码就更好了~)

javascript webrtc 二进制音频

阅读 1.5k

AI BotBETA

要实现你所描述的功能，你需要实时处理音频流并将其直接播放，而不是等待所有数据都接收完毕后再进行播放。这可以通过使用WebRTC（Web Real-Time Communication）来实现。WebRTC 允许在浏览器之间直接传输媒体流，包括音频和视频。

以下是一个简单的示例代码，演示如何使用 WebRTC 实时播放音频流：

// 创建新的 RTCPeerConnection 实例
const pc = new RTCPeerConnection();

// 假设你已经有了音频流的 SDP 描述和 ICE 候选者
const sdpDescription = {
  type: 'offer',
  sdp: '...' // 音频流的 SDP 描述
};
const iceCandidate = {
  candidate: 'candidate:...', // ICE 候选者
  sdpMid: 'audio',
  sdpMLineIndex: 0
};

// 设置 SDP 描述和 ICE 候选者
pc.setRemoteDescription(sdpDescription);
pc.addIceCandidate(iceCandidate);

// 添加数据信道以接收音频流
pc.createDataChannel('audio');

// 创建音频上下文并获取音频流
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    const audioSource = audioContext.createMediaStreamSource(stream);
    const audioDestination = audioContext.createMediaStreamDestination();
    pc.connectDataChannel(audioDestination); // 将音频流连接到数据通道上
    audioSource.connect(audioDestination); // 将音频源连接到音频目标上
    pc.ondataavailable = event => {
      // 当收到新的音频数据时，将其解码并播放
      const audioData = event.data;
      const decodedData = audioContext.decodeAudioData(audioData);
      audioContext.destination.play(decodedData);
    };
  })
  .catch(error => {
    console.error('Error:', error);
  });

这段代码中，我们首先创建了一个新的 RTCPeerConnection 实例。然后，我们假设已经有了音频流的 SDP 描述和 ICE 候选者，并将其设置到 RTCPeerConnection 上。接下来，我们创建了一个数据通道用于接收音频流，并将音频上下文、用户音频流、音频源和音频目标连接在一起。最后，我们监听 RTCPeerConnection 的 ondataavailable 事件，当收到新的音频数据时，将其解码并播放。

请注意，这只是一个简单的示例代码，仅用于演示基本概念。在实际应用中，你需要处理更多的细节和错误情况。此外，你还需要实现信令机制来交换 SDP 描述和 ICE 候选者，以便在浏览器之间建立连接并传输音频流。

1 个回答

得票最新

然后去远足

42.5k93763

发布于
1 月 26 日美国

流式播放呗？

试试 AudioContext，有个 createMediaStreamSource 的 API，就是用于流式播放的。

GitHub 上用 “streaming audio play” 做关键字应该能搜到一些示例。

撰写回答