Before detailing how to add audio to a web page in a valid HTML fashion, there are warnings that must be given. Audio files can be very large. An excessively large file can have a huge impact on your pages load time and can even result in crashing the users computer. Audio files come in may types and not all computers recognize all of them. Use of audio that you do not have license to use on a website is illegal and publicly exposed. It makes you a target for enforcement that is to tempting to resist.
Broadest compatibility across platforms can be obtained by using Midi (.mid) or Wave (.wav) files. Both are fully supported by almost all common types of systems. Midi files are a form of enhanced musical score stored in a simple text file format. They are very compact, but cannot contain voice data. (They are instrumental only.) Wave files are raw audio data samples taken at a frequency rate, bit depth and channel count specified at the beginning of the file. Wave files are huge! A simple click sound can be from five to fifty or so kilobytes in size. MP3s are becoming more widely compatible, but like Wave files are typically to large to auto play. If you want to use Wave or MP3 audio with your pages, the best recommendation that can be made is to simply link to the file(s).
License issues are serious here. A retail purchase of an audio CD or file does not typically give you license to publicly distribute it and that is what putting it on a website is. You should only use audio that can be publicly distributed or that you have created. Creating Wave files is easy. Windows provides the sound recorder applet for doing this and Linux has a wonderful tool called Audacity available with integrated synthesizer, MP3 and Ogg support. Many factory Windows computers come with audio software that can convert Wave files to MP3s. Windows and Linux users should note that using applications from sourceforge.net that incorporate "lame" may be illegal in your country. (Hint, Hint!) (See Footnote!) There are lots of Midi files available with some type of open licensing. Creating Midi files is best left to those with the appropriate specialized software and skills necessary to use it effectively.
Finally, there are two ways to incorporate audio in a web page that will let your HTML validate that I am aware of. The first of the two is a very lightweight solution. It is to simply create a hyper-link to the audio file. While this is inelegant, it does give the page viewer the option of deciding what to do about the audio. The second is to use the object tag. Using it, an audio object can be embedded into your page. Unfortunately doing this is not terribly browser compatible. If the user does not have browser plug-in support for the type of audio file you have chosen to use they will probably be asked to download an appropriate one. Oh Well, at least the code is valid.
Code example of a link to an audio file:
<a href="MyNoise.mid" title="Download or Play, You Decide!">My Noise</a>
The title attribute is optional, but appropriate. Give your users as much of a clue as you can. Well written pages make their content as accessible and understandable as possible. The href attribute is required, of course. You must provide a pointer to the file to play or download.
The object element should typically use four attributes. The type attribute is used to specify the MIME type of the audio data. The data attribute specifies the source audio file as a URI. It can be relative or absolute. Width and height can be used to control the visibility of the player plug-in.
The param elements are also necessary for getting the file to play properly. They communicate specific play settings to different plug-ins. If you're interested in a little experimenting try to find settings that will allow the playback to loop. It can be done.
The alt data is just what it appears to be. It will be displayed if the browser doesn't support playback for the file. Use it as you feel is appropriate.
There are other ways to play audio from a web page. The one below can be reasonably reliable, but it may not be so in the future.
Code example that won't validate, but can work reasonably well:
The purpose of the attributes in the above example should be reasonably obvious. Src is the file to play. Width and Height specify player plug-in dimensions. Repeat and loop tell different plug-ins if the file should be played once or looped. This may be helpful for the suggested experimenting above.
Footnote: This is just more media industry DRM B$ and really sets me off! This is obviously what should be a legitimate use of an open source conversion tool. Allowing the greedy B#!%#!%s to deny use of it like this, through software patent stuff, just because it can be used for illegitimate purposes, is ridiculous. Software patents need to be banned!
"The road to truth is long, and lined the entire way with annoying bastards." - Alexander Jablokov
