company_banner

Знакомимся с веб-стандартами. Работа с аудио. — Видео и история создания

  • Tutorial
Всем привет! Специально для тех, кто только знакомится с веб-технологиями и новыми веб-стандартами мы подготовили вводный 15-минутный ролик, рассказывающий про работу с аудио в вебе (HTML Audio и Web Audio).



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



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

Этап 1. Планирование сценария




Здесь все достаточно просто:
  • Изучаем в целом предметную область
  • Формируем общий план рассказа (в данном случае — начинаем с истории, переходим к объяснению, зачем понадобился стандарт Web Audio, далее рассказываем подробнее про сам стандарт).


Этап 2. Отрисовка содержимого



Все изображение, которое вы видели в ролике действительно сделано от руки. Я использую Surface 3 Pro и приложение Mischief. Оно сфокусировано именно на «художественных» задачах, поддерживает работу со слоями и позволяет экспортировать в растр или PSD.

Это один из самых длительных этапов производства, потому что нужно параллельно сделать много упражнений:
  1. Погрузиться в технологии — от изучения вводных и обзорных статей (html5rocks и др.) до документации (MDN, MSDN) и самого стандарта. Здесь важно понять, как устроена технология и как это отображается в стандарте (например, как группируются различные узлы аудиографа).
  2. На базе различных статей и связанных материалов оценить, есть ли устоявшийся перевод отдельных терминов. Тут очень оказалась кстати недавняя статья наших коллег из Яндекса про теорию звука.
  3. Придумать визуальную структуру рассказа и метафоры для отдельных блоков и элементов.
  4. Непосредственно все нарисовать.


В зависимости от того, насколько художник знаком с предметом рисунка, может получиться больше или меньше итераций и подходов к снаряду (от скетчей и раскадровки до финального рисунка).



У нас, например, со временем перерисовывались отдельные фрагменты в пользу более понятного изложения. Хотя, должен отметить, что объяснять API картинками всегда сложно.

Замечание: отдельно отмечу, что формирование такого рисунка сразу завязывается на некоторую логику анимации (см. третий и четвертый этапы), то есть это не просто художественное творчество, а некоторый рассказ, который на данном этапе можно проговаривать устно, но дальше он будет зафиксирован. Также интересный момент: в скрайбинг-видео, которые мы смотрели в качестве ориентиров нам нравились моменты, когда предыдущее изображение со временем изменялось, что-то рисовалось поверх и т.п. В нашем случае реализовать такие моменты помогла работа со слоями.

Этап 3. Сценарий


Далее по картинке и каким-то наброскам текста или фраз из головы пишется текст, который дальше будет озвучиваться диктором. Причем в случае скрабинг-видео и анимации в целом важно, чтобы визуальный ряд соответствовал речи. Мы обошлись довольно простым решением:
  • вся картинка разбивается на фрагменты,
  • отдельным элементам изображения присваивается номер,
  • в тексте расставляются номера элементов.


В Word это выглядит примерно так:


Под 15-минутный ролик у нас получился 10-страничный документ с картинками, который далее передавался для начитки и как инструкция аниматорам. Также для избежания ошибок для англоязычных терминов отдельно приписывалось произношение.

По мере работы над текстом (а это то место, где фактически фиксируется содержание) могут вноситься мелкие правки в изображение. Например, если становится понятным, что под какую-то важную фразу не достаточно количества графики, то либо надо сокращать фразу, либо добавлять элементов в изображении. В противном случае возникает негативный эффект, когда на экране ничего не происходит, а диктор не озвучивает рисунок, а говорит что-то от себя.

Правда, в нашем случае не всегда удалось все сделать в идеальном виде. В блоке с фильтрами вы могли заметить, что в видео-ряде просто появляются названия фильтров, а в озвучке дается пояснение, зачем они нужны и что они делают. Тут изменения произошли в тексте: по мере работы над ним стало понятным, что от простого перечисления фильтров ничего не будет понятно. Но в идеале и про каждый фильтр нужно рассказывать отдельно, а мы делаем вводное видео, поэтому пошли на компромис — слегка увеличить текст, но не усложнять графику.

