Записываем звук с микрофона в браузере!

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

Для начала запрашиваем у пользователя доступ к микрофону (работает только в HTTPS или localhost окружении):
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });

Перед созданием рекордера желательно проверить поддерживаемый формат:
const mimeType = MediaRecorder.isTypeSupported('audio/webm;codecs=opus')
? 'audio/webm;codecs=opus'
: 'audio/webm';

Создаём рекордер для записи аудио:
const recorder = new MediaRecorder(stream, { mimeType });

Подготавливаем массив для аудио-чанков и подписываемся на событие dataavailable:
(срабатывает минимум при stop(), а при использовании timeslice — периодически):
const chunks = [];

recorder.ondataavailable = (e) => {
if (e.data && e.data.size > 0) {
chunks.push(e.data);
}
};

Запускаем запись (при необходимости можно передать timeslice, например recorder.start(1000)):
recorder.start();

Останавливаем запись, например, через 5 секунд:
setTimeout(() => {
recorder.stop();
}, 5000);

После остановки записи собираем аудио в единый файл и воспроизводим его:
recorder.onstop = () => {
const blob = new Blob(chunks, { type: mimeType });
const url = URL.createObjectURL(blob);

const audio = document.createElement('audio');
audio.controls = true;
audio.src = url;

document.body.append(audio);

Воспроизведение может быть ограничено политикой autoplay:
audio.play().catch(() => {});

Освобождаем ресурсы после использования:
audio.onended = () => {
URL.revokeObjectURL(url);
};

stream.getTracks().forEach(track => track.stop());
};

Формат аудио зависит от браузера — при необходимости проверяйте поддержку через MediaRecorder.isTypeSupported() и задавайте mimeType явно.

Code Ready | #практика