music on/off link

**mavrick422** · 12-26-2005, 12:55 AM

is it possible to put a "music on/off" thing on a page using anything besides flash? here's an example of what i mean:

http://www.dreamit-doit.com/flash/home_flash.swf

(the little speaker image on the bottom left) thanks

**jscheuer1** · 12-26-2005, 01:51 AM

A while ago I realized that there was probably a cross browser way to do this and have just come up with this script for it, put this script in the head of the page:

Code:

<script type="text/javascript">

/*Toggle Sound Script © John Davenport Scheuer
  as first seen in www.dynamicdrive.com/forums (user name:
  jscheuer1). Visit http://www.dynamicdrive.com for 100's
  of DHTML scripts.  This credit must remain for legal use.
  */

var sndEl="chimes.wav"  //Set to name and path of your sound file

function toggleSound(){
if (document.all&&document.all.sound&&document.all.sound.src!=='')
document.all.sound.src=''
else if (document.getElementById&&document.getElementById('snd')){
sndEl=document.getElementById('snd')
document.getElementById('sndC').removeChild(sndEl)
}
else if (document.all&&document.all.sound&&document.all.sound.src=='')
document.all.sound.src=sndEl
else if (document.getElementById)
document.getElementById('sndC').appendChild(sndEl)
}

</script>

and this bit of code in the body of the page, where you want the button to appear:

Code:

<!-- Begin Toggle Sound Code -->
<!--[if IE]>
<script type="text/javascript">
document.write('<bgsound id="sound" src="'+sndEl+'" loop="-1">')
</script>
<![endif]-->

<script type="text/javascript">
if (document.getElementById&&!document.getElementById('sound')){
document.write('<div id="sndC" style="position:absolute;top:-1000px:left:-1000px;visibility:hidden;">')
document.write('<embed id="snd" src="'+sndEl+'" autostart="true" hidden="true" loop="true">')
document.write('</div>')
}
document.write('<input type="button" onclick="toggleSound();">')
</script>
<!-- End Toggle Sound Code -->

At the very end of the second bit in the body, you can substitute whatever you like for the button. Use an image, a link or whatever, as long as the onclick event remains the same (add return false; to it for a link). You could even use an image that gets swapped, like in your example but, that would take a little bit more coding.

**mavrick422** · 12-26-2005, 05:14 AM

thanks so much man...now for the configuring. the onlick=togglesound code seems to play the music over the current music. so if the music was playing and i pressed the button, i would hear two audio files over each other.how would i fix this? also, can i use jave a have the image when the music is playing say "music off" and when the music is off, say "music on". i would be eternally gratefull if you could tell me how to do this.

**jscheuer1** · 12-26-2005, 07:17 AM

I'm not sure what you are saying about music over music. The idea is that this script becomes both the means by which the music is played and the means by which the music is stopped and started. There should be no other code on your page, not even a flash file, that plays the music, if there is, that is what is making the music play over itself. I just got finished messing around with this one, for the time being I think, and came up with a way to just about duplicate the way the flash file worked. Here is the complete demo page and I'll attach the images I'm using as well, you will need to come up with your own sound file (try the page just by itself first, to see how it works):

This is the 'active_img' image:

Name: active_img1_o.gif
Views: 12445
Size: 280 Bytes

the 'music_on' image:

Name: music_on1s_o.gif
Views: 12425
Size: 738 Bytes

the 'music_off' image:

Name: music_off1s_o.gif
Views: 12361
Size: 171 Bytes

The Demo Page:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Toggle Sound - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#text {
visibility:hidden;
font-family:verdana, arial, sans-serif;
font-size:80%;
position:relative;
top:-12px;
color:gray;
}
</style>
<script type="text/javascript">

/*Toggle Sound Script II © John Davenport Scheuer
  as first seen in www.dynamicdrive.com/forums (user name:
  jscheuer1). Visit http://www.dynamicdrive.com for 100's
  of DHTML scripts.  This credit must remain for legal use.
  */

var sndEl="babatunde_lea-the_bay_areas_afro-latin_funky_love_shuffle.mp3"  //Set to name and path of your sound file
var music_on="music_on1s_o.gif"		//Set to image to display while music is on
var music_off="music_off1s_o.gif"	//Set to image to display while music is off
var active_img="active_img1_o.gif"	//Set to image to display while image is hovered

///////////////Stop Editing///////////////

var da=document.all
var preload=[music_on, music_off, active_img]
var preloading=new Array();
for (var i_tem = 0; i_tem < preload.length; i_tem++){
preloading[i_tem]=new Image();
preloading[i_tem].src=preload[i_tem]
}

function textReveal(el, state){
var text=da? da.text : document.getElementById('text')
text.style.visibility=state=='on'? 'visible' : ''
el.src=state=='on'? active_img : el.lowsrc
}

