Game Development Reference
In-Depth Information
Web audio
The new web audio API defines a way to play audio right into the browser without the
need for a single plugin. For a high level experience, we can simply add a few audio
tags throughout our HTML page, and the browser takes care of displaying a player
for the user to interact with and play, pause, stop, rewind, fast forward, and adjust the
volume. Alternatively, we can use the JavaScript interface available, and either con-
trol the audio tags on the page with it, or achieve much more powerful and complex
tasks.
One key detail to remember about browser support and the web audio API, is that
different browsers support different file formats. When defining an audio tag, similar
to an image tag, we specify the path to the source file. The difference is that with au-
dio, we can specify multiple sources for the same file (but different formats), then the
browser can choose the file it supports, or the best option it has, in case it supports
multiple file formats. Currently there are three audio formats supported by all major
browsers, namely
.mp3
, .
wav
, and
.ogg
. As of this writing, no single audio format is
supported in all major browsers, which means that whenever we use the web audio
API, we'll need at least two versions of each and every file we play through the API, if
we wish to reach the greatest possible audience.
Finally, keep in mind that although we can (and should) specify multiple audio files
per each audio element, each browser only downloads one of these files. This is a
very handy (and obvious) feature because downloading multiple copies of the same
file would be awfully inefficient and bandwidth heavy.
How to use it
The simplest way to get started with the web audio API is with an inline HTML5 ele-
ment. The code for it is as follows:
<audio>
<source src="sound-file.mp3" type="audio/mpeg"
/>
<source src="sound-file.ogg" type="audio/ogg"
/>
</audio>
