前端怎么响应二进制流啊，或者播放wav文件

问题：后台直接返回的bytes文件流前端无法播放，现在需要前端播放后台返回的音频，当前系统的音频并不是来自于自身
后端：
说明：当前系统A接受到用户请求后会将请求转发给系统B,系统B返回的是.wav的音频文件；不考虑将系统B的文件下载到本地然后返回url的方法

img


前端：
说明：前端需要响应后台的bytes音频流

img


F12：

img

该回答引用chatgpt:
在前端中，可以通过 Audio 对象播放音频文件，而将二进制流转化为 Audio 对象的方法有很多种。以下是其中两种可能的方法：

将二进制流转化为 Blob 对象，然后使用 URL.createObjectURL() 方法创建 URL，再将 URL 作为 Audio 对象的 src 属性的值，最后调用 play() 方法播放音频。

fetch(url)
  .then(res => res.blob())
  .then(blob => {
    const audio = new Audio();
    audio.src = URL.createObjectURL(blob);
    audio.play();
  });

直接将二进制流转化为 base64 编码的字符串，然后将该字符串作为 data URI 的一部分，最后将 data URI 赋给 Audio 对象的 src 属性。


fetch(url)
  .then(res => res.arrayBuffer())
  .then(buffer => {
    const dataUri = 'data:audio/wav;base64,' + btoa(String.fromCharCode(...new Uint8Array(buffer)));
    const audio = new Audio();
    audio.src = dataUri;
    audio.play();
  });

需要注意的是，这两种方法都可能存在兼容性问题，因此建议在不同浏览器中进行测试。另外，在使用第二种方法时，如果音频文件过大，可能会导致浏览器崩溃或卡顿，因此最好使用第一种方法

考虑下使用OutputStream返回音频数据，要不然可能收到到blob

img

引用chatGPT作答，要在前端中播放二进制流音频文件，你可以使用HTML5中的

1.从后端接收到二进制流音频文件后，使用Blob对象将其转换为URL对象：

let blob = new Blob([音频文件的二进制流], { type: 'audio/wav' });
let audioUrl = URL.createObjectURL(blob);

注意：这里的audio/wav应该根据实际音频文件的格式进行相应的修改。

2.在HTML中添加

<audio controls autoplay>
    <source src="音频文件的URL" type="audio/wav">
</audio>

controls属性表示显示浏览器默认的音频控制条，autoplay属性表示自动播放音频。

完整的代码示例：

let blob = new Blob([音频文件的二进制流], { type: 'audio/wav' });
let audioUrl = URL.createObjectURL(blob);

let audioElement = document.createElement('audio');
audioElement.setAttribute('controls', '');
audioElement.setAttribute('autoplay', '');
audioElement.innerHTML = `<source src="${audioUrl}" type="audio/wav">`;

document.body.appendChild(audioElement);

注意：在不需要使用这个URL对象时，需要通过URL.revokeObjectURL()方法释放URL对象所占用的内存：

URL.revokeObjectURL(audioUrl);

以下答案由GPT-3.5大模型与博主波罗歌共同编写：
前端可以使用 AudioContext 和 fetch API 进行解决，具体步骤如下：

  1. 通过 fetch 请求获取音频二进制流，并将其转换为 ArrayBuffer。

示例代码：

fetch(url)
  .then(response => response.arrayBuffer())
  .then(arrayBuffer => {
    // 处理二进制流数据
  });
  1. 创建 AudioContext 对象和 AudioBufferSourceNode 对象。先通过 decodeAudioData 方法对 ArrayBuffer 进行解码获取 AudioBuffer 对象，再将其赋值给 AudioBufferSourceNode 的 buffer 属性。

示例代码：

const audioContext = new AudioContext();
const audioBufferSourceNode = audioContext.createBufferSource();

audioContext.decodeAudioData(arrayBuffer)
  .then(audioBuffer => {
    audioBufferSourceNode.buffer = audioBuffer;
    // 其他相关设置，比如音量等
  });
  1. 调用 AudioBufferSourceNode 对象的 start 方法进行播放。

示例代码：

audioBufferSourceNode.connect(audioContext.destination);
audioBufferSourceNode.start();

完整的示例代码：

fetch(url)
  .then(response => response.arrayBuffer())
  .then(arrayBuffer => {
    const audioContext = new AudioContext();
    const audioBufferSourceNode = audioContext.createBufferSource();

    audioContext.decodeAudioData(arrayBuffer)
      .then(audioBuffer => {
        audioBufferSourceNode.buffer = audioBuffer;
        audioBufferSourceNode.connect(audioContext.destination);
        audioBufferSourceNode.start();
      })
      .catch(error => {
        console.error('解码音频数据出错：', error);
      });
  })
  .catch(error => {
    console.error('获取音频数据出错：', error);
  });

这样可以直接在前端播放后端返回的音频数据。
如果我的回答解决了您的问题，请采纳！