HTML5 audio is composed of several layers:
The <audio> element is useful for embedding an audio player into a Web page. It is dedicated for streamed audio. It is very similar to the <video> element, both in its use and in its API.
The Web Audio API is designed for musical applications and for adding sound effects to games. This pure JavaScript API supports manipulation of sound samples (loops, etc.), music synthesis and sound generation (oscillators, etc.). It also comes with a set of predefined sound processing modules (reverb, delay, etc.).
This course will focus on the <audio> element. We present the Web Audio API and other advanced HTML5 features in the W3Cx HTML5 Apps and Games course.
The attributes, event set and JavaScript API of the <audio> element are just a subset version of the ones from the <video> element, and here we will only address the differences and peculiarities.
Here is a simple example (also available online example from JSBin):
Press play to stream the neigh of a horse:
As you can see, the code is very similar to the basic <video> element usage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>horse song</title>
</head>
<body>
<audio controls="controls">
<source src="https://mainline.i3s.unice.fr/mooc/horse.ogg" type="audio/ogg" />
<source src="https://mainline.i3s.unice.fr/mooc/horse.mp3" type="audio/mp3" />
Your browser does not support the audio element.
Download the audio/video in
<a href="https://mainline.i3s.unice.fr/mooc/horse.ogg">OGG</a>
or <a href="https://mainline.i3s.unice.fr/mooc/horse.mp3">MP3</a>
format.
</audio>
</body>
</html>
In this example, just as for the <video> element, we used the controls attribute in order to render the play/stop, time, volume and progress widgets.
Notice the other similarities: between the <audio>...</audio> tags, we added a text message that is displayed if the Web browser doesn't support the <audio> element, and we used several <source>...</source> elements that link to different audio formats for the same file. The browser will use the first format it recognizes.
From W3C's specification: The audio element
From MDN's Web Docs: <audio>: The Embed Audio element