Запишите 5-секундные фрагменты звука с помощью MediaRecorder, а затем загрузите на сервер

Вы должны понимать, как создаются медиафайлы.
Это не только необработанные данные, которые можно напрямую преобразовать в аудио или видео.

Это будет зависеть от выбранного формата, но в основном у вас есть так называемые метаданные, которые похожи на словарь, описывающий структуру файла.

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

API MediaRecorder здесь находится в странном положении, поскольку он должен иметь возможность одновременно записывать эти метаданные, а также добавлять неопределенные данные (это живые рекордер).

Итак, что происходит, браузеры помещают основные метаданные в начало файла таким образом, чтобы они могли просто помещать новые данные в файл, оставаясь при этом действительным файлом ( даже если некоторая информация, такая как продолжительность, будет отсутствовать).

Теперь то, что вы получаете в datavailableEvent.data, - это только часть создаваемого файла.
Первый, как правило, будет содержать метаданные и некоторые другие данные, в зависимости от того, когда событие было приказано запустить, но следующие части не обязательно будут содержать какие-либо метаданные.

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

Итак, к вашей проблеме у вас есть разные возможные подходы:

• Вы можете отправлять на свой сервер последние фрагменты, которые вы получили с записывающего устройства, через определенный интервал, и объединять их на стороне сервера.

  const recorder = new MediaRecorder(stream);
  const chunks = [];
  recorder.ondataavailable = e => chunks.push(e.data);
  recorder.start(); // you don't need the timeslice argument
  setInterval(()=>{
    // here we both empty the 'chunks' array, and send its content to the server
    sendToServer(new Blob(chunks.splice(0,chunks.length)))
  }, 5000);
  

  А на стороне сервера вы добавляете вновь отправленные данные в записываемый файл.

• Другой способ - создать множество небольших автономных файлов, и для этого вы можете просто сгенерировать новый MediaRecorder через определенный интервал:

  function record_and_send(stream) {
     const recorder = new MediaRecorder(stream);
     const chunks = [];
     recorder.ondataavailable = e => chunks.push(e.data);
     recorder.onstop = e => sendToServer(new Blob(chunks));
     setTimeout(()=> recorder.stop(), 5000); // we'll have a 5s media file
     recorder.start();
  }
  // generate a new file every 5s
  setInterval(record_and_send, 5000);
  

  При этом каждый файл будет автономным с продолжительностью примерно 5 секунд, и вы сможете воспроизводить эти файлы один за другим.
  Теперь, если вы хотите сохранить только один файл на сервере, продолжайте использовать этот метод , вы можете очень хорошо объединить эти файлы вместе и на стороне сервера, используя, например, такой инструмент, как ffmpeg .