How to Add Audio to a Website or Home Page

Mark L.
Lots of websites use audio for multiple purposes. Here's a brief tutorial on how to use audio on your own site.

Upload it
Naturally, the first step is to upload the audio file. Just use your ftp to upload the file as you would any other, and remember the audio file's url. Also, take into account the file size. Different types of audio files tend to have different sizes and smaller ones function better. Midis are generally the best, though .wav and .au files can hold more.

Link to it
One way to have audio on your page is to link to it. Any savvy HTML user knows the code to create a link. It will look like this:

{a href="xyz.wav"}Text here{/a}

Where "xyz.wav" is the audio file's url and "Text here" is what will appear as a link. Naturally, use > and < in place of } and {. I only use those to avoid auto-formatting.

Embed it
The more popular system is embedding the sound, such that a small control panel will appear on the page, with which the user can control the sound. The panel can also be invisible, and the sound can either start playing when the website loads or wait for the user to click on it. WARNING: Be very careful about having sound start automatically. An automatic sound will make the website take longer to load, and we all know how quickly everyone on the internet browses. If the page takes too long to load, the user may click away. You can also alter the size of the control panel, the volume, etc. See the image for the appearance of the controls.

The tag reads:

{embed src="xyz.wav"}{/embed}

Where "xyz.wav" is the audio file's url. Use > and < in place of } and {.

You can add attributes to the embed tag. Attributes follow after src="xyz.com" but within the first bracket, and should all be separated by a space. They take the form of: attribute="option". Here's a list of them:

Attributes
autostart="true/false" - This determines whether the sound starts automatically. Use autostart="true" to start the sound automatically or autostart="false" to prevent it from doing so. If neither attribute is specified, "false" is the default.

width="x", height="x" - These determine the width and height of the panel. I highly recommend using these, since some versions of Netscape won't show the panel unless the size is specified. Good sizes are around 150 for width and 50 for height.

hidden="true/false" - This determines whether the panel appears or is hidden. Use hidden="true" to hide it and hidden="false" to show it. If neither is specified, the panel will be visible.

loop="true/false" - This will determine whether the sound repeats after it finishes playing. Use loop="true" to keep it repeating until the user stops it or loop="false" to have it stop after playing once. If neither is specified, "false" is the default.

volume="x" - This determines how loud the sound will be, using any number from 1 to 100. 50 is default.

You can use any or all of these attributes. Your tag, when finished, may appear something like this:

{embed src="xyz.wav" loop="true" autoplay="false" hidden="false" volume="75" width="150" height="50"}{/embed}

Use > and < in place of } and {.

Good luck!

Published by Mark L.

Currently residing on Staten Island, NY, and writing for Long Island Blitz (liblitz.com), covering high school football on Long Island.  View profile

To comment, please sign in to your Yahoo! account, or sign up for a new account.