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
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
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
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">
Lets break that down by each attribute
Tells the browser to embed the following URL (here the relative URL "test.wav" - you could use an absolute URL )
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.
Determine the size of the sound controls. Here 140 x 60 pixels
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">
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
type="audio/wav" width="100" height="20">
<param name="controls" value="console" valuetype="data">
<param name="autostart" value="yes" valuetype="data">
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.
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