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），浏览器应该播放它。

播放音频-React / NodeJS / MongoDB- GridFS

1 个答案: