- PVSM.RU - https://www.pvsm.ru -
Поздравляю всех с Днём Космонавтики!
Яндекс выложил интерактивную аудиозапись полёта Ю.Гагарина. Для запуска открыть https://www.yandex.ru/ [1] и кликнуть по картинке слева от поля поиска. Откроется вот такая красивая страничка:
Прямая ссылка на страницу [2].
Рассмотрим из чего она состоит:
— код скрипта можно посмотреть тут [3].
Как видно, основная часть состоит из транскрипта переговоров который выводится текстом в верхней части страницы.
Около фотографии Ю.Гагарина отображается графическое представление эквалайзера. Судя по коду, изображение создаётся с помощью AnalyserNode [4], который получает на вход аудиопоток и выдаёт таблицу БПФ [5].
Отдельные звуковые файлы загружаются в AudioBufferSourceNode [6] и подключаются по мере перемещения по шкале (либо мышкой можно ткнуть в определённую отметку).
Предположительно всё должно работать и на десктопе, и в мобильных браузерах, кроме IE, конечно.
Скорей всего без Web Audio [7] сделать такой вывод и визуализацию звука было бы гораздо сложнее.
P.S.
В FireFox в инструментах разработчика есть отдельная вкладка для показа узлов Web Audio:
Автор: musicriffstudio
Источник [8]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/117706
Ссылки в тексте:
[1] https://www.yandex.ru/: https://www.yandex.ru/
[2] Прямая ссылка на страницу: https://www.yandex.ru/?cover=gagarin
[3] тут: https://yastatic.net/covers/gagarin/2/resources/_gagarin.js
[4] AnalyserNode: https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode
[5] БПФ: https://ru.wikipedia.org/wiki/%D0%91%D1%8B%D1%81%D1%82%D1%80%D0%BE%D0%B5_%D0%BF%D1%80%D0%B5%D0%BE%D0%B1%D1%80%D0%B0%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%A4%D1%83%D1%80%D1%8C%D0%B5
[6] AudioBufferSourceNode: https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode
[7] Web Audio: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
[8] Источник: https://habrahabr.ru/post/281420/
Нажмите здесь для печати.