Использование файла blobs на реакции

Question

Я создал приложение, которое скачивает архив с сервера.Этот файл содержит несколько mp3-файлов.Я хотел бы извлечь этот zip-файл в браузере клиента и после попытки воспроизвести его на HTML-теге.

Я уже преобразовал извлеченные файлы в байтовый массив на клиенте и после преобразования каждого байтового массива на объектах BLOB-объектов.Я хотел бы сейчас просто запустить этот звук на аудио теге, но это не работает.

Вот мой код, который отвечает за извлечение zip-файла и преобразование его в BLOB-объект.Я использую реагировать JS.

export const extractFilesFromZip = blobFile => {
    return new Promise((resolve) => {
        const zip = new JSZip();
        zip.loadAsync(blobFile).then(zipFiles => {
            const readedFiles = [];

            for(let key in zipFiles.files){
                const binary = zipFiles.files[key]._data.compressedContent;
                const blob = new Blob([binary], {type: 'audio/ogg'});
                const blobUrl = URL.createObjectURL(blob);
                readedFiles.push({name: key, blobUrl: blobUrl});
            }

            resolve(readedFiles);
        });
    })
}

<audio controls autoPlay
 src={`${decompresedSounds[currentPlayingSoundIndex].blobUrl}`} type="audio/ogg">
 </audio>