Working with Audio - HTML5 Canvas - page 353

Why Sounds in Apps Are Different: Event Sounds
Why make a game as an example for playing sounds in HTML5? Well, a game is a
perfect example because it is difficult to predict how many sounds might be playing at
any one time.
If you can imagine, games are some of the most demanding applications when it comes
to sound. In most games, sounds are played based on user interactions, and those
interactions are usually both asynchronous and unpredictable. Because of those factors,
we need to create a strategy for playing sounds that is flexible and resource-efficient.
To demonstrate how tricky sounds can be when using JavaScript and HTML5 with a
canvas game, we will iterate this game several times until we have a working model.
Here are some assumptions we will make regarding sound in Space Raiders based on
what we know about the HTML5 audio object.
1. After loading a sound, you can make another object with the same source and
“load” it without having to wait for it to load. (Flash sort of works this way.)
2. Playing sounds locally is the same as playing them on a remotely hosted web page.
It turns out that both of these assumptions are wrong . As we continue through this case
study, we will show you why, as well as how to accommodate them.
Since this is not a chapter about making games, Space Raiders is only going to be a
façade. In Hollywood, a façade is a structure built for filming, containing only the parts
the camera will see. For example, a building façade might have only the front wall and
windows—with nothing behind them. Space Raiders is like this because we are only
going to create the parts necessary to include the dynamic sounds we will be using. It
will be most of a game, leading you into Chapters 8 and 9 , which take a deep dive into
making complete games with HTML5 Canvas.
Iterations
In this case study, we will create four iterations of Space Raiders . Each one will attempt
to solve a dynamic audio problem in a different way. First, we will show you the basics
of the Space Raiders game structure, and then we will discuss how to solve the audio
problem.
Space Raiders Game Structure
Space Raiders is an iconic action game where a swarm of alien invaders attack from the
top of the screen, and the player's job is to defend the world. The raiders move in
horizontal lines near the top of the screen. When each raider reaches the side of the
playfield, it moves down the screen and then switches direction.