Воспроизведение аудио - React / NodeJS / MongoDB- GridFS

Question

У меня есть следующая структура проекта:

• NodeJS - мой бэкэнд: используется для загрузки.mp3 на мой mongodb и потокового воспроизведения. Я использовал GridFsBucket для загрузки / потока
• React - мой интерфейс и работа с магазином Redux: у меня две страницы: первая для загрузки файла.mp3 с FormData, а вторая для потокового воспроизведения аудио.

Мой этап загрузки работает хорошо, я помещаю выбранный файл.mp3 на свой сервер и с помощью GridFS создаю свои коллекции на моем MongoDB (fs.files и fs.chunks).

Я играю свой.mp3 из бэкэнда по адресу http://site:4000/play/myMp3Code, это создает плеер, который воспроизводит мой.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));
        }
    };
};

Пример вывода console.log из действия Redux

���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

Я думаю, что поток в порядке, все, что вам нужно сделать, это отправить ответ с правильными заголовками: (Content-Type: audio/mpeg), и браузер должен воспроизвести его.