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

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

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

    image

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

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

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

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

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

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

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

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

    P.S.

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

    image
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 41
    • +3
      Здорово, конечно, но в чем смысл статьи?
      • +4
        в описании используемой технологии
        • –1
          Описание то где технологии?

          Кроме пары терминов и ссылок на них в спецификации?

          Все это в devtools без Вашей статьи посмотреть можно.
        • –4
          ИМХО смысл в том, чтоб немного «окунуться» в историю, вспомнить еще раз как это было, а не только в исходники «окунаться».
        • +2
          поправка: Около фотографии Ю. Гагарина отображается не графическое представление эквалайзера, а анализатор спектра. Эквалайзер это устройство.

          И вопрос, а кто знает, почему голоса иногда выше по тону, а иногда ниже? Это от неравномерной скорости записи или от чего?

          • +1
            Вероятно это связано с использованием SSB модуляции для связи. У неё при небольшой расстройке или плавании частоты есть такие эффекты.
            • +1
              Рискну предположить что изменение тональности связано с эффектом доплера.
              • 0
                Ну если бы Гагарин прямо из иллюминатора кричал на землю, то да, эффект Доплера был бы существенным :-)
                • 0
                  Эффект доплера используется даже в радарах ГИБДД и значит даже на очень невысоких скоростях он заметен. И тем более он заметен для объектов перемещяющихнся на первой космической.
              • 0
                Да скорее всего, просто магнитофон плохо мотал. Учитывая то, что тот магнитофон стоял в кабине и подвергался перегрузкам и вибрации.
              • +1
                Я постоянно залогинен в Яндексе (с кастомной темой), поэтому праздничные плюшки всегда пролетают мимо меня.
                • +2
                  Режим инкогнито спасёт отца русской демократии
                  • 0
                    Знание календаря праздников спасет отца русской демократии. Мне не трудно вылогиниться-поиграться-залогиниться, но как я должен узнавать о таких плюшках, кроме как на Хабре? Положим, я помню наизусть, когда Гагарин полетел в космос, но какой-нибудь международный день джаза я пропускаю.
                  • +1
                    по-моему по прямой ссылке всё должно открываться https://www.yandex.ru/?cover=gagarin
                    • 0
                      Нет, тщетно. По-моему, такие промо можно было бы хотя бы в виде кнопочки лепить в залогинную морду, но дизайнеры почему-то считают, что не комильфо.
                      • 0
                        Я тоже залогинен в яндексе, но все нормально открывается
                        • 0
                          Может, тема не установлена? У меня Minecraft, например.

                          • 0
                            Ха, пардон. точно. не открывает. Я в нескольких профилях в разных вкладках сижу. И по умолчанию в той что без темы открывало)))
                      • 0
                        Да, у меня тоже кастомная тема и я надеялся увидеть то самое после перехода по ссылке. Но увы.
                    • +1
                      Переговоры бурундуков на первых секундах записи это глюк новой технологии или так и задумано?
                      • +3
                        это примерно как с античными храмами. Им можно сделать крышу, восстановить фрески и стены, приделать руки статуям. Но тогда это будет не свидетельство истории, а новодел.

                        Также и тут, запись пустили примерно в таком виде в каком она сохранилась.
                      • 0
                        Во-первых, господа, о чем статья?
                        О том, что AUDIO API уже есть в браузере? Так давно есть.
                        И в инете куча примеров работы с ним.

                        Во-вторых:
                        графическое представление эквалайзера

                        Вот что такое «Эквалайзер», а то, что здесь — это анализатор спектра. Тоже, давным-давно обсосанная, есть даже расчет в «ручном режиме» пример, можно также это сделать проще, используя все тоже audio api.

                        В-третьих, если уж про историю писать, наверное лучше на гиктаймс, не?
                        Хотя судя по статье, лучше не писать вообще, ИМХО.
                        • +2
                          Тем кто интересуется технологией Web Audio (а не каким-то AUDIO API), будет интересно. Другим, возможно, нет. Тем не менее это не ваш личный ресурс, не правда ли? Откуда такая тяга к самомодерированию?
                          • –1
                            Аудио апи и веб апи это разные названия одного и тогоже.

                            Что будет интересным? Ссылка на сжатый js на сервере яндекса? Или Ваш скрин firebug-а?

                            Тяги к самомодерированию нет вообще, есть тяга к интересному из области технологий, для чего, в принципе, и предназначен этот сайт. А не для вот такого — это и не Ваш бложик тоже.
                            • –1
                              *аудио апи и веб аудио

                              веб аудио = аудио апи в браузере
                              • 0
                                Аудио апи и веб апи это разные названия одного и тогоже.


                                вы ошибаетесь
                                • –1
                                  я про технологию вообще, не вдаваясь в детали.
                                  ссылку посмотрите, что я давал.
                                  и то и другое предназначено для работы со звуком в браузере, просто одно появилось раньше, второе позже и было более навороченным, вот и все.

                                  Но самое главное — оба реализованы в браузерах достаточно давно, чтобы писать вот такие капитанские статьи про них из цикла «смотрите как можно».
                                  • 0
                                    Web Audio API это спецификация компонентов для синтеза и воспроизведения звука доступных из JavaScript. Отличительные особенности:

                                    • поддержка всеми современными браузерами (как обычно, без IE) под десктопные и мобильные ОС
                                    • полнота — предусмотрен любой чих, от конвольвера и полосных фильтров до воспроизведения сэмплов в loop'е по времени с высокой точностью
                                    • высокая производительность — компоненты реализуются нативными средствами ОС и браузера, с прямым доступом к железу
                                    • графовая структутра — узлы обработчика звука могут строиться в дерево с иерархией любой сложности (ну, это конечно не так, фильтр на 2-3 тысячи узлов легко замораживает звук на офисном компе, скажем. С другой стороны микшер с тысячью узлов это странно)


                                    И главное, это работает уже сейчас! О чём и свидетельствует вышеприведённое приложение.
                                    • 0
                                      Эта штука работает не «уже сейчас», а «уже давно».

                                      Если Вы только про нее узнали — поздравляю!
                                      • 0
                                        ну, это ж я пишу статьи в хаб «работа со звуком», а не вы. Несложно предположить что я немного знаком с реальным (а не рекламным) положением дел в технологии с которой работаю.

                                        Будем считать что ваши каменты это просто «спор ради спора».
                                        • 0
                                          :) дак и знаком не по наслышке
                                          но без пруфов это все ерунда, вот для примера мой пруф Web audio api vizualization — как раз про то, что тут используется. Дата последней правки этой статьи 24 мая 2015, по факту статья была написана раньше и это FF, в хроме это было реализовано еще раньше.

                                          что скажете, уважаемый?
                                          • 0
                                            Страницу с аудиозаписью переговоров Ю.Гагарина за 1 час видело больше людей чем этот туториал за всё время с даты его создания.

                                            Год назад на Web Audio было ещё рисковано делать ставку. Теперь нет, проверено крупными сервисами, см. пример в статье.
                                            • 0
                                              дак мы ведь не про это беседовали, не такли?

                                              год назад это поддерживали хром, фф и сафари — вполне можно использовать.

                                              так что Ваша статья как и ваше знание веб аудио не более чем капитанство, увы
                                              • 0
                                                можно посмотреть в ваш и мой профиль чтобы сравнить, например.
                                                • –1
                                                  я вам в доказательство пруфы привел?
                                                  вы все еще спорите.

                                                  были бы в теме — не писали бы ерунду.
                                                  но дело ваше, конечно, считайте, что хотите.
                                                  • 0
                                                    я не спорю. Я пишу приложения использующие Web Audio API (см. статью в профиле) и делюсь с другими новостями в интересующей меня области.
                                                    • 0
                                                      Вы — спорите.

                                                      Я Вам объяснил, что технология уже работала во всех новых браузерах аж вначале 2015 года — Вы упорно продолжаете утверждать, что то, что используемая в дудле Яши WEB Audio API — это новость.

                                                      Это давным-давно не новость, а вполне себе обкатанная технология.
                                                      То, что это новость для Вас — это совсем другое дело, но это четко определяет как давно Вы работаете в сфере звука в веб и какой Вы — профессионал.

                                                      Ну и определять зрелость технологии по использованию технологий в дудле Яндекса (а дудл — в принципе бесполезная и малозначащая для основной работы поисковика штука, просто некая демка) — это круто, да.

                                                      Окей, уговорили — Вы спец 80 уровня! Enjoy!

                                                      P.S. ладно бы расскали еще про саму технологию, как работается, как применять, как синтезировать звук. Неее, зачем — просто пара ссылок на стандарт и все — статья про технологию готова! объяснили, ага.
                                                      Статьи, смысл которых гуглится за 5 секунд — это не статьи вообще.
                                                      • –1
                                                        Окей, уговорили — Вы спец 80 уровня!

                                                        — вот тут согласен
                                                        • 0
                                                          <irony>Ну хоть в чем-то я Вас убедил!</irony>

                                                          Не дай Бог таких «спецов» и «профессионалов» в проекте. Тьфу-тьфу!
                                                          • 0
                                                            но мне не нужны веб-дизайнеры. Я занимаюсь разработкой музыкального софта.
                          • 0
                            Было бы интересно почитать статью от самих разработчиков Яндекс.

                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.