function toggleSound(el){
var text=da? da.text : document.getElementById('text')
if (da&&da.sound&&da.sound.src!==''){
da.sound.src=''
el.lowsrc=music_off
text.innerHTML='&nbsp;Music On'
}
else if (document.getElementById('snd')){
sndEl=document.getElementById('snd')
document.getElementById('sndC').removeChild(sndEl)
el.lowsrc=music_off
text.innerHTML='&nbsp;Music On'
}
else if (da&&da.sound&&da.sound.src==''){
da.sound.src=sndEl
el.lowsrc=music_on
text.innerHTML='&nbsp;Music Off'
}
else {
document.getElementById('sndC').appendChild(sndEl)
el.lowsrc=music_on
text.innerHTML='&nbsp;Music Off'
}
}

</script>
</head>
<body>
<!-- Begin Toggle Sound Body Code -->
<!--[if IE]>
<script type="text/javascript">
document.write('<bgsound id="sound" src="'+sndEl+'" loop="-1">')
</script>
<![endif]-->

<script type="text/javascript">
if (document.getElementById&&!document.getElementById('sound')){
document.write('<div id="sndC" style="width:0;height:0;position:absolute;top:-1000px:left:-1000px;visibility:hidden;">')
document.write('<embed id="snd" style="width:0;height:0;position:absolute;top:-1000px:left:-1000px;visibility:hidden;" src="'+sndEl+'" autostart="true" hidden="true" loop="true">')
document.write('<\/div>')
}
if ((da&&da.sound)||document.getElementById)
document.write('<img style="cursor:pointer;" lowsrc="'+music_on+'" src="'+music_on+'" onmouseout="textReveal(this, \'off\')" onmouseover="textReveal(this, \'on\');" onclick="toggleSound(this);"><span id="text">&nbsp;Music Off<\/span>')
</script>
<!-- End Toggle Sound Body Code -->
</body>
</html>

**agiacosa** · 01-23-2006, 07:18 PM

Thanks for this.

How can you make it so that sound is OFF by default rather than ON?

Regards.

**jscheuer1** · 01-30-2006, 09:11 PM

After researching this sound business more, I've updated this script to have options for looping and for the initial play state as well as simplifying the code in general:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Toggle Sound - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#text {
visibility:hidden;
font-family:verdana, arial, sans-serif;
font-size:80%;
position:relative;
top:-12px;
color:gray;
}
</style>
<script type="text/javascript">

/*Toggle Sound Script III © John Davenport Scheuer
  as first seen in www.dynamicdrive.com/forums (user name:
  jscheuer1). Visit http://www.dynamicdrive.com for 100's
  of DHTML scripts.  This credit must remain for legal use.
  */

var playOnOpen=true	//Set for autostart (true or false)
var looping=true	//Set for sound looping (true or false)
var sndEls="05-Babatunde Lea-The Bay Areas Afro-Latin Funky Love Shuffle.mp3"  //Set to name and path of your sound file
var music_on_text="Music Off"			//Set to textual tip to display while sound is on
var music_off_text="Music On"			//Set to textual tip to display while sound is off
var music_on="images/music_on1s_o.gif"		//Set to image to display while music is on
var music_off="images/music_off1s_o.gif"	//Set to image to display while music is off
var active_img="images/active_img1_o.gif"	//Set to image to display while image is hovered

///////////////Stop Editing///////////////

var da=document.all
var preload=[music_on, music_off, active_img]
var preloading=new Array();
for (var i_tem = 0; i_tem < preload.length; i_tem++){
preloading[i_tem]=new Image();
preloading[i_tem].src=preload[i_tem]
}

function playSound(){
setTimeout("document.snd.Play();", 10)
}

function textReveal(el, state){
var text=da? da.text : document.getElementById('text')
text.style.visibility=state=='on'? 'visible' : ''
el.src=state=='on'? active_img : el.lowsrc
}

function toggleSound(el){
var text=da? da.text : document.getElementById('text')
if (/Off/.test(text.innerHTML)){
document.snd.Stop();
el.lowsrc=music_off
text.innerHTML='&nbsp;'+music_off_text
}
else {
document.snd.Play();
el.lowsrc=music_on
text.innerHTML='&nbsp;'+music_on_text
}
}

</script>
</head>
<body>
<!-- Begin Toggle Sound III Body Code -->
<script type="text/javascript">
if (document.getElementById||da){
document.write('<embed name="snd" style="width:0;height:0;position:absolute;top:-1000px:left:-1000px;" src="'+sndEls+'" autostart="false" hidden="true" loop="'+looping+'" enablejavascript="true">')
if (playOnOpen)
onload=playSound;
document.write('<img style="cursor:pointer;" lowsrc="'+(playOnOpen? music_on : music_off)+'" src="'+(playOnOpen? music_on : music_off)+'" onmouseout="textReveal(this, \'off\')" onmouseover="textReveal(this, \'on\');" onclick="toggleSound(this);"><span id="text">&nbsp;'+(playOnOpen? music_on_text : music_off_text)+'<\/span>')
}
</script>
<!-- End Toggle Sound III Body Code -->
</body>
</html>

Also, for a really simple method for cross browser sound, see this thread. Read at least to post#6

**glucarelli** · 11-23-2006, 11:51 AM

Thank you jscheuer1 for your work on the code post #6 and post #4.

