Reviews and recommendations on this web site, including web hosting reviews, may result in commissions paid to Dave's Site. Follow on Twitter @firstdave
Check Out my new PhoneGap Tutorial / Cordova Tutorial


Hosting Tutorial - Table of Contents
This course was developed in much earlier days of the web and has been updated
into Web Design Basics for iPad (also written by me, but much better course!)
Try iPage Web Hosting -- Go Green for only $1.99/month (sponsored link)
Web Hosting HTML Tutorial CSS Tutorial Web Design Tutorial Hosting under $5


HTML Code MiniChapter 13: Adding Sounds

HTML Tutorial Chapters:  

HTML5 Basics - Web Hosting Ideas - CSS, Web Design, HTML, JQuery - Twitter - Learn on your iPad

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>
iPage has the Best Support

Download the app that replaced this guide,
Web Design Basics for iPad to
Learn HTML and CSS Quickly.