HTML AUDIO


Attributes we will look at elements <audio>

Attribute: src, autoplay, controls, loop


Handling Sound

<audio> by itself adds a soundfile, but doesn't play it

<audio src="../assest/audio/sound_file.mp3"></audio>

autoplay makes the sound start as soon as the page loads

<audio src="../assest/audio/sound_file.mp3" autoplay></audio>


Sound Controls

<audio src="sound_file.mp3" controls ></audio>

Add controls to tell the browser to show playback controls


Looping Sound

Add loop to repeat the sound indefinitely

<audio src="../assest/audio/sound_file2.mp3" autoplay loop></audio>


Sound in older browser

In general, for sound it's wise to use MP3 format sound

This is supposed to work in all modern browsers


Handling New Tags in Older Browsers

Older browsers can't handle newer HTML tags

To be friendly, you can warn the user:

<this_new_html_tag>
<p>Sorry, your browser can't handle <i>this_new_html_tag</i>!</p>
</this_new_html_tag>

Sorry, your browser can't handle this_new_html_tag!

  • An older browser ignores <this_new_html_tag> because it doesn't understand it, but it does understand <p> so it correctly displays the paragraph
  • A newer browser understands everything, but deliberately ignores the paragraph

An example of handling older browsers

Here's an example using audio:

<audio src="sound_file2.mp3" autoplay>
<p>Sorry! Your browser does not support the <i>audio</i> tag</p>
</audio>


Copyright © 2020. All rights reserved.