Привет, друзья! Продолжаю исследовать возможности по работе с медиа, предоставляемые современными браузерами, и в этой статье хочу рассказать вам о возможности захвата и записи медиаданных в процессе воспроизведения аудио и видеофайлов. Мы разработаем простое приложение для сведения аудио и видео со следующим функционалом: В качестве фреймворка для фронтенда я буду использовать React, однако все функции по работе с медиа будут автономными (сигнатура этих функций будет framework agnostic), так что вы можете использовать любой другой фреймворк или ограничиться чистым JavaScript. Репозиторий. О том, как разработать приложение для создания аудиозаметок, можно прочитать в этой статье, а о том, как разработать приложение для захвата и записи экрана — в этой. Если вам это интересно, прошу под кат. Если вы внимательно изучили функционал нашего будущего приложения, то могли заметить, что пользователь может выбрать только одно видео и имеет возможность менять только источник аудиоданных. Это связано с тем, что на сегодняшний день в процессе записи медиаданных возможна замена только аудиоисточника (без создания нового экземпляра MediaRecorder). В процессе разработки приложения мы будем опираться на следующие спецификации (черновики и рекомендацию): Ссылки на соответствующие разделы MDN будут приводиться по мере необходимости. Создаем шаблон React-приложения с помощью create-react-app: Пока генерируется шаблон, поговорим об интерфейсах и методах, которые мы будем применять. Шаблон готов. Приступим к разработке приложения. Структура директории src будет следующей: Как видите, для стилизации приложения я пользовался Sass: Начнем с основного компонента приложения (App.js). Импортируем компоненты, утилиту для создания хранилища состояния и стили: Создаем хранилище и импортируем хуки: С вашего позволения, я не буду останавливаться на утилите (почитать о ней можно здесь). Справедливости ради следует отметить, что в последнее время для создания хранилища состояния я все чаще прибегаю к помощи zustand. Создаем и экспортируем компонент: Компонент для выбора видео (components/VideoSelector.js): Компонент для выбора аудио (components/AudioSelector.js). Сигнатура данной функции немного сложнее предыдущей, поскольку пользователь может выбрать несколько файлов, но, в целом, все тоже самое: Кратко рассмотрим утилиту для определения поддержки используемых технологий (utils/verifySupport.js): Переходим к самой интересной части. Начнем с методов для записи и формирования ее результата (utils/recording.js). Импортируем утилиту для определения поддержки и создаем глобальные (в пределах модуля) переменные: Функция для начала записи: Функция для остановки записи: Функция замены источника аудиоданных: Наконец, функции для приостановки и продолжения записи: Компонент для записи (components/Recorder.js). Импортируем хуки и утилиты: Извлекаем сеттер и части состояния из хранилища, сохраняем ссылку на элемент audio и определяем локальное состояние для индикатора паузы и начала записи: Определяем метод для управления воспроизведением аудио и видео: Определяем метод для начала записи: Определяем метод для приостановки/продолжения воспроизведения: Наконец, определяем метод для остановки записи: Ну и, конечно, разметка: Последний компонент — результат записи (components/Result.js): Думаю, тут все понятно. Проверяем работоспособность нашего приложения. Запускаем сервер для разработки с помощью yarn start или npm start: 
 Выбираем видео и аудиофайлы: 
 Нажимаем на кнопку Start recording: 
 Начинается воспроизведение и запись данных. Нажимаем Pause, выбираем другой аудио файл и нажимаем Resume: 
 Нажимаем Stop: 
 Генерируется сведенный контент, появляется превью и ссылка для скачивания файла. Все работает, как ожидается. Пожалуй, это все, чем я хотел поделиться с вами в этой статье. Благодарю за внимание и happy coding!  JavaScript Developer