从 Node/Express 服务器在 React 中播放音频数据

Question

我目前正在开发一项功能，允许从我的 Node 服务器在 React 中流式传输音频文件。

我设置了服务器端，所以 GET 路由 returns 这样：

res.set('content-type', 'audio/mp3');
res.set('accept-ranges', 'bytes');

file.createReadStream().on("error", (err) => {
    console.log(err);
    res.status(400).json({message: "Couldn't read file" })
}).on("data", (chunk) => {
    res.write(chunk);
}).on("end", () => {
    res.end();
})

在使用 postman 进行测试时，这可以完美地获取音频（但显然不是流式传输）。

我现在想知道在客户端处理响应的最佳方式是什么。我目前正在使用 Axios 与后端进行通信。我希望能够在响应中提供一些数据后立即播放音频。

谢谢！

Answer 1

只需使用一个 HTMLAudioElement。它将为您处理所有的流媒体方面，包括 HTTP 请求、缓冲、解码和播放。

在 server-side 上，您需要支持远程请求。此处最简单的做法是使用 express.static()，因为您不是动态生成数据。

从 Node/Express 服务器在 React 中播放音频数据

Playing audio data in React from Node/Express server

javascript

audio-streaming

node.js

reactjs

axios