Dave's Site - Millions Served.
<Table of Contents>
Get Details on GreenGeeks Secure Hosting Learn HTML5 Today!
>>
- Twitter - Dave's Blog - Learn on your iPad


Web Hosting HTML Tutorial CSS Tutorial Web Design Tutorial Hosting under

HTML Code MiniChapter 13: Adding Sounds

HTML Tutorial Chapters:  

Adding Sounds with HTML...

Current HTML does not provide tags for audio and video. The forthcoming HTML5 does. HTML5 is not yet released, but you can start learning about it here.

The following is our current methodology for basic audio. You can also use the flash plug-in to play video and audio.

To add sounds to a web page... we will use the <EMBED> tag. This tag supports many common file formats... such as .wav, .mid, .mp3, and .au. Here is the basic structure of the tag:

<embed src="filename.ext" width="x" height="x" autoplay="x" hidden="x" loop="x" volume="x"></embed>

If you want the file to automatically play when the web page is loaded, set autoplay="true", if you do not want the file to automatically start, set autoplay="false". If you want the control box to be hidden, use the hidden="true" attribute. Normally the file will stop playing after it is completed the first time, so if you want it to start over once it is done use the attribute loop="true". You can set the volume setting with the volume attribute, a value from 1 to 100 (default is 50). The control box size that plays the sound can vary from browser to browser, but some versions of Netscape won't show the box at all unless you specify. (145 and 60 are usually good)

Example of the embed tag...

<embed src="http://www.davesite.com/webstation/html/davesite.mp3" loop="true" autoplay="false" width="145" height="60"></embed>



NOTE: Because this embed tag was not set to autoplay="true", you will need to click the play button to play the sound file.

You may use multiple embed tags within one page, but it is recommended to never set more than one on autoplay. It is also not recommended to use .wav or .au files in the embed tag, because they are very large and take a few minutes to download. (Full-length .mp3's also falls into the category of "too large to use." Try to keep the clips SHORT.)

HTML Code - Try it Yourself!

In the Box below, type the following HTML code, then click "Check it Out!" The HTML document you made will be displayed in your browser. You may wish to change the words within the tags just to try it out.



Try typing this:

<html>
<head><title>Little Joe's Sound Page</title></head>
<body>

<embed src="http://www.davesite.com/webstation/html/davesite.mp3" width="145" height="60" autoplay="false"></embed>
welcome to davesite.com<br>

This page Copyright &copy; Little Joe's Pages &amp; davesite.com.

</body>
</html>
Be Rewarded 
with the Web's Premiere Rewards Site

Download Web Design Basics for iPad to Learn HTML and CSS Quickly.
Copyright © Dave Kristula. All rights reserved.
URL: http://www.davesite.com/webstation/html/chap13.shtml