Canvas 2D Web Apps/Sounds

This chapter presents one way to play audio files in web apps using the HTML5  element. There are alternatives (e.g. W3C's Web Audio API) but the HTML5  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,  , and   or   methods of the   element. In fact, this is about all you can do with  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  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  element in the   element: This specifies a  element with the name “ ” and the audio file (the source) “ ” of type “ .” Note that:
 * You should specify multiple  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  element, a global variable should be defined, e.g.: This variable should be set in the  function; in the example: This uses the name “ ” which was defined in the  tag and requests the web browser to load the audio file.

Playing Sounds
The  function uses one button to call  :

There is a second button to call  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  or has. In this case, it calls, otherwise  : 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  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  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 “ ” file extension.