如何将二进制文件从服务器转回音频文件？答案

【问题标题】：How to turn binary from server back into audio file?如何将二进制文件从服务器转回音频文件？
【发布时间】：2023-01-10 13:12:54
【问题描述】：

我正在使用 express 的 res.sendFile() 将 .mp3 文件从我的服务器发送到我的客户端作为对发布请求的响应。

我一直无法将数据字符串（我认为是二进制的？）转换回我的 Web 应用程序可用的格式。（理想情况下，将其用作 <audio> 元素）。

当我使用 Postman 访问这条路线时，它似乎正在运行 - 响应的“正文”在 Postman 的应用程序中打开了一个可用的音频播放器（如下图所示）。这告诉我服务器端没有问题。在我的客户端代码中，我尝试使用服务器响应的数据属性创建一个新的 Blob，然后使用该 Blob 获取 HTML <audio> 元素。这是从我的 axios.post() 响应开始的样子：

.then((res) => {
  const blob = new Blob([res.data], {type: 'audio/mpeg'})
  sendBlobToAnotherComponent(blob)
})

//== send the blob to the appropriate .jsx element (using React) ==\\

<audio
  controls
  src={URL.createObjectURL(blob)}>
</audio>

我相当有信心我只是错误地构建了这个 Blob，但我一辈子都弄不明白！邮递员自动执行此操作真是令人生气，哈哈……但也给我希望！谢谢你的帮助：）

e.headers on the response from server in Postman

ea look at my logs of the res.data object and the blob I create

【问题讨论】：

标签： javascript blob mp3 html5-audio mpeg

【解决方案1】：

你可以做两件事。

如果你得到 blob，你可以像下面这样直接使用它- <音频控制 src="data:audio/mp3;base64, ...

在音频标签中，您可以直接传递如下 URL -

<audio
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/858/outfoxing.mp3"
        controls
      />

【讨论】：