Adding audio to a web page

HTML5 provides us with the <audio> element, which specifies a standard way to embed an audio file on a web page. No more trouble in installing plugins in your browsers! It needs a controls attribute to add audio controls, such as play, pause, and volume (see the following screenshot):

The controls attribute

Note

For code file for this section, refer to chapter 7\audio\ and chapter 7\audio_dart\ in the code bundle.

Of course, you also need to indicate where the browser can find the source of the sound file through the <source> element and its src attribute. But, we all know that media files come in different formats, such as MP3, WAV, and OGG. These are the currently supported file formats, and only Chrome supports all three of them. The format is described via the type attribute of <source>, as in type="audio/mpeg" for MP3. Luckily, the <audio> element allows multiple <source> elements, so that we can link to different audio file formats...