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

Question

我正在使用 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，但我一辈子都弄不明白。 令人气愤的是 Postman 自动执行此操作 哈哈 ..：但也给我希望！ 谢谢你的帮助 ：）

Postman 中服务器响应的 e.headers

ea 查看我的 res.data object 日志和我创建的 blob

Answer 1

你可以做两件事。

1. 如果你得到 blob，你可以像下面一样直接使用它- <audio controls src="data:audio/mp3;base64, ...
2. 在音频标签中，您可以直接传递 URL，如下所示 -

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