Read my article HTML5 apps as a learning tool
<Table of Contents>
Get Details on GreenGeeks Secure Hosting Learn HTML5 Today!
>>
- Bob's HTML Course - Take HTML5 Lessons - 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

FatCow Web Hosting. Free Trial , Free Setup, Free Support -- All risk free!

HTML Tutorial Chapters:  

iPage Hosting $95 Plan on sale today for $1.89/mo
Click Here for More Details!

FatCow Plan for $3.15/mo. only

Get Web Design Basics for iPad

Web Design Basics

I have a new iPad Course: Web Design Basics.   Download your copy now from AppStore.
Web Design Basics covers both HTML and CSS together in one interactive guide.   Get it Now!


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>
FatCow Plan

Copyright © Dave Kristula. All rights reserved.
URL: http://www.davesite.com/webstation/html/chap13.shtml