Для моего проекта я записываю пользовательское аудио с помощью MediaRecorder, и оно почти нормально работает. Моя проблема возникает, когда я хочу отобразить форму волны пользовательской записи, используя Wavesurfer.js, который не загружает мою запись. Тем не менее, воспроизведение записи с использованием элемента Audio работает нормально.
После попытки использовать разные источники, кажется, что в конечном файле .webm нет большого количества метаданных, даже продолжительности или битрейта (даже если я установил его в параметрах MediaRecorder).
Вот вывод из ffprobe с одним из файлов:
Ввод # 0, matroska, webm, из '206_3.webm':
Метаданные:
кодировщик: Chrome
Продолжительность: N / A, начало: 0,000000, битрейт: N / A
Поток № 0: 0 (англ): аудио: opus, 48000 Гц, моно, fltp (по умолчанию)
Итак, мой вопрос: я делаю что-то не так для записи звука? Вот как я начинаю запись:
// 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-объект, который позже сохраняю с помощью fs.writeFile
NodeJS. Затем, когда мне нужно отобразить форму сигнала, я загружаю файл, используя 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)
});