Scribd
Upload
38 views9 pages

Audio: Prof. David Rossiter

This document discusses how to handle audio playback in HTML documents. It covers the <audio> tag and attributes like src, autoplay, controls, and loop. These attributes control whether the audio plays automatically, displays playback controls, and repeats indefinitely. It also notes that older browsers may not support newer HTML tags, so alternatives are provided like warning messages for unsupported browsers.

Uploaded by

Pedro Pamplona
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
38 views9 pages

Audio: Prof. David Rossiter

This document discusses how to handle audio playback in HTML documents. It covers the <audio> tag and attributes like src, autoplay, controls, and loop. These attributes control whether the audio plays automatically, displays playback controls, and repeats indefinitely. It also notes that older browsers may not support newer HTML tags, so alternatives are provided like warning messages for unsupported browsers.

Uploaded by

Pedro Pamplona
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

AUDIO

PROF. DAVID ROSSITER

1/9

AFTER THIS PRESENTATION


You'll be able to handle audio

2/9

ELEMENTS & ATTRIBUTES WE WILL LOOK AT


<audio>

src attribute
autoplay attribute
controls attribute
loop attribute
alt attribute

3/9

HANDLING SOUND
<audio> by itself adds a soundfile, but doesn't play it
<audiosrc="beets_turnips.mp3"></audio>

autoplay makes the sound start as soon as the page loads


<audiosrc="beets_turnips.mp3"autoplay></audio>

Open the example to experience it

4/9

SOUND CONTROLS
<audiosrc="beets_turnips.mp3"controls></audio>

Add controls to tell the browser to show playback controls


3:00

5/9

LOOPING SOUND
Add loop to repeat the sound indefinitely
<audiosrc="drum_loop.mp3"autoplayloop></audio>

Open the example to experience it

6/9

SOUND IN OLDER BROWSERS


In general, for sound it's wise to use MP3 format sound
This is supposed to work in all modern browsers

7/9

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,yourbrowsercan'thandle<i>this_new_html_tag</i>!</p>
</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
8/9

AN EXAMPLE OF HANDLING OLDER BROWSERS


Here's an example using audio:
<audiosrc="drum_loop.mp3"autoplay>

<p>Sorry!Yourbrowserdoesnotsupportthe<i>audio</i>tag</p>
</audio>

9/9

You might also like