Sound and the HTML Object Element

Google+ Pinterest LinkedIn Tumblr +

Introduction
There is no HTML tag today for sound. There is one for image (the IMG tag), there are plenty for text (Paragraph tag, SPAN tag, etc.), but there is none for sound. There is however the HTML OBJECT (OBJECT tag) which you can use for any media. Media means text, image, sound, animation and video.

Each major browser has its own element (tag) for sound. If you want a simple code that will work for all browsers then you should use the OBJECT element. In this article I show you the obvious and logical way to use the Object element to produce sound in your web page.

You need basic knowledge in HTML and JavaScript to understand this article. The code in this article works well with the Opera 9 browser. It should work reasonably with the new versions of the other major browsers.

Note: If you cannot see the code or if you think anything is missing in this article (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Inline and Non-Inline Sound
When a web page opens (is just loaded) and you start hearing sound, that sound is inline sound. When you have click a button (or an event occurs) and you start hearing sound, that is non-inline sound.

Sound Type
Sound is recorded and stored at the server as a file. Because of different technologies to produce the file, there are different sound types. The type of a sound is usually indicated by the extension of the sound file. The wav and MP3 types are supported by almost all browsers and almost all operating systems. In this article I assume that the sound type you are using is supported by the browser of the user.

The HTML Object element has a type attribute. You indicate the type of sound in this attribute. For the wav type, the attribute will be

type=”audio/wav”

For the MP3 type, the attribute will be

type=”audio/mp3″

The attribute of the type attribute begins with “audio” followed by a forward slash and then the extension of the file, without the dot.

Plug-in
A plug-in is the software that actually plays the sound. Before your web page can play sound a plug-in has to be installed with your browser. If you are dealing with a wav type or MP3 type and the plug-in is not installed, your browser would ask you if you want it installed (when the page for the sound is opened). If you “click” Yes, the browser will look for some free version of the plug-in in the Internet and install. You can then here the sound.

The HTML Object Element and Sound
The HTML Object element needs at least two attributes to play sound. One is called the data attribute and the other is the type attribute (see above). The value of the data attribute is the URL of the sound file at the server. The Object element requires the start and the end tag. The HTML Object element is an inline-level element. You can float it or convert it to a block-level element.

Inline Sound with the Object Element
The following code will start playing its sound as soon as the web page is displayed:

Note the data attribute and its URL. Note the type attribute and its value. Note the start and end tags of the Object element. I have not given any content (between the start and end tags) for this Object element.

The Object element would actually occupy space on the web page. So I have given it a zero width and zero height value so that it should not occupy space. Under this condition, the user only hears the sound.

If you want the user to be aware that sound has been embedded into the web page, then you should give the Object element some dimensions. If the plug-in is installed, you might see an image of the sound player, indicating the file name of the sound being played.

The following code illustrates this for the dimensions:

The width is 150px. The height is 150px. The object has been given a border of 2px, for better identification at the browser.

Disadvantage of Inline Sound
Inline sound is sound that starts playing as soon as the web page is loaded. Many viewers find this annoying. So, it is good to give the user the possibility to start and stop the sound.

Starting and Stopping sound with JavaScript
There is no official way to start sound with the Object element. We can however start sound as follows: When we want the sound we, use JavaScript to give the value of the data attribute of the Object element the URL of the sound file. The object is designed without the data attribute and its value. So no sound is played, as the web page is opened. We need one HTML button to play (start) the sound. There is no official way to stop the sound once it is playing. We can however, stop it (see below). In this way the user can start and stop the sound when he wishes (as the web page is displayed).

For this situation, we have two HTML object elements: one enclosing the other. The one inside is the sound Object and it is the one controlled by JavaScript. The one outside is like a frame that holds the one inside and any HTML buttons.

Now, if the sound file were big, it would take time to download. This means when the user clicks the Play button, he might have to wait before he starts hearing the sound. This problem might be avoided by using the Object archive’s attribute. This is an attribute, which would download the sound as soon as the page is loaded. While the sound will be at your browser, it will not be playing until you assign the URL to the data attribute (as mentioned above). The value of the archive attribute is also the URL (of the sound).

In the following example the design is such that the complete object is floated to the right. Try the code (use your own sound file); you might need to work with an actual web server.

function play()
{
document.getElementById(‘O1’).data = document.getElementById(‘O1’).archive
}

Some text.

Play

Some text

One way to stop the sound is to reload (refresh) the page with JavaScript code so that everything starts over again. When the page is reloaded, the user does not hear the sound since the URL of the sound at this point, is at the archive attribute and not at the data attribute. However, reloading the page is not recommended as a method of stopping the sound, as some interaction, which you coded, might be in the process of execution. If you did not code any interaction to be going on while the sound is playing, then you can reload the page to stop the sound. When a browser successfully loads a page for the first time it caches it (with its resources). So reloading a page after an initial successful loading will reproduce the page instantaneously. Still, reloading the web page is not a gallant way to stop the sound. Well, the following code will stop the sound by reloading the page (you can try it):

function play()
{
document.getElementById(‘O1’).data = document.getElementById(‘O1’).archive
}
function stop()
{
.reload();
}

Some text.

PlayStop

Some text

Repeating the Sound
When the sound finish playing, there is no official way of repeat it, you can only reload the page and click Play again.

Play, Pause, Rewind, Fast Forward, Stop, Repeat
The Object element does not give us any of these functions. In fact we have forced the Play and Stop functions above. However, there are special plug-ins (software) that come with all these functions. The problem with such software is that it would work for one browser and not work for another. In other to use such software, you would have to learn more about the HTML Object element and the software itself.

Conclusion
To play sound using the HTML Object element, make use of the data and type attributes for the Object element. You would need to use JavaScript if you want to determine when to start and when to stop the sound.

Chrys

Share.

About Author

Leave A Reply