node.js - 播放音频-React/NodeJS/MongoDB- GridFS

Question

我有以下项目结构:

NodeJS是我的后端:用于在mongodb上上传.mp3并将其流式传输。我使用GridFsBucket进行上传/流

React是我的前端，并且与Redux商店一起工作:因此，我有两页，第一页用于使用FormData上传.mp3文件，第二页用于音频流播放。

我的上传阶段工作良好，我将所选的.mp3文件推送到后端，并在GridFS的帮助下在MongoDB上创建了我的集合(fs.files和fs.chunks)。

我从http://site:4000/play/myMp3Code的后端播放.mp3，这将创建一个播放我的.mp3的播放器。这样就可以了

我的问题是在React的流播放阶段，因为块(是块吗？)来自Redux，但我不知道如何从我的React网页上播放它。

这是我在后端的处理方式

const filename = req.params.filename;

        const bucket = new mongoose.mongo.GridFSBucket(mongoose.connection.db, {
            chunkSizeBytes: 1024,
            bucketName: 'fs'
        });

        const downloadStream = bucket.openDownloadStreamByName(filename);

        downloadStream.on('data', (chunk) => {
            res.write(chunk);
        });

        downloadStream.on('error', () => {
            res.sendStatus(404);
        });

        downloadStream.on('end', () => {
            res.end();
        });

我对Redux的行动

export const playTrack = (path, id) => {
    return async dispatch => {
        try {
            const track = await api.call('get',`tracks/${path}/${id}`);

            console.log("Track action: ", track);

        dispatch(currentTrack(track));
            dispatch(removeError());
        } catch (err) {
            const {error} = err.response.data;
            dispatch(addError(error.message));
        }
    };
};

Redux操作的console.log输出示例

���T!1AQa"q��2�#BR������3brCS��$���4Tcs�D��%��EUd����5����+!1AQ"2aBq#R3�$��?��v�.A  �UY�d[MVj�?�  1u
��D���MM1�u*곧TXR��X��A ,ְ���+#h�J��*)gQ��i�R:�Ut5�9���Ŋ�)ע%�r�X��c�&ȣ�����GD�B=c^�6T� 2y,�F���\*��
�H���*�Lҋ ....

我的问题如下:如何直接从前端播放.mp3？
我可以播放Reat的上述数据吗？

希望我解释得很好。
感谢您的回答和阅读

Answer 1

我认为流是可以的，您所要做的就是发送带有正确标题的响应:(内容类型:音频/ mpeg)，浏览器应该播放它。