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

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

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

Рассмотрим из чего она состоит:
— код скрипта можно посмотреть тут.

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

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

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

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

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

P.S.

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

• ↑

  —

  ↓

• 1,4k

• Добавить в избранное 13