Запись и загрузка аудиофайла на сервер с HTML5

Быстрый ответ

Для записи аудио в HTML5 необходимо использовать API getUserMedia() от MediaDevices для доступа к микрофону и MediaRecorder для записи звука. Затем данные с аудиозаписью можно сохранить в объекте Blob, чтобы пользователь мог скачать их.

Приведем пример кода для записи аудио:

navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
  const mediaRecorder = new MediaRecorder(stream);
  let audioChunks = [];

  mediaRecorder.ondataavailable = e => audioChunks.push(e.data);
  mediaRecorder.onstop = () => {
    const audioBlob = new Blob(audioChunks);
    const audioUrl = URL.createObjectURL(audioBlob);
    const link = document.createElement('a');
    link.href = audioUrl;
    link.download = 'recording.webm';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  mediaRecorder.start();
  setTimeout(() => mediaRecorder.stop(), 3000);
}).catch(console.error);

Обратите внимание на обеспечение получения согласия пользователя и обработку исключений для стабильной работы.

Экспорт и скачивание аудиофайла

Для сохранения аудио в формате .wav используйте метод exportWAV:

recorder.exportWAV(blob => {
  // Обрабатывайте blob-объект по своему усмотрению: отправьте его на сервер или сделайте что-то еще
});

Для немедленного скачивания аудиофайла используйте метод forceDownload:

recorder.exportWAV(blob => {
  Recorder.forceDownload(blob, 'filename.wav');
});

Изучите JavaScript демо AudioRecorder для связывания потока с элементом <audio>.

Почему нужен MediaRecorder

Событие ondataavailable в MediaRecorder позволяет вам обрабатывать аудиоданные:

mediaRecorder.ondataavailable = e => {
  // Обрабатывайте аудиоданные здесь
};
mediaRecorder.start();
mediaRecorder.stop();

Если вам ценна простота, обратите внимание на JSSoundRecorder — инструмент для записи, редактирования и скачивания аудио.

Предупреждение об ошибках и лицензирование

Используйте событие onRecordFail для контроля за ошибками:

function onRecordFail() {
  console.error('Запись не удалась – отсутствует доступ к микрофону.');
}
navigator.getUserMedia({audio: true}, stream => {
  // Здесь ваш поток
}, onRecordFail);

Не забывайте про ограничения лицензирования некоторых аудиокодеков, таких как MP3.

Визуализация

Процесс записи на HTML5 прост:

1. Обеспечьте доступ к микрофону.
2. Запишите аудио.
3. Остановите запись.
4. Сохраните и поделитесь звуком.

Выбор формата: WAV, MP3 или Ogg

Выбор формата не маловажен: .wav для качества без сжатия и .ogg для сжатия с обеспечением хорошего качества.

Вам может понадобиться изменить HTML5-код для работы с разными форматами и добавления пользовательских элементов управления.

Создайте комфортные условия для пользователей: обеспечьте согласие пользователя и обратную связь

Получите согласие на использование микрофона:

navigator.mediaDevices.getUserMedia({audio: true})
  .then(stream => {
    // Пользователь предоставил согласие
  })
  .catch(error => {
    console.error('Доступ к микрофону заблокирован пользователем', error);
  });

Обеспечьте видимость или звуковую обратную связь во время записи.

Полезные материалы

1. Пройдите по руководству MediaRecorder на MDN.
2. Познакомьтесь с введением в Web Audio API на web.dev.
3. Посмотрите на демо MediaRecorder на webrtc.github.io.
4. Заходите в репозиторий RecordRTC на GitHub — отличная библиотека для записи звука.
5. Ознакомьтесь с информацией о захвате аудио в HTML5 на web.dev.
6. Изучите спецификации W3C по доступу к медиа в реальном времени.
7. Пройдите обучение по устройствам записи на сайте Google Codelabs, посвященном WebRTC.