HTML and CSS Reference
In-Depth Information
Figure 8-7 shows the animation completed, but just before the text messages with the results.
Figure 8-7.
Just before text displayed on results
Now, heres a confession that should be informative. You may need to skip ahead or wait until you read
through all the code to appreciate it. When I created this application the first time, I had the code for
displaying the message and adjusting the score in the
choose
function. After all, thats where the code
determined the values. However, this had a very bad effect. The player saw the results before seeing the
computer move emerge out of the screen in the animation. It looked like the game was fixed! When I
realized what the problem was, I changed the code in
choose
to store the message and the new score
values in global variables and only display the message and set the updated score in the
form
input
field
after
the animation was complete. Don't assume you can know everything about your application before
you start. Do assume you will find problems and be able to resolve them. Companies have whole groups
devoted solely to quality assurance.
Audio and DOM processing
The situation with audio is quite similar to the one with video (see Chapter 6). Again, the bad news is that
browsers dont all recognize the same formats. And again, the good news is that HTML5 provides the
<audio>
element, and JavaScript supplies features for playing audio along with ways of referencing
different formats for the audio accepted by the different browsers. Moreover, tools are available for
converting from one format to another. The two formats I use for these examples are MP3 and OGG, which
appear to be sufficient for Chrome, Firefox, and Safari. I used free sources for audio clips and found
acceptable samples in WAV and MP3. I then used the Miro converter I had downloaded for working with
the video to produce MP3 and OGG for the WAV file and OGG for the others. The Miro name for the OGG
was theor.ogv and I changed it just to keep things simple. The main point here is that this approach
requires two versions of each sound file.
