Поздравляю всех с Днём Космонавтики!
Яндекс выложил интерактивную аудиозапись полёта Ю.Гагарина. Для запуска открыть https://www.yandex.ru/ и кликнуть по картинке слева от поля поиска. Откроется вот такая красивая страничка:
Рассмотрим из чего она состоит:
— код скрипта можно посмотреть тут.
Как видно, основная часть состоит из транскрипта переговоров который выводится текстом в верхней части страницы.
Около фотографии Ю.Гагарина отображается графическое представление эквалайзера. Судя по коду, изображение создаётся с помощью AnalyserNode, который получает на вход аудиопоток и выдаёт таблицу БПФ.
Отдельные звуковые файлы загружаются в AudioBufferSourceNode и подключаются по мере перемещения по шкале (либо мышкой можно ткнуть в определённую отметку).
Предположительно всё должно работать и на десктопе, и в мобильных браузерах, кроме IE, конечно.
Скорей всего без Web Audio сделать такой вывод и визуализацию звука было бы гораздо сложнее.
P.S.
В FireFox в инструментах разработчика есть отдельная вкладка для показа узлов Web Audio:
Автор: musicriffstudio
