Яндекс выложил интерактивную аудиозапись полёта Ю.Гагарина. Для запуска открыть https://www.yandex.ru/ и кликнуть по картинке слева от поля поиска. Откроется вот такая красивая страничка:
Прямая ссылка на страницу.
Рассмотрим из чего она состоит:
— код скрипта можно посмотреть тут.
Как видно, основная часть состоит из транскрипта переговоров который выводится текстом в верхней части страницы.
Около фотографии Ю.Гагарина отображается графическое представление эквалайзера. Судя по коду, изображение создаётся с помощью AnalyserNode, который получает на вход аудиопоток и выдаёт таблицу БПФ.
Отдельные звуковые файлы загружаются в AudioBufferSourceNode и подключаются по мере перемещения по шкале (либо мышкой можно ткнуть в определённую отметку).
Предположительно всё должно работать и на десктопе, и в мобильных браузерах, кроме IE, конечно.
Скорей всего без Web Audio сделать такой вывод и визуализацию звука было бы гораздо сложнее.
P.S.
В FireFox в инструментах разработчика есть отдельная вкладка для показа узлов Web Audio:
Комментарии (41)
cjbars
12.04.2016 10:57+2поправка: Около фотографии Ю. Гагарина отображается не графическое представление эквалайзера, а анализатор спектра. Эквалайзер это устройство.
И вопрос, а кто знает, почему голоса иногда выше по тону, а иногда ниже? Это от неравномерной скорости записи или от чего?
Caelwyn
12.04.2016 11:12+1Вероятно это связано с использованием SSB модуляции для связи. У неё при небольшой расстройке или плавании частоты есть такие эффекты.
WebSun
12.04.2016 11:32+1Рискну предположить что изменение тональности связано с эффектом доплера.
cjbars
12.04.2016 11:38Ну если бы Гагарин прямо из иллюминатора кричал на землю, то да, эффект Доплера был бы существенным :-)
WebSun
12.04.2016 14:00Эффект доплера используется даже в радарах ГИБДД и значит даже на очень невысоких скоростях он заметен. И тем более он заметен для объектов перемещяющихнся на первой космической.
Beholder
12.04.2016 13:27Да скорее всего, просто магнитофон плохо мотал. Учитывая то, что тот магнитофон стоял в кабине и подвергался перегрузкам и вибрации.
pehat
12.04.2016 11:00+1Я постоянно залогинен в Яндексе (с кастомной темой), поэтому праздничные плюшки всегда пролетают мимо меня.
inoyakaigor
12.04.2016 12:08+2Режим инкогнито спасёт отца русской демократии
pehat
12.04.2016 12:48Знание календаря праздников спасет отца русской демократии. Мне не трудно вылогиниться-поиграться-залогиниться, но как я должен узнавать о таких плюшках, кроме как на Хабре? Положим, я помню наизусть, когда Гагарин полетел в космос, но какой-нибудь международный день джаза я пропускаю.
musicriffstudio
12.04.2016 12:10+1по-моему по прямой ссылке всё должно открываться https://www.yandex.ru/?cover=gagarin
c01nd01r
12.04.2016 14:29Да, у меня тоже кастомная тема и я надеялся увидеть то самое после перехода по ссылке. Но увы.
alexf2000
12.04.2016 13:09+1Переговоры бурундуков на первых секундах записи это глюк новой технологии или так и задумано?
musicriffstudio
12.04.2016 13:20+3это примерно как с античными храмами. Им можно сделать крышу, восстановить фрески и стены, приделать руки статуям. Но тогда это будет не свидетельство истории, а новодел.
Также и тут, запись пустили примерно в таком виде в каком она сохранилась.
ionicman
12.04.2016 13:44Во-первых, господа, о чем статья?
О том, что AUDIO API уже есть в браузере? Так давно есть.
И в инете куча примеров работы с ним.
Во-вторых:
графическое представление эквалайзера
Вот что такое «Эквалайзер», а то, что здесь — это анализатор спектра. Тоже, давным-давно обсосанная, есть даже расчет в «ручном режиме» пример, можно также это сделать проще, используя все тоже audio api.
В-третьих, если уж про историю писать, наверное лучше на гиктаймс, не?
Хотя судя по статье, лучше не писать вообще, ИМХО.musicriffstudio
12.04.2016 14:10+2Тем кто интересуется технологией Web Audio (а не каким-то AUDIO API), будет интересно. Другим, возможно, нет. Тем не менее это не ваш личный ресурс, не правда ли? Откуда такая тяга к самомодерированию?
ionicman
12.04.2016 14:43-1Аудио апи и веб апи это разные названия одного и тогоже.
Что будет интересным? Ссылка на сжатый js на сервере яндекса? Или Ваш скрин firebug-а?
Тяги к самомодерированию нет вообще, есть тяга к интересному из области технологий, для чего, в принципе, и предназначен этот сайт. А не для вот такого — это и не Ваш бложик тоже.musicriffstudio
12.04.2016 14:51Аудио апи и веб апи это разные названия одного и тогоже.
вы ошибаетесьionicman
12.04.2016 14:54-1я про технологию вообще, не вдаваясь в детали.
ссылку посмотрите, что я давал.
и то и другое предназначено для работы со звуком в браузере, просто одно появилось раньше, второе позже и было более навороченным, вот и все.
Но самое главное — оба реализованы в браузерах достаточно давно, чтобы писать вот такие капитанские статьи про них из цикла «смотрите как можно».musicriffstudio
12.04.2016 15:16Web Audio API это спецификация компонентов для синтеза и воспроизведения звука доступных из JavaScript. Отличительные особенности:
- поддержка всеми современными браузерами (как обычно, без IE) под десктопные и мобильные ОС
- полнота — предусмотрен любой чих, от конвольвера и полосных фильтров до воспроизведения сэмплов в loop'е по времени с высокой точностью
- высокая производительность — компоненты реализуются нативными средствами ОС и браузера, с прямым доступом к железу
- графовая структутра — узлы обработчика звука могут строиться в дерево с иерархией любой сложности (ну, это конечно не так, фильтр на 2-3 тысячи узлов легко замораживает звук на офисном компе, скажем. С другой стороны микшер с тысячью узлов это странно)
И главное, это работает уже сейчас! О чём и свидетельствует вышеприведённое приложение.ionicman
12.04.2016 15:18Эта штука работает не «уже сейчас», а «уже давно».
Если Вы только про нее узнали — поздравляю!musicriffstudio
12.04.2016 15:47ну, это ж я пишу статьи в хаб «работа со звуком», а не вы. Несложно предположить что я немного знаком с реальным (а не рекламным) положением дел в технологии с которой работаю.
Будем считать что ваши каменты это просто «спор ради спора».ionicman
12.04.2016 16:04:) дак и знаком не по наслышке
но без пруфов это все ерунда, вот для примера мой пруф Web audio api vizualization — как раз про то, что тут используется. Дата последней правки этой статьи 24 мая 2015, по факту статья была написана раньше и это FF, в хроме это было реализовано еще раньше.
что скажете, уважаемый?musicriffstudio
12.04.2016 16:29Страницу с аудиозаписью переговоров Ю.Гагарина за 1 час видело больше людей чем этот туториал за всё время с даты его создания.
Год назад на Web Audio было ещё рисковано делать ставку. Теперь нет, проверено крупными сервисами, см. пример в статье.ionicman
12.04.2016 16:33дак мы ведь не про это беседовали, не такли?
год назад это поддерживали хром, фф и сафари — вполне можно использовать.
так что Ваша статья как и ваше знание веб аудио не более чем капитанство, увыmusicriffstudio
12.04.2016 16:38можно посмотреть в ваш и мой профиль чтобы сравнить, например.
ionicman
12.04.2016 16:45-1я вам в доказательство пруфы привел?
вы все еще спорите.
были бы в теме — не писали бы ерунду.
но дело ваше, конечно, считайте, что хотите.musicriffstudio
12.04.2016 16:52я не спорю. Я пишу приложения использующие Web Audio API (см. статью в профиле) и делюсь с другими новостями в интересующей меня области.
ionicman
12.04.2016 19:36Вы — спорите.
Я Вам объяснил, что технология уже работала во всех новых браузерах аж вначале 2015 года — Вы упорно продолжаете утверждать, что то, что используемая в дудле Яши WEB Audio API — это новость.
Это давным-давно не новость, а вполне себе обкатанная технология.
То, что это новость для Вас — это совсем другое дело, но это четко определяет как давно Вы работаете в сфере звука в веб и какой Вы — профессионал.
Ну и определять зрелость технологии по использованию технологий в дудле Яндекса (а дудл — в принципе бесполезная и малозначащая для основной работы поисковика штука, просто некая демка) — это круто, да.
Окей, уговорили — Вы спец 80 уровня! Enjoy!
P.S. ладно бы расскали еще про саму технологию, как работается, как применять, как синтезировать звук. Неее, зачем — просто пара ссылок на стандарт и все — статья про технологию готова! объяснили, ага.
Статьи, смысл которых гуглится за 5 секунд — это не статьи вообще.musicriffstudio
12.04.2016 20:36-1Окей, уговорили — Вы спец 80 уровня!
— вот тут согласенionicman
12.04.2016 20:52<irony>Ну хоть в чем-то я Вас убедил!</irony>
Не дай Бог таких «спецов» и «профессионалов» в проекте. Тьфу-тьфу!musicriffstudio
13.04.2016 09:20но мне не нужны веб-дизайнеры. Я занимаюсь разработкой музыкального софта.
cjmaxik
Здорово, конечно, но в чем смысл статьи?
musicriffstudio
в описании используемой технологии
ionicman
Описание то где технологии?
Кроме пары терминов и ссылок на них в спецификации?
Все это в devtools без Вашей статьи посмотреть можно.
lazexe
ИМХО смысл в том, чтоб немного «окунуться» в историю, вспомнить еще раз как это было, а не только в исходники «окунаться».