Lesson 17: Audio

Overview

In this HTML lesson, we explain how to use the audio element to play sound. The audio element is similar to the image element in that both contain a source attribute, which can come from anywhere on the internet. There are several simple attributes of the audio element, which can be added to enable various features: controls, autoplay, loop, and muted. Lastly, we have the preload attribute, which can be used to preload the video or just the metadata.

A Basic Example

Our first document contains a simple audio element with two common attributes in it. The src attribute works exactly like the src attribute in the img element and can use resources from anywhere on the internet. Additionally, the controls attribute tells the browser to include controls for manipulating the playback. The controls attribute has no associated value, we just include it to tell the browser to include the controls on the page. The controls available are a play button that can be used to pause the audio once it is playing, a seek control for setting the point in the range where the audio plays from, and a volume control with a mute button.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <audio src="Theme.ogg" controls></audio>
  </body>
</html>

Output

Additional Attributes

In this example, we present more attributes of the audio element: autoplay, loop, and muted. Like the controls attribute, these atttributes have no associated value, they are just included to activate them. The autoplay attribute is include to tell the browser to start playing the audio clip immediately when the page loads, instead of waiting for the user to start the clip. The loop attribute is included to tell the browser to keep playing the clip repeatedly over and over. Finally, the muted attribute is included to tell browser to set the mute on the volume control.

Example1a.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <audio src="Theme.ogg" controls autoplay loop muted></audio>
  </body>
</html>

Ambient Sound

If we want to provide automatic, ambient sound, we can set just the autoplay and loop attributes. This should be used very sparingly, because the user can not control the playback.

Example1b.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <audio src="Theme.ogg" autoplay loop></audio>
  </body>
</html>

The Source Element

Instead of the src attribute, we can use a source element to designate audio files by including it inside of the audio element, as we show here.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <audio controls>
      <source src="Theme.ogg" type="audio/ogg">
    </audio>
  </body>
</html>

Multiple Sources

In order to mitigate the lack of support by some browsers for some file types, we can include multiple alternative source files. Then, if a browser does not support the first source file type, it moves on to the next source until it finds one that it does support.

Example2a.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <audio controls>
      <source src="Theme.ogg" type="audio/ogg">
      <source src="Theme.mp3" type="audio/mpeg">
    </audio>
  </body>
</html>

The Preload Attribute and Tracks

In this last example, we have the final audio attribute: preload. The preload attribute can be assigned three possible values: auto, metadata, and none. The value auto tells the browser to preload the audio file, the value metadata tells the browser to preload the metadata, and the value none tells the browser not to preload anything. In addition, we can insert track elements to provide metadata, subtitles, etc.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <audio controls preload="auto">
      <source src="Theme.ogg" type="audio/ogg">
      <track src="Theme.vtt" kind="subtitles" srclang="en" label="English" >
      <track src="ThemeMeta.vtt" kind="metadata" label="English" >
    </audio>
  </body>
</html>