Put a Music Off Switch on Your Webpage
By Stephen Bucaro
You've just learned how easy it is to configure a background sound for your
webpage, and you think it's golly gee wiz amazing. You force visitors to your webpage
to listen to your favorite music because you thinks it's the best thing since the
invention of apple pie.
Visitors to your webpage are very interested in the important information that
your webpage provides. Unfortunately they think the music is annoying. Which of the
actions below do you think they will take to stop the annoying music?
1. Reconfigure their computer's sound application's volume setting.
2. Unplug their computer's speakers.
3. Quickly click away from your website and never return.
If you answered number 3, at least you are not a total idiot. You probably have
just not yet figured out how to put a music "off switch" on your webpage. I'm
going to help you with that right now.
The first thing you need to do is to remove that <BGSOUND> tag from your
webpage and replace it with an <embed> tag. This allows you to provide your
visitors with much more control over the music. Below is an example of an <embed> tag.
<embed type="audio/mpeg" src="sugarplumfairy.mp3" width="100" height="100" autostart="true" loop="true">
This code causes the music file "sugarplumfairy.mp3" to start playing when your
webpage loads and to repeat the music in a loop. But unlike the <BGSOUND> tag,
this code displays the user's default music player application's controls on the
webpage. With Internet Explorer that would be Windows Media Player Controls in most
cases. Now your visitor has the option to turn the music off.
Maybe you don't want to display those controls on your webpage. You just want a
simple on⁄off switch. The code below displays two little radio buttons on your
webpage. The user can turn the music off and on by clicking on the radio buttons.
<table bgcolor="#00ff00" border=1>
<tr><td>Music</td></tr>
<tr><td>On<input type="radio" name="sound" value="on" checked onClick="Play(this.value)">
<br />Off<input type="radio" name="sound" value="off" onClick="Play(this.value)">
<br></td></tr>
</table>
<span id="music"><embed type="audio/mpeg" src="sugarplumfairy.mp3" autostart="true" loop="true" width=0 height=0></span>
Note that the code above puts the embed tag inside a span with the id="music".
In order for the radio buttons to work, you need to paste the following code
inside the <head> section of your webpage.
<script language="JavaScript">
function Play(set)
{
if(set == "on")
{
document.getElementById("music").innerHTML = "<embed type='audio/mpeg' src='sugarplumfairy.mp3' autostart='true' loop='true' width='0' height='0'>";
}
else
{
document.getElementById("music").innerHTML = "<embed type='audio/mpeg' src='sugarplumfairy.mp3' autostart='false' loop='false' width='0' height='0'>";
}
}
</script>
| 
About BTH
User Agreement
Privacy
Site Map
Contact
Advertise Here
News Feeds
Free Downloads
RSS Feed
