Get to know web standards. Work with audio. - Video and creation story

  • Tutorial
Hello! Especially for those who are just getting acquainted with web technologies and new web standards, we have prepared an introductory 15-minute video telling about working with audio on the web (HTML Audio and Web Audio).



When we started showing the video to experts from the market, one of the first questions was about how such a video was created, how much time it took and what it was used.



I hope you already watched the video and understand what it is about. As you may have noticed, we got a mixture of scribing (when writing or emulating hand-drawn content is recorded or emulated) and animation. Below I will tell you how we worked on the video.

Stage 1. Scenario Planning




Everything is quite simple here:
  • We study the whole subject area
  • We formulate the general plan of the story (in this case, we start with the story, we proceed to explain why the Web Audio standard was needed, then we talk more about the standard itself).


Stage 2. Content rendering



All the image that you saw in the video is really made by hand. I am using Surface 3 Pro and the Mischief app . It focuses specifically on "artistic" tasks, supports working with layers and allows you to export to raster or PSD.

This is one of the longest stages of production, because you need to do a lot of exercises in parallel:
  1. Immerse yourself in technology - from studying introductory and review articles ( html5rocks , etc.) to documentation ( MDN , MSDN ) and the standard itself . It is important to understand how the technology works and how it is displayed in the standard (for example, how the various nodes of the audiograph are grouped).
  2. Based on various articles and related materials, evaluate whether there is an established translation of individual terms. Here, a recent article by our colleagues from Yandex about sound theory turned out to be very helpful .
  3. Come up with a visual storytelling structure and metaphors for individual blocks and elements.
  4. Directly draw everything.


Depending on how well the artist is familiar with the subject of the drawing, more or less iterations and approaches to the projectile (from sketches and storyboards to the final drawing) can result.



Here, for example, over time, individual fragments were redrawn in favor of a more understandable presentation. Although, I must say that explaining the API with pictures is always difficult.

Comment: I note separately that the formation of such a picture is immediately tied to some logic of animation (see the third and fourth stages), that is, it is not just artistic creation, but some story that can be spoken orally at this stage, but it will be recorded later. Also an interesting point: in the scribing video that we watched as guidelines, we liked the moments when the previous image changed over time, something was drawn on top, etc. In our case, working with layers helped to realize such moments.

Stage 3. Scenario


Further on the picture and some outline text or phrases from the head the text is written, which will be further voiced by the announcer. Moreover, in the case of scrubbing video and animation as a whole, it is important that the visual range corresponds to speech. We managed a fairly simple solution:
  • the whole picture is divided into fragments,
  • individual image elements are assigned a number,
  • in the text, the element numbers are placed.


In Word, it looks something like this:


Under the 15-minute video, we got a 10-page document with pictures, which was then transmitted for filling and as an instruction to the animators. Also, to avoid errors, English terms were separately attributed to the pronunciation.

As you work on the text (and this is the place where the content is actually fixed), minor edits to the image can be made. For example, if it becomes clear that for some important phrase there isn’t enough graphics, then either you need to shorten the phrase, or add elements to the image. Otherwise, a negative effect occurs when nothing happens on the screen, and the announcer does not voice the picture, but says something from himself.

True, in our case, it was not always possible to do everything in perfect form. In the block with filters, you might notice that the names of the filters simply appear in the video series, and the voice acting gives an explanation of why they are needed and what they do. Here the changes occurred in the text: as we worked on it, it became clear that nothing would be clear from a simple enumeration of filters. But ideally, you need to talk about each filter separately, and we make an introductory video, so we made a compromise - slightly increase the text, but not complicate the graphics.

Comment. Since we talked about Web Audio, we decided that it would be nice to add the appropriate effects over the speech. You may have noticed this in the last episode, where we are analyzing the graph example. Accordingly, the script contained instructions for the audio director to add effects.

Stage 4. Animation and voice acting


Here, a professional team is included in the process (the guys from BeaversBrothers helped us ) and the corresponding tools (Adobe After Effects).

Below are a few screenshots of the workflow:






After a few hours of rendering, we get the finished video, which after a couple of iterations takes on its final form. And we are interested in what you think about this format?

Only registered users can participate in the survey. Please come in.

What do you think about this content format?

  • 78% Excellent input content format, more than 78
  • 28% Better to read a text article on the same topic 28

Also popular now: