• Choose a category
• All
• Classic-Fiction

By Root 6409 0

features of HTML5 (video and the canvas) will prove to be a very potent combination for web applications of the future. In the next chapter, we will dive into HTML5 audio and how it can be used with applications created on the canvas.

Chapter 7. Working with Audio

You can’t physically manipulate audio with HTML5 Canvas as directly as you can video, but many canvas applications can use that extra dimension of sound. Audio is represented by the HTMLAudioElement object manipulated through JavaScript, and by the

The Basic

The basic usage of the

The code in Example 7-1 will load and play song1.ogg in a web browser that supports .ogg file playback, as shown in Figure 7-1. (Reminder: not all browsers support all formats.)

Example 7-1. Basic HTML5 audio

Figure 7-1. The very basic HTML5

Audio Formats

Similar to video formats, which we learned about in Chapter 6, not every web browser supports every audio format. In fact, audio support appears to be in worse shape than video. As you will soon discover in this chapter, audio is one place where HTML5 needs some serious work. However, we will show you some strategies and workarounds for making audio easier to use in your applications.

Supported Formats

Here is a quick chart to show you which audio formats are supported by which browsers. We are not going to use version numbers here because we assume the latest version of each product:

Platform

.ogg

.mp3

.wav

Chrome

X

X

Firefox

X

X

Safari

X

X

Opera

X

X

Internet Explorer 9

X

X

The situation is much like that of the

Audacity

Fortunately, there is a great free audio tool available that will help you convert audio into any format. In our case, we need to convert to .mp3, .ogg, and .wav.

Audacity (http://audacity.sourceforge.net/) is an open source, cross-platform project designed to bring sophisticated audio editing to the desktop. The current version works on Mac, Windows, and Linux.

Figure 7-2 shows a sample screen from Audacity. When you load a sound into Audacity, it displays the waveform of the sound. You can manipulate the sound in many ways, including trimming, splitting, and duplicating, and then add effects such as fade, echo, reverse, etc. After editing a sound, you export it to the sound format you would like to create. In our case, that would be .ogg, .wav, and .mp3.

NOTE

We don’t have the space here to fully describe how to use an audio tool like Audacity, but we do need to give you one caveat: the distributed version of Audacity does not support the export of audio in the .mp3 format. To export .mp3 audio, you will need to download the LAME .mp3 encoder from http://lame.sourceforge.net/. LAME is also an open source project.

Figure 7-2. Editing an audio file in Audacity

Example: Using All Three Formats

In Example 7-2, we are going to embed a 40-second song, song1, in an HTML5 page and play it. To make sure song1 can play in as many browsers as possible, we are going to embed it with three different sources. For this example, we are also going to set the autoplay, loop, and controls properties so the