- PVSM.RU - https://www.pvsm.ru -

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

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

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

image

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

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

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

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

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

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

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

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

P.S.

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

image

Автор: 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/