Submodule2.2: Media

Audio

The Audio element is a new feature in HTML5.

Its tag is <audio>. Using <audio> we can add a sound file in our web page. The audio formats that are supported in HTML5 are .mp3, .wav and .ogg. Currently only Chrome, Firefox and Opera support all these formats. Similar to images, the url of our sound file is defined using the src attribute.

Example:

<audio >
    <source src="myaudio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Moreover, we can add controls attribute in our audio. This will display a bar which will have playback controls ( e.g. play and volume )

Example:

<audio controls>
    <source src="myaudio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Also, if we want to make sure that the user will be able to hear our audio regardless of which browser is using, we can upload multiple formats of the same audio. This is achieved by using the <source> element. <source> is placed between the start and end tag of <audio>. Inside the source we place the src of our audio. <source> does not have an end tag. The browser will display the first recognizable format.

Example:

<audio controls>
    <source src="media/myaudio.ogg" type="audio/ogg">
    <source src="media/myaudio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

For more information: https://www.w3schools.com/html/html5_audio.asp

Exercise

Open the file exersice02.2.html in the folder "Exercises" in your editor.
Modify and save the file. You will find the audio files "myaudio.mp3" and "myaudio.ogg" in the folder "media". The browser's output should be as shown in the following image:

Solution: