Как правильно воспроизвести несколько аудио blob-ов?

[Lun2]

Добрый вечер!

Для записи звука через микрофон я использую событие dataavailable у объекта MediaRecorder.

Запись разбивается с помощью параметра timeslice метода MediaRecorder.start(timeslice).

Через каждые timeslice миллисекунд я получаю аудио blob, но если пытаюсь проиграть эти blob'ы
по отдельности, то только первый из них проигрывается нормально, а 2-ой и далее не проигрываются
вообще, т.к. плейер не может раскодировать данные.
На stackoverflow я прочитал, что эти части-blob-ы не являются независимыми - я так понял, что их нельзя проигрывать по отдельности, а только всей кучей.

Я же хочу сделать потоковую запись аудио блобов, передачу на сервер, а он разошлет клиентам для проигрывания (звуковой чат). Понятно, что 2-ой и далее звуковые блобы проигрываться не будут на клиентах.

Вопрос: как обойти эту проблему, т.е. сделать, чтобы рекордер записывал небольшие звуковые куски речи timeslice миллисекунд, которые смогут проигрываться отдельно друг от друга ?

[Lun2]

Добрый вечер!
Вижу мой вопрос висит без ответа. Попытаюсь переформулировать:
имеется такой код, который записывает звук и каждые 0,5 секунд формирует очередную "порцию" звука
После окончания записи будет воспроизводиться первая порция - data[0].

Каким образом модифицировать код, чтобы после воспроизведения data[0] аудиоплейер генерировал событие, в котором запрашивал бы очередную порцию звука, обработчик события подсунет ему data[1] и так далее.

Я знаю, что можно сразу отдать на проигрывания весь массив data, но мне нужен механизм - чтобы плейер запрашивал очередную порцию данных - пока не не разобрался с ним - прошу подсказать.

navigator.mediaDevices.getUserMedia({audio:true})
.then(function onSuccess(stream) {
const recorder = new MediaRecorder(stream);

const data = [];
recorder.ondataavailable = (e) => {
data.push(e.data);
};
recorder.start(500); // каждые 0,5 секунд генерировать событие dataavailable

recorder.onstop = (e) => {
const audio = document.createElement('audio');
audio.src = window.URL.createObjectURL(new Blob( data[0] ));
}
setTimeout(() => {
rec.stop();
}, 5000);
})
.catch(function onError(error) {
console.log(error.message);
});