Замечание. Так как мы рассказывали про Web Audio, мы решили что было бы неплохо добавить поверх речи соответствующие эффекты. Вы могли заметить это в последнем эпизоде, где мы разбираем пример с графом. Соответственно, сценарий содержал инструкцию для аудио-режисера по добавлению эффектов.

Этап 4. Анимация и озвучка


Тут в процесс включается профессиональная команда (нам помогали ребята из BeaversBrothers) и соответствующие инструменты (Adobe After Effects).

Ниже несколько скриншотов рабочего процесса:






Через несколько часов рендеринга получаем готовое видео, которое через пару итераций приобретает финальный вид. А нам интересно, что вы думаете о таком формате?

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

Что вы думаете про данный формат контента?

  • 78,0%Отличный формат вводного контента, больше бы такого78
  • 28,0%Лучше прочитать текстовую статью на ту же тему28
Microsoft
Microsoft — мировой лидер в области ПО и ИТ-услуг

Комментарии 10

    +1
    Если делаете вводный контент для чайников, то либо раскрывайте термины типа UI, хотя бы полное наименование, либо не используйте их.

    PS: "Даб 3 Си"? Я что-то не знаю про букву Дабл Ю?
    PPS: голосовал за текстовый формат — в тексте легко пропустить лишнее, не нужное, то что знаешь и прочитать по диагонали. Хотя видеоконтент вызывает больше интереса.
      +1
      PS: «Даб 3 Си»? Я что-то не знаю про букву Дабл Ю?

      Wikipedia:

      The initialism «www» for the World Wide Web thus, perhaps ironically, has three times as many syllables as the full name.

      Some speakers therefore shorten the name «double u» into «dub» only; for example, University of Wisconsin, University of Washington, University of Wyoming, University of Waterloo, University of the Western Cape and University of Western Australia are all known colloquially as «U Dub», and the automobile company Volkswagen, abbreviated «VW», is sometimes pronounced «V-Dub».[13] The fact that many website URLs still require a «www.» prefix has likewise given rise to a shortened version of the original, three-syllable pronunciation. With the arguable exception of the letter H, W is currently the only English letter whose name is not pronounced with any of the sounds that the letter typically makes. Many others, however, pronounce the «w» as dub-u, reducing it to two syllables. For example, «www» would be six syllables rather than nine, being pronounced, dub-u dub-u dub-u.

      Соответственно, многие аббревиатуры с W англоговорящие люди произносят с "даб", например, "даб-пи-эф" для WPF, "даб-три-си" для W3C. По крайней мере, именно такое произношение я часто встречаю, общаясь с людьми, работающими в США.
        +1
        Спасибо за отсылку. Интересно было почитать.

        По предудыщей работе я и был в Европе, и много общался с европейцами на английском (не ИТ сфера), но ни разу не встречал такого сокращения, хотя в маркировке одного ряда оборудования было WC :) Но вот с американцами не общался, за них ничего не могу сказать.
      0
      Видео понравилось)
        +3
        От Майкрософта слышать о стандартах достаточно непривычно...
          +1
          Эээм… «Валуэ»?!? Может таки «Вал'ю»?
            0
            Да, это воистину ужасно. Вэлью и Кенсел
              0
              Я и сам описался. Хотел написать Вэл'ю
                0
                Спасибо за внимание к деталям. Посыпаю голову пеплом. )
            0
            Ну нельзя так просто взять и проиграть аудио файл. Забыли самый злобный и неприятный для MS вопрос: форматы аудио.
            А именно то, что MS отказывается поддерживать свободные видео и аудио стандарты (как и картинки аля WebP).

            Хотя вроде пошли подвижки с Opus но видимо из-за Ogg контейнера они тормозят (для RTS поддержка уже есть).

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

            Самое читаемое