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