The
<audio>
element which is considered a media element, embeds a sound file or
audio stream in the web page without requiring a plugin. A plugin is
something like a little piece of
software
that adds a specific feature or service to a larger piece of software
when added, usually related to your web browser, for instance some
popular plugins are Adobe Flash Player, RealPlayer and QuickTime. When
content is placed between the
<audio> element's start tag and end tag, user agents, for example a browser, that support the
<audio> element should not show the
<audio> element's content to the user. The
<audio> element's content is intended for older Web browsers that do not support the
<audio> element, so that legacy audio plugins can be tried, or the
<audio> element's contents displayed to the users that still use old browsers that don't support the
<audio> element,
informing them on how to access the audio data, like music for example.
The <audio> element requires both a start tag and an end tag.
When the controls attribute is used with the
<audio> element, the
<audio> element can not be placed inside an <a> element or <button> element.
The
<audio>
element is allowed to use any global attribute, you can learn more about
global attributes and how to use them in an earlier tutorial that I
wrote called "
What The Heck Are Global Attributes In HTML?". The
<audio>
element can also use the attributes autoplay, preload, controls, loop
and src, I will explain about these attributes in detail later on, after
I show you how to
code in the
<audio> element. But for now I will briefly explain the
src and
controls attributes since we will be using them in our first example. The
src attribute will specify the
location of the media file to be played. And the
controls attribute will specify that the playback controls should be displayed.
If the
<audio> element does not have an
src attribute, the contents of the
<audio> element must follow a specific
ordered
structure which starts with one or more <source> element's, then
zero or more <track> element's, then followed by flow content or
phrasing content. I will explain what flow content and phrasing content
is and when you should use each one of them later on this tutorial.
So basically, if you do not place an src attribute in the <audio> element, your <audio> element's content structure should follow the following order below.
-
One or more <source> element's.
-
Then zero or more <track> element's.
-
Followed by flow content or phrasing content.
Now if the <audio> element includes an src attribute it's important to remember that the contents of the <audio>
element must follow a specific ordered structure which starts with zero
or more <track> element's, followed by flow content or phrasing
content. I will explain when you should use flow content or phrasing
content later on in this tutorial.
So in-other words, if you include an src attribute in the <audio> element, your <audio> element's content structure should follow the following order below.
-
Zero or more <track> element's.
-
Followed by flow content or phrasing content.
Now let me explain when you should and should not use flow content or phrasing content below.
When the <audio> element is placed inside another element that is allowed to contain flow elements, then the contents of the <audio> element may also contain flow elements.
And when the <audio>
element is placed inside another element that restricts other elements
that are placed in it to only being phrasing elements, then the contents
of the <audio> element is also restricted to containing only phrasing elements.
It's important to remember that not all the browsers support the same
audio file formats, for example Firefox 4 and Opera 11 browsers don't
support the .mp3 format, but they both support the .ogg and .wav
formats. In case you are wondering what is an audio file format, it's
basically a medium for storing digital audio data like sound and music
on a computer system.
Here is how to code the <audio> element with the src and controls attributes for HTML5 in the example below in-order to add a playable audio file to your web pages.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome To HTML5</title>
</head>
<body>
<audio src="music.mp3" controls>
<p>This browser doesn't support the audio element.</p>
</audio>
</body>
</html>
And here is how to code the new <audio> element with the src and controls attributes for HTML5 to create our XHTML5 web page.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta charset="UTF-8" />
<title>Welcome To XHTML5</title>
</head>
<body>
<audio src="music.mp3" controls="controls">
<p>This browser doesn't support the audio element.</p>
</audio>
</body>
</html>
Now let me explain the <audio> element's autoplay, preload, controls, loop and src attributes, which I will list and explain below.
-
autoplay
-
The autoplay attribute will play the media file automatically as soon as it is ready. The autoplay
attribute instructs the user agent, for example a browser, to
automatically begin playback of the sound file or audio stream as soon
as it can without stopping.
The
autoplay attribute is a boolean attribute, which means that the
autoplay attribute needs no value for HTML5 web pages, all you have to do is include the word
autoplay
in the desired <audio> element and you're done. But in XHTML you
need to include a value for all the attributes even for the boolean
attributes, for example the
autoplay attribute will need to have a value of
autoplay, for instance
autoplay="autoplay" in-order for the attribute to validate in XHTML.
Here is how to code the
autoplay attribute for the <audio> element for HTML5 in the example below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome To HTML5</title>
</head>
<body>
<audio src="music.mp3" controls autoplay>
<p>This browser doesn't support the audio element.</p>
</audio>
</body>
</html>
And here is how to code the
autoplay attribute for the <audio> element for XHTML5 in the example below.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta charset="UTF-8" />
<title>Welcome To XHTML5</title>
</head>
<body>
<audio src="music.mp3" controls="controls" autoplay="autoplay">
<p>This browser doesn't support the audio element.</p>
</audio>
</body>
</html>
-
preload
-
Before I discuss the preload attribute you should know that the preload attribute used to be the autobuffer attribute but was changed to the preload attribute in the W3.org specifications. The autobuffer attribute is a boolean attribute, just in case you were wondering.
The preload attribute specifies whether or not the audio should be loaded when the page loads. The preload
attribute is an enumerated attribute, which means that it has a set
list of values also known as keywords that you can choose from, which
include none, metadata and auto. I will explain about these values below.
The first value is the none value. The value none
informs the user agent, for example the browser, that either the web
pages creator, in other words the author does not expect the user to
need the media resource, or that the server wants to minimize
unnecessary traffic. A simpler way to put it is that the none
value suggests to the browser that it shouldn't preload the sound file
or audio stream until the user activates the controls, for instance by
pressing the play button.
Now the metadata
value informs the user agent, for example the browser, that the user is
not expected to need the sound file or audio stream, but that fetching
its metadata, for example its duration, track list, dimensions and so
on, is the priority. So basically, the metadata
value suggests to the browser that it should just prefetch the media
files metadata, for example, the dimensions, track list, duration, and
so on, but that it should not download anything further until the user
activates the controls, for instance by pressing the play button.
The third value auto
informs the user agent, for example the browser, that it should
download the entire sound file or audio stream when the web page loads.
It's important to remember that the browser may ignore the auto value, because of the users browsers settings or because it detected that the user has a very slow internet connection.
You may also leave the preload attributes value empty, for instance in HTML5 web pages if you just state the name preload or preload="" it will act like the auto value. In XHTML5 web pages you will have to state an empty preload attributes value in the following way, for example, preload="" in-order for your web pages to validate. Leaving the preload attributes value empty is considered a valid keyword which means your web pages will still validate.
Another important thing you should remember is that if the autoplay attribute is stated it can override the preload attribute, this happens because if the media file plays, it naturally has to buffer first, regardless of the preload attributes value. However, including both the preload attribute and autoplay attribute, will not result in an error.
Here is how to code the
preload attribute using the
metadata value for the <audio> element for HTML5 in the example below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome To HTML5</title>
</head>
<body>
<audio src="music.mp3" controls preload="metadata">
<p>This browser doesn't support the audio element.</p>
</audio>
</body>
</html>
And here is how to code the
preload attribute using the
metadata value for the <audio> element for XHTML5 in the example below.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta charset="UTF-8" />
<title>Welcome To XHTML5</title>
</head>
<body>
<audio src="music.mp3" controls="controls" preload="metadata">
<p>This browser doesn't support the audio element.</p>
</audio>
</body>
</html>
-
controls
-
The controls
attribute indicates that the user agent, for instance a browser, should
display its own set of playback controls for the sound file or audio
stream also known as a media file. The playback controls can include the
play, pause, seeking, and volume controls, which are better known as
the play, pause, seek and volume buttons.
The
controls attribute is a boolean attribute, which means that the
controls attribute needs no value for HTML5 web pages, all you have to do is include the word
controls
in the desired <audio> element and you're done. But in XHTML you
need to include a value for all the attributes even for the boolean
attributes, for example the
controls attribute will need to have a value of
controls, for instance
controls="controls" in-order for the attribute to validate in XHTML.
Here is how to code the
controls attribute for the <audio> element for HTML5 in the example below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome To HTML5</title>
</head>
<body>
<audio src="music.mp3" controls>
<p>This browser doesn't support the audio element.</p>
</audio>
</body>
</html>
And here is how to code the
controls attribute for the <audio> element for XHTML5 in the example below.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta charset="UTF-8" />
<title>Welcome To XHTML5</title>
</head>
<body>
<audio src="music.mp3" controls="controls">
<p>This browser doesn't support the audio element.</p>
</audio>
</body>
</html>
-
loop
-
The loop
attribute indicates that the media file, for example a music clip,
should start playing again automatically once it reaches the end.
The
loop attribute is a boolean attribute, which means that the
loop attribute needs no value for HTML5 web pages, all you have to do is include the word
loop
in the desired <audio> element and you're done. But in XHTML you
need to include a value for all the attributes even for the boolean
attributes, for example the
loop attribute will need to have a value of
loop, for instance
loop="loop" in-order for the attribute to validate in XHTML.
Here is how to code the
loop attribute for the <audio> element for HTML5 in the example below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome To HTML5</title>
</head>
<body>
<audio src="music.mp3" controls loop>
<p>This browser doesn't support the audio element.</p>
</audio>
</body>
</html>
And here is how to code the
loop attribute for the <audio> element for XHTML5 in the example below.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta charset="UTF-8" />
<title>Welcome To XHTML5</title>
</head>
<body>
<audio src="music.mp3" controls="controls" loop="loop">
<p>This browser doesn't support the audio element.</p>
</audio>
</body>
</html>
-
src
-
Now the src attribute specifies the location of the media file to be played, for example a music clip.
The src attributes value can be an absolute URL value, for instance src="http://www.example.com/music.ogg" or it can be a relative URL value, for example src="/music.ogg", both types of URL's can optionally have leading and/or trailing space characters, which basically means that your src attributes URL value can have white space before and or after the URL value, for example src=" http://www.example.com/music.ogg ".
It's important to remember that you can also indicate a media file,
for example a music clip, by using the <source> element as well. I
will explain about the <source> element in a future tutorial.
Here is how to code the
src attribute for the <audio> element for HTML5 in the example below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome To HTML5</title>
</head>
<body>
<audio src="http://www.example.com/music.mp3" controls>
<p>This browser doesn't support the audio element.</p>
</audio>
</body>
</html>
And here is how to code the
src attribute for the <audio> element for XHTML5 in the example below.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta charset="UTF-8" />
<title>Welcome To XHTML5</title>
</head>
<body>
<audio src="http://www.example.com/music.mp3" controls="controls">
<p>This browser doesn't support the audio element.</p>
</audio>
</body>
</html>
300Ribu Dapat Website
