# Canvas 2D Web Apps/Sounds

This chapter presents one way to play audio files in web apps using the HTML5 audio element. There are alternatives (e.g. W3C's Web Audio API) but the HTML5 audio element appears to be the most widely supported standard.

### The Example

The example of this chapter (which is also available online; also as downloadable version) uses three buttons to call the play, load, and play or pause methods of the audio element. In fact, this is about all you can do with audio elements (more specifically with media elements, see the W3C's specification of media elements). The example can also be used to test whether a specific audio file can be played on a specific platform. For example, I had problems using the load method more than once with the WAV file on an iPad. (The iPad would stop playing the file until I reloaded the web page.)
The following sections will discuss the sound-specific parts of the code; see the chapter on responsive buttons and previous chapters for discussions of other parts.

### Loading Sounds

The easiest way to load sounds is to define an audio element in the body element:
This specifies a audio element with the name “hello” and the audio file (the source) “group hello.wav” of type “audio/wav.” Note that:
* You should specify multiple source elements with the same audio content in different formats such that all web browser find one that they can play. (See here for an overview of supported formats by various browsers; Apple developers should see here for formats supported on iOS.)
* You should specify the type of each audio file because some browsers (in particular Safari on iOS) appear to need this information in some cases.
In order to access the audio element, a global variable should be defined, e.g.:
This variable should be set in the init function; in the example:
This uses the name “hello” which was defined in the audio tag and requests the web browser to load the audio file.

### Playing Sounds

The update function uses one button to call play:
There is a second button to call load again (which usually rewinds the file to the beginning but might lead to problems for some combinations of audio file formats and web browsers):
The third button checks whether the audio file is paused or has ended. In this case, it calls play, otherwise pause:
The example can also be used to test audio files with particular web browsers, which is often necessary as described next.

### Testing Sounds

Since support for audio file formats strongly depends on the web browser (not only for technical reasons but also because of legal issues), it is important to test web apps with sounds on as many platforms as possible. If there is an issue, the same content should be provided in multiple formats in order to support as many browsers as possible. It might also make sense to avoid calling the load function more than once, e.g. if the audio clip is very short and restarting before it ends doesn't make much sense anyways. (Also note that the load function in Safari on iOS appears to be rather slow.)
For iBooks widgets, Apple recommends to use AAC audio in an MPEG-4 container with an “.m4a” file extension.
< Canvas 2D Web Apps