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

Question

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

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

F12：

Answer 1

该回答引用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();
  });

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