Нет метаданных при записи аудиофайла с помощью MediaRecorder

Для своего проекта я записываю пользовательский звук с помощью MediaRecorder, и он почти отлично работает. Моя проблема возникает, когда я хочу отобразить форму волны записи пользователя с помощью Wavesurfer.js, который не загружает мою запись. Однако воспроизведение записи с помощью элемента Audio работает нормально.

Попробовав разные источники, кажется, что это связано с тем, что окончательный файл .webm не имеет большого количества метаданных, даже продолжительности или битрейта (хотя я установил его в параметрах MediaRecorder). Вот результат работы ffprobe с одним из файлов:

Input #0, matroska,webm, from '206_3.webm':
Metadata:
encoder : Chrome
Duration: N/A, start: 0.000000, bitrate: N/A
Stream #0:0(eng): Audio: opus, 48000 Hz, mono, fltp (default)

Итак, мой вопрос: я что-то делаю не так, чтобы записывать звук? Вот как я начинаю запись:

// Somewhere in the code...
this._handleUserMedia(await navigator.mediaDevices.getUserMedia({ audio: true }));

// ... and elsewhere
_handleUserMedia(stream) {
    this._mediaRecorder = new MediaRecorder(stream, { audioBitsPerSecond : 64000 });

    this._mediaRecorder.ondataavailable = event => {
      this._mediaBuffer.push(event.data);
    };

    this._mediaRecorder.onstop = () => {
      // Ajoute le buffer et une URL vers le buffer dans les résultats pour la sauvegarde et le playback
      let blob = new Blob(this._mediaBuffer, { type: "audio/webm" });
      this.state.results[this.state.currentWordIdx].recordingBlob = blob;
      this.state.results[this.state.currentWordIdx].recordingUrl = URL.createObjectURL(blob);

      // Réinitialise le buffer pour l'enregistrement suivant
      this._mediaBuffer = [];

      this._gotoNextWord();
    };

    this._gotoNextWord();
  }

Как видите, я создаю blob-объект, который позже сохраняю с помощью NodeJS fs.writeFile. Затем, когда мне нужно отобразить сигнал, я загружаю файл с помощью fs.readFile следующим образом:

fs.readFile(`${this.getAppData()}/${filePath}`, (err, buffer) => {
    if (err) { reject(err); }
    const blob = new Blob([buffer], {type : 'audio/webm'});
    resolve(URL.createObjectURL(blob)); // Si besoin d'un ArrayBuffer => toArrayBuffer(buffer)
});

ты нашел решение своей проблемы?

Ali Sajid 04.11.2019 15:04

Я не. С тех пор я ушел из проекта.

Jeahel 04.11.2019 15:10
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
8
2
652
1

Ответы 1

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

Спецификация недавно разрешила установить постоянный битрейт для записи с реализация скоро появится в Chromium (M89)

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