ADDING SOUND WITH HTML

Just a reminder note about copyright. This is much the same as site graphics. If you are putting music & audio on your site that you wrote, hold the copyright to (if there is one) and performed that is then that's okay under most countries' and international law (assuming it fulfils international and locally acceptable laws about it contents and lyrics - i.e.. Don't put a song on-line if if against the law to play it in front of an audience). Clearly if you change your entire music collection or a film's audio track into downloadable files and place it on the web without permission from the relevant parties that is illegal and you might well end up being at the wrong end of a legal action. Between this the key is permission, so basically if in doubt don't do it and see about getting permission first (These thing vary from country to country and company to company - so we're not going to bore you to death about it and give potentially false legal info).

Many people want to add sound to their webpages. For example many new bands will include.mp3 or .wma samples of their music for download from their site. Many people like to put background sound onto their webpages. Tons of sites offer streamed audio and video feeds.

We now have a major section giving an overview to creating and adding sounds to your website in our other tutorials section. This should cover all the basics you need to know & we'd recommend you startthere.

However here is our quick guide to adding sound via HTML. We don't go into details of how to create sound files or the pros and cons of file types as this is coveredelsewhere.

There are 3 ways to put sound on your page

Basic download link
Embedded and Background Sounds
Streaming audio

Basic download link

The most basic way to add a sound to a page is to do so in the form of a link. This will be downloaded and then played separate to the browser window

Click here for an example

This is essentially coded like any other link

<a href="test.wav" target="_blank">
Click here for example
</a>

And that's it !!!

Note we've set the target attribute (target="_blank"). That's because some browser will open the sound file and jump from your current page. Using target creates a new page (for more see frames)

Embedded and Background Sounds

Many choose to "embed" music or sounds automatically within the web page or have them in the background. This can be a bit fraught sadly due to conflicting standards & browser differences.

There are 3 competing tags you need to know about

<embed> <bgsound> <object>

The<embed> tag is historically the oldest and still works on netscape and some other browser. Using allows you to simply embed sound files into the pages like graphics. Sadly its working is highly dependant on plugin & browsers settings

Hear me speak ->

(sorry to some. It may not work dependant
on your browser & plugins)

Here's the code for the above example

<embed src="test.wav" autostart="false"
width="140" height="60" loop="false">
</embed>

Lets break that down by each attribute

<embed src="test.wav"
Tells the browser to embed the following URL (here the relative URL "test.wav" - you could use an absolute URL )

autostart="false"
Tells the browser not to automatically play the sound file (the autoplay value is "true"). If this is set at "false" you'll need to display the controls to allow users to turn on the sound effects- see below). Values are true or false.

width="140" height="60"
Determine the size of the sound controls. Here 140 x 60 pixels

loop="false"
Tell the browser not to repeat (loop) the file. Is set at true or infinite will run add nauseam or you can assign a value. Note it appears you must have some of the sound control unit present for this to work (e.g. try setting width and height at "10") with navigator

Now if you make it really small you can hide the player

Here the sound is coded by

<embed src="test.wav" autostart="true"
width="1" height="10" loop="true">
</embed>

Okay.

Now those of using browsers like the latest version of internet explorer will be get a bit fed up as nothing is happening.

They have a handy <bgsound> tag

Again the tag does exactly what the name say

The essentials of the example below are coded by

<bgsound src="test.wav" loop=infinite>

loop serves the same function as you get with <embed>.

The final tag is the <object> tag

This is a jack of all trades tag designed to be the key tag for multimedia elements (you can even add images with it). In HTML 4 it was brought in to replace multimedia tags like <embed> and<applet>.

Guess what ? browser support is very poor

Here's the code

<object classid="../grapix/test.wav"
type="audio/wav" width="100" height="20">
<param name="controls" value="console" valuetype="data">
<param name="autostart" value="yes" valuetype="data">
</object>

Looks not unlike the <applet> tag, doesn't it?

Essentially the object tag defines the embedded "object" located at the classid. Thetype tag just defines the media type (n.b. some would suggest using audio/x-wav instead). Just as with the <applet> tag the <param> tags define the parameters for that object

As a rule, we don't like background sounds for rather obvious reasons.

We find intro sounds a bit gimmicky and really detest background music. You really might enjoy your rendition of Vivaldi on a stylophone. But not everyone else will, especially if its stuck on a permanent loop, so put a set of on-off controls or you might find your hit count dropping.

Streaming audio

Normal audio files must be downloaded before they'll play. Obviously with long high quality files this can be an issue. Streaming media plays as it downloads (often called on demand). It's a wee bit trickier so we've covered it in it's own set of tutorials

BACK TO INTERMEDIATE HTML MENU