JavaScript: разрабатываем приложение для записи звука

Привет, друзья!
В этом небольшом "туториале" я хочу показать вам, как разработать приложение для записи и воспроизведения аудио-файлов.
Функционал нашего приложения будет следующим:
* запись аудио
* отображение записи с возможностью ее предварительного прослушивания и последующего сохранения или удаления
* хранение аудио-файлов на сервере
* извлечение аудио-файлов, хранящихся на сервере, и их отображение в браузере
Основная технология, которую мы будем использовать, это [`MediaDevices`]( https://developer.mozilla.org/ru/docs/Web/API/MediaDevices ). Данная технология входит в состав глобального объекта [`Navigator`]( https://developer.mozilla.org/ru/docs/Web/API/Navigator ). Основным методом, предоставляемым указанным интерфейсом является [`getUserMedia()`]( https://developer.mozilla.org/ru/docs/Web/API/MediaDevices/getUserMedia ). Запись данных (в простых случаях вроде нашего) выполняется с помощью интерфейса [`MediaRecorder`]( https://developer.mozilla.org/ru/docs/Web/API/MediaRecorder ).
Интерфейс `MediaDevices` на сегодняшний день [поддерживается всеми современными браузерами]( https://caniuse.com/mdn-api_mediadevices ).
Для небольшой стилизации нашего приложения мы будем использовать [Sass]( https://sass-lang.com/ ).
Выглядеть приложение примерно так:
Исходный код приложения находится [здесь]( https://github.com/harryheman/record-app ).
Основным источником вдохновения для меня послужила [эта замечательная статья]( https://www.sitepoint.com/mediastream-api-record-audio/ ).
_Обратите внимание_ : данная статья рассчитана, преимущественно, на начинающих разработчиков, хотя, смею надеяться, что и опытные найдут в ней что-нибудь интересное.
Вы готовы? Тогда вперед!
[Читать дальше ->]( https://habr.com/ru/post/581086/?utm_source=habrahabr&utm_medium=rss&utm_campaign=581086#habracut ) https://developer.mozilla.org/ru/docs/Web/API/MediaDevices