HTML5 Audio
Audio on the Web
Before HTML5, there was no standard for
playing audio files on a web page.
Before HTML5, audio files could only be
played with a plug-in (like flash).
The HTML5 <audio> element specifies a
standard way to embed audio in a web
page.
The HTML <audio> Element
To play an audio file in HTML, use
the <audio> element:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
HTML Audio - How It Works
The controls attribute adds audio
controls, like play, pause, and volume.
Text between the <audio> and </audio>
tags will display in browsers that do not
support the <audio> element.
Multiple <source> elements can link to
different audio files. The browser will use
the first recognized format.
HTML Audio - Methods, Properties, and Events
HTML5 defines DOM methods, properties, and
events for the <audio> element.
This allows you to load, play, and pause audios,
as well as setting duration and volume.
There are also DOM events that can notify you
when an audio begins to play, is paused, etc.
For a full DOM reference, go to our HTML5
Audio/Video DOM Reference.
Inserting HTML codes for video
A video file can be inserted in a html page
in two ways. The first way would be
using the <embed/> tag. This tag does not
need an ending/finishing tag. It works,
mostly, the same as a tag for an photo
works.
<embed src="example.mpeg"
autostart="false" HEIGHT=60
WIDTH=144/>
Supported extensions for the embed tag
These are:
.swf - made by Macromedia Flash
.wmv - Microsoft Windows Media Video
.mov - Quick Time Movie, belongs to Apple
.mpeg - created by Moving Pictures Expert
Group.
The most used are .mpeg and .swf, because of
the compact format.
Attributes of the embed tag
autostart - establishes whether the file will run
automatically after the page is loaded. Can have
the true or false value
hidden - establishes whether the buttons are hidden or
not. Can have the true or false value.
volume - can have any value from 0 to 100
loop - establishes whether the file will be replayed after
it is finished. Can have the true or false value.
playcount - this establishes how many times the file will
be replayed. For example playcount="2" means it will be
replayed two times and after it will stop.
Inserting a You Tube video
You can do that very easy, because You Tube has on
every page the needed HTML code.
<! -- Here will start the You Tube code --><object
width="425" height="344"><param name="movie"
value="http://www.youtube.com/
v/UAq8qHNWMNw&hl=en&fs=1">
</param><param name="allowFullScreen"
value="true">
</param> <embed src="http://www.youtube.com/
v/UAq8qHNWMNw&hl=en&fs=1" type="application/xshockwave-flash" allowfullscreen="true"
width="425" height="344"></embed></object><! -Here will end the You Tube code -->
HTML <video> controls Attribute
Example
A <video> element with browser default controls:
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Examples of title attribute use that are USEFUL:
Labelling frame or iframe elements:
<frame title="navigation">
Providing a programmatically associated
label for a control in situations where a
visible text label would be redundant:
<input type="text" title="search"> <input
type="submit" value="search">
Inserting Images in Your Documents
<img>
Function:
Inserts an image into a document
Attributes:
ALIGN
ALT
BORDER
CLASSON
CONTROLS
DIR
DYNSRC
HEIGHT
HSPACE
ID
ISMAP
ONDBLCLICK
ONERROR
ONKEYDOWN
KEYPRESS
ONKEYUP
ONLOAD
ONMOUSEDOWN
ONMOUSEMOVE
ONMOUSEOUT
ONMOUSEOVER
ONMOUSEUP
LANG
LONGDESC
LOOP
LOWSRC
NAME
ONABORT
ONCLICK
SRC
START
STYLE
TITLE
USEMAP
VSPACE
WIDTH
End tag:
None in HTML; </img> or <img ... /> with
XHTML
Contains:
Nothing
Used in:
text
