HTML 5 Audio
HTML5 Basics - Part 9
Forward: In this part of the series, we see how to have sound played in a web page.
By: Chrysanthus Date Published: 21 Jul 2012
Introduction
Note: If you cannot see the code or if you think anything is missing (broken link, image absent, etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
Sound Files
Like images, sound exists in files in the server. In order to have sound played in a web page, you have to type the HTML 5 audio element into the web page code. Sound files also exist in different types. These different types are of different technologies.
Basic Inclusion of Sound
Assuming that you know the URL of a sound file in the Internet and you have the right to access the file. The basic way to have that file into your web page is to type the following audio element in the code of your web page:
<audio src="http://www.URL.com/to/the/file.ext">
</audio>
The audio element has an attribute called the source attribute. This attribute is abbreviated to src and it is the abbreviation that is used in the start tag of the element. This attribute has the same meaning as the src attribute we saw for images in the previous part of the series. With images, the value of this attribute is the URL to the image file in a server. Here, the value is the URL to the sound file in a server. The URL ends with the name of the sound file and the file extension (ext).
An example of a sound file type (technology) for the src attribute is, ogg. The extension for ogg sound files is, .ogg. So if you have the ogg file, mysound.ogg, in the same directory as your web page, the following code will include the sound in the web page.
<audio src="mysound.ogg">
</audio>
It may be possible that the browser of the user would not support (play) the type of sound you have included. In this example, the user’s browser may not support the ogg sound type. HTML 5 gives you a convenient way to indicate to the user that his browser does not support the sound type (technology). To achieve this you just type the remark in between the start and end tags of the audio element, like in,
<audio src="mysound.ogg">
You browser does not support the sound technology!
</audio>
There is a problem with the above audio tags: they are more or less the same thing and they are too basic. The above tags would function, but the sound may not play. If you want the sound to start playing as the web page and sound file are completely downloaded, then you would have to type the autoplay attribute into the start tag as follows:
<audio src="mysound.ogg" autoplay>
You browser does not support the sound technology!
</audio>
In practice there may be some delay before you hear the sound.
The autoplay attribute does not take a value. Its presence alone means that there should be auto-play. Its absence means that there should be no auto-play. There are other attributes for the audio element. You can have more than one attribute in the start tag for any HTML 5 element, as long as they are relevant. Here is a list of the attributes and their meanings.
Attribute: Meaning
src: the value is the URL of the sound file in a server.
autoplay: there is no value for this attribute. If the name (autoplay) is present, the sound will start playing as soon as the web page is downloaded. If absent, the user will have to click the play button (see below), before he hears the sound.
loop: this attribute does not have a value. If the name is present the sound will keep repeating from the beginning to the end over and over until the user leaves the web page. If absent, the sound would play only once.
controls: this attribute does not have a value. If present, the browser provides controls (buttons) such as the play, pause, and volume controls. With such controls the user can decide when and for how long he would play sound.
Boolean Attributes
An attribute such as autoplay, which does not take a value and whose effect depends on whether it is present or not, is called a Boolean attribute.
That is it for this part of the series. We stop here and continue in the next part.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT