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

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

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

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

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

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

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

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

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

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

  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 .