В наши дни браузер используется для всего. От простых веб-страниц, которые отображают новостной сайт, до сложного игрового веб-приложения, которое использует технологию WebGL для визуализации графики. Аудиозапись в браузере, это не должно быть ракетостроением, верно? Что ж, оказывается, ракетостроение и магия вместе могут решить эту проблему.
Ооо, Дулита, о какой магии ты говоришь?
Во-первых, я предполагаю, что вы не знакомы с основами работы со звуком (извините). Я упрощу вещи, чтобы все могли следовать. Нам нужно поговорить об аналоговых сигналах и цифровых сигналах. A&D так сказать.
Аналоговые сигналы
Когда микрофон улавливает звук, он улавливает звуковую энергию и преобразует ее в электрическую энергию. Это будет производить аналоговые сигналы. Проблема в том, что компьютеры не так хороши с аналоговыми сигналами. Компьютеры ❤ цифровые сигналы. Сигналы, равные 1 или 0.
Внутри компьютера есть аппаратная часть, называемая АЦП, которая используется для преобразования аналоговых сигналов в цифровые. После этого процесса мы можем получить доступ к цифровым байтам звука.
Я следую за вами, так что теперь у вас есть байты. Что вы делаете после?
Далее нужно будет захватить массивы байтов, которые мы получим, чтобы мы могли сшить их вместе для звуковой дорожки.
Доля рынка браузеров
Давайте прямо сейчас взглянем на долю рынка браузеров. Потому что очевидно, что не все используют последнюю версию Chrome, а некоторые бедолаги все еще живут в темных веках.
Дулита, какое значение имеет доля рынка браузеров?
Браузер предоставляет API, необходимые для доступа к байтовым массивам. Web-Audio API и Web-RTC API — это API для работы. Получите это, как итальянская работа.
Дулита, Я иду сюда!
Итак, какие браузеры поддерживают Web-Audio- Chrome 14+, Edge, Firefox 23+, Opera 15+, Safari 6+. Но никакой любви к Internet Explorer.
API веб-аудио
Вспомните недавно ставший популярным узор из трубок. Во многом благодаря Connect Middleware. Web Audio API также использует конвейеры. Это позволяет определенным трубам делать интересные вещи на входе (увеличивать громкость, уменьшать высоту тона) и передавать их следующей трубе.
Теперь, чтобы увидеть какой-то реальный код, делающий то, что я проповедовал ранее.
WAV и немного о без потерь
Ваш друг-аудиофил много раз упоминает о формате файла AAC и музыке без потерь, о которой вы понятия не имеете. Приведенный выше код захватывает музыку без потерь из байтовых массивов. Чтобы мы могли слушать это из браузера — нам нужно сначала преобразовать байтовые массивы в кодировку WAV. Кодирование WAV позволяет браузеру распознавать, как воспроизводить захваченные байты. Код кодирования WAV немного сложен для понимания, но ниже показано, как мы его используем.
recordingStream.getTracks()[0].stop();
var audio = encodeWAV(buffers, bufferLength, audioContext.sampleRate);
const audio = document.createElement('audio');
audio.src = window.URL.createObjectURL(audio);
audio.play();
Дулита, это было не так сложно. Где ракетостроение
Ну, а теперь самое интересное. Размер 1-минутного wav-файла будет примерно около 10 МБ+. Да, вы не ослышались, для ShortKast, когда мы впервые создали веб-рекордер, пятиминутный клип весил более 50 МБ.
MP3 для спасения
Так кто же пришел, чтобы спасти нас от того, чтобы заставлять пользователей загружать 50-мегабайтный файл на наш сервер? Кодировка MP3! Мы можем сжать звук в файле WAV и создать гораздо более легкий файл MP3. Файл MP3 продолжительностью 5 минут занимает от 2 до 5 МБ. Разве это не идеально?
Теперь ты собираешься рассказать мне о другой проблеме, с которой ты столкнулся, верно?
Да, способ перекодировать MP3 в браузере - использовать LAME mp3 конвертацию. Существует проект github, полностью написанный на javascript, который выполняет преобразование. В чем подвох? Это медленно. Преобразование 5-минутного файла занимает около 2 минут.
Пользователи в наши дни не могут ждать 2 минуты.
Транскодирование должно было происходить во время записи. Теперь это снова сложная операция, потому что javascript в браузере выполняется в одном потоке. Если мы транскодируем в реальном времени — мы пропустим много сэмплов с микрофона, так как наш поток заблокирован внутри LameJS.
На следующей неделе вы узнаете, как я решил эту проблему. Если вам нравится этот пост, пожалуйста, распространите любовь. Также проверьте ShortKast, социальную сеть для мини-подкастов, которая использует вышеуказанную технологию для записи звука.
