Ю.Гагарин и Web Audio API от Яндекса

в 5:43, , рубрики: javascript, web audio api, Работа со звуком

Поздравляю всех с Днём Космонавтики!

Яндекс выложил интерактивную аудиозапись полёта Ю.Гагарина. Для запуска открыть https://www.yandex.ru/ и кликнуть по картинке слева от поля поиска. Откроется вот такая красивая страничка:

image

Прямая ссылка на страницу.

Рассмотрим из чего она состоит:

— код скрипта можно посмотреть тут.

Как видно, основная часть состоит из транскрипта переговоров который выводится текстом в верхней части страницы.

Около фотографии Ю.Гагарина отображается графическое представление эквалайзера. Судя по коду, изображение создаётся с помощью AnalyserNode, который получает на вход аудиопоток и выдаёт таблицу БПФ.

Отдельные звуковые файлы загружаются в AudioBufferSourceNode и подключаются по мере перемещения по шкале (либо мышкой можно ткнуть в определённую отметку).

Предположительно всё должно работать и на десктопе, и в мобильных браузерах, кроме IE, конечно.

Скорей всего без Web Audio сделать такой вывод и визуализацию звука было бы гораздо сложнее.

P.S.

В FireFox в инструментах разработчика есть отдельная вкладка для показа узлов Web Audio:

image

Автор: musicriffstudio

Источник

Поделиться новостью

* - обязательные к заполнению поля