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

Question

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

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

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

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

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

Answer 1

流式播放呗？

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

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

Answer 2

要实现你所描述的功能，你需要实时处理音频流并将其直接播放，而不是等待所有数据都接收完毕后再进行播放。这可以通过使用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 候选者，以便在浏览器之间建立连接并传输音频流。