Аудиозапись Javascript MediaRecorder повреждена

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

Я использую MediaRecorder, чтобы начать запись, и я хочу отправить ее в виде файла на свой сервер Flask через форму. Однако то, что я получаю, представляет собой поврежденный файл, который иногда воспроизводится на моем рабочем столе, но не на моем мобильном телефоне. Я думаю, что это связано с различными поддерживаемыми типами mimeType и с тем, как преобразуется большой двоичный объект.

Вот код JavaScript:

function record_audio(){
    if (state == "empty"){
    navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
      mediaRecorder = new MediaRecorder(stream); 
      mediaRecorder.start();

      state = "recording";
      document.getElementById('stop_btn').style.display = 'block'

      seconds_int = setInterval(
      function () {
        document.getElementById("record_btn").innerHTML = seconds_rec + " s";
        seconds_rec += 1;
    }, 1000);

      
      mediaRecorder.addEventListener("dataavailable", event => {
        
        audioChunks.push(event.data);
        if (mediaRecorder.state == 'inactive')  makeLink();
      });
  }
}

function makeLink(){
      const audioBlob = new Blob(audioChunks, {type: 'audio/mpeg'});
      
      const audioUrl = URL.createObjectURL(audioBlob);
      var sound      = document.createElement('audio');
      sound.id       = 'audio-player';
      sound.controls = 'controls';
      sound.src      = audioUrl;
      console.info(audioBlob)
      sound.type     = 'audio/mpeg';
      document.getElementById("audio-player-container").innerHTML = sound.outerHTML;
      
      let file = new File([audioBlob], "audio.mp3",{ type:"audio/mpeg",lastModifiedDate: new Date()});
      let container = new DataTransfer();
      container.items.add(file);
      document.getElementById("uploadedFile").files = container.files;

};

Спасибо за вашу помощь!

Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
В этом руководстве вы узнаете, как использовать API парсинга квитанций за 5 минут с помощью JavaScript. Eden AI предоставляет простой и удобный для...
Хук useOnClickOutside в ReactJS
Хук useOnClickOutside в ReactJS
Как разработчик ReactJS, вы, возможно, сталкивались с ситуацией, когда вам нужно закрыть модальное или выпадающее меню, когда кто-то щелкает за его...
Хуки (часть-2) - useEffect
Хуки (часть-2) - useEffect
Хук useEffect - один из самых мощных и универсальных инструментов в арсенале разработчика React. Он позволяет вам управлять побочными эффектами в...
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
В предыдущем посте я показал вам на примерах, как писать базовые тесты в React. Важнейшей частью пользовательского интерфейса приложений является...
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
Создайте титры как в звездных войнах с помощью CSS и Javascript
Создайте титры как в звездных войнах с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
0
0
70
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Аудио, которое вы записали, скорее всего, не того типа 'audio/mpeg'. Ни один браузер не поддерживает это из коробки.

Если вы вызовете new MediaRecorder(stream) без дополнительного второго аргумента, браузер выберет кодек, который ему больше нравится. Вы можете использовать свойство mimeType, чтобы узнать, какой кодек используется браузером. Например, его можно использовать для построения Blob.

const audioBlob = new Blob(
    audioChunks,
    {
        type: mediaRecorder.mimeType
    }
);

Вам также нужно будет использовать его аналогичным образом при создании File. И вам, вероятно, также необходимо адаптировать логику вашего бэкэнда для обработки файлов, которые не являются MP3.

Ах здорово, спасибо! Однако, если я читаю mimeType MediaRecorder, он пуст, когда я не устанавливаю его в параметрах.

Josef Alexander 22.11.2022 23:35

Если я правильно помню, в настоящее время в Firefox есть ошибка. Он не показывает значение по умолчанию mimeType. Но вы можете получить его, когда получите первое событие dataavailable. Blob будет правильным mimeType.

chrisguttandin 23.11.2022 20:53

Другие вопросы по теме