I've tried it but i have two problems :
-When i use the code in post #6
Even if i put false at autostart argument the music begin to play when the page is loaded under Firefox and clicking on buttons have no effect.
Under IE no play,no music and browser give me errors.

- The first code you give post #4 work better i can control anything but as agiacosa ask i would like to make that sound OFF by default rather than ON.

**mkolar** · 01-03-2007, 04:44 PM

Hello John.
I have found this thread. I am trying to add music to an html site, which does have flash on each page, but is not a total flash site. The site can be found here:

http://www.bomasada.com/indexnew.html

I need to add an off/on button at the bottom, but when the viewier clicks to a new html page, the new page loads with the same loop playing. I have done flash site and the off button universally turns the music off for all pages.

I do not want to this this with frames.

Would the solution you call for above work for me as you state above. Any help on this is truly appreciated. Thanks.

Mark Kolar
mkolar@austin.rr.com

**jscheuer1** · 04-05-2007, 04:24 AM

Here is yet another version of this monstrosity (I call it that because I am beginning to believe that sound of the type that this script is tailored for isn't really all that appropriate for the web unless you are targeting only high end users and, even then you should probably use Flash or something else that depends upon client side streaming). That said, here is a version of the script from post#4 in this thread that starts off with the music not playing (a more courteous way to do sound on the web). I've tested this live with Opera 9.01, IE 7 and FF 1.5.0.10. Oddly, in FF it doesn't start playing the first time you click the 'play' icon locally but, when live it does:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Toggle Sound - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#text {
visibility:hidden;
font-family:verdana, arial, sans-serif;
font-size:80%;
position:relative;
top:-12px;
color:gray;
}
</style>
<script type="text/javascript">

/*Toggle Sound Script II © John Davenport Scheuer
  as first seen in www.dynamicdrive.com/forums (user name:
  jscheuer1). Visit http://www.dynamicdrive.com for 100's
  of DHTML scripts.  This credit must remain for legal use.
  */

var sndEl="web.mp3"  //Set to name and path of your sound file
var music_on="music_on1s_o.gif"		//Set to image to display while music is on
var music_off="music_off1s_o.gif"	//Set to image to display while music is off
var active_img="active_img1_o.gif"	//Set to image to display while image is hovered

///////////////Stop Editing///////////////

var da=document.all
var preload=[music_on, music_off, active_img]
var preloading=new Array();
for (var i_tem = 0; i_tem < preload.length; i_tem++){
preloading[i_tem]=new Image();
preloading[i_tem].src=preload[i_tem]
}

function textReveal(el, state){
var text=da? da.text : document.getElementById('text')
text.style.visibility=state=='on'? 'visible' : ''
el.src=state=='on'? active_img : el.lowsrc
}

function toggleSound(el){
var text=da? da.text : document.getElementById('text')
if (da&&da.sound&&(da.sound.src!==''||!toggleSound.l)){
toggleSound.l=true;
da.sound.src=''
el.lowsrc=music_off
text.innerHTML='&nbsp;Music On'
}
else if (document.getElementById('snd')){
sndEl=document.getElementById('snd')
document.getElementById('sndC').removeChild(sndEl)
el.lowsrc=music_off
text.innerHTML='&nbsp;Music On'
}
else if (da&&da.sound&&da.sound.src==''){
da.sound.src=sndEl
el.lowsrc=music_on
text.innerHTML='&nbsp;Music Off'
}
else {
document.getElementById('sndC').appendChild(sndEl)
el.lowsrc=music_on
text.innerHTML='&nbsp;Music Off'
}
}
onload=function(){toggleSound(document.images.bob);
if(document.getElementById&&document.getElementById('sndC'))
document.getElementById('sndC').style.display='';};
</script>
</head>
<body>
<!-- Begin Toggle Sound Body Code -->
<!--[if IE]>
<script type="text/javascript">
document.write('<bgsound id="sound" src="" loop="-1">')
</script>
<![endif]-->

<script type="text/javascript">
if (document.getElementById&&!document.getElementById('sound')){
document.write('<div id="sndC" style="width:0;height:0;position:absolute;top:-1000px;left:-1000px;visibility:hidden;display:none;">')
document.write('<embed id="snd" style="width:0;height:0;position:absolute;top:-1000px;left:-1000px;visibility:hidden;" src="'+sndEl+'" autostart="true" hidden="true" loop="true">')
document.write('<\/div>')
}
if ((da&&da.sound)||document.getElementById)
document.write('<img id="bob" name="bob" style="cursor:pointer;" lowsrc="'+music_on+'" src="'+music_off+'" onmouseout="textReveal(this, \'off\')" onmouseover="textReveal(this, \'on\');" onclick="toggleSound(this);"><span id="text">&nbsp;Music Off<\/span>')
</script>
<!-- End Toggle Sound Body Code -->
</body>
</html>

**Victor** · 05-01-2007, 06:42 PM

Hi John,

Somehow I can only make the Toggle sound script II works on IE 6 and got trouble with Safari. Like many other posts in this topic, all we want is a button that users can control the sound on/off for most of browsers.

Thanks.

Thread: music on/off link

Thread Tools

Search Thread

music on/off link

Bookmarks

Bookmarks

Posting Permissions