PDA

View Full Version : 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:


<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:


<!-- 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:

203

the 'music_on' image:

204

the 'music_off' image:

205

The Demo Page:


<!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:


<!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 (http://www.dynamicdrive.com/forums/showthread.php?t=7400). 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 (http://www.dynamicdrive.com/forums/showpost.php?p=23785&postcount=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:


<!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.

datachem
04-25-2008, 07:19 PM
John, I have been using your version of the script from post#9 in this thread that starts off with the music not playing sucessfully. However it has now stopped playing on MSIE although it still works with Firefox. Is there anyway to fix the code. Thanks.

jscheuer1
04-25-2008, 07:46 PM
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


John, I have been using your version of the script from post#9 in this thread that starts off with the music not playing sucessfully. However it has now stopped playing on MSIE although it still works with Firefox. Is there anyway to fix the code. Thanks.

I don't know. It works OK here in IE 7, but in my FF - the first time you go to turn on the sound, it doesn't work. If you then turn it off and then back on, it works in FF too. The opposite (almost) of what you are saying.

jscheuer1
04-26-2008, 06:01 AM
After playing around with this old code for a little bit, I realized that FF worked fine - if the page was live. IE also worked - live or local, but there was a disconcerting noise at the start of playback - live or local, and the sound didn't stream very well. So I decided to apply and broaden some of the knowledge I had recently acquired using MediaPlayer with wmv, to setup a test in IE to see if MediaPlayer 7+ was available, and if so, use it instead for the playback. This took care of both problems, as well as allowed (in IE only) the selection to resume from the point at which it had been paused.

Now (as before) playback in other browsers besides IE, and in IE if Active X or MediaPlayer 7+ are unavailable depends upon the chance existence of a suitable media plug-in, but most browsers have this, and those that don't, their users are used to not getting any sound from the web.

Here is the updated 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 2008 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 mpIsInstalled = false;
if (window.ActiveXObject) {
var control = null;
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
try {
control = new ActiveXObject('WMPlayer.OCX');
} catch (e) {}
@end @*/
if (control&&control.versionInfo) {
mpIsInstalled = true;
}
}

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(mpIsInstalled){
if(text.innerHTML=='&nbsp;Music Off'){
toggleSound.p=sound.controls.currentPosition;
sound.controls.stop();
el.lowsrc=music_off;
text.innerHTML='&nbsp;Music On';
}
else{
sound.URL=sndEl;
if(toggleSound.p)
sound.controls.currentPosition=toggleSound.p;
el.lowsrc=music_on;
text.innerHTML='&nbsp;Music Off';
}
}
else 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">
if(mpIsInstalled)
document.write('<object id="sound" height="0" width="0"'+
' classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">\n'+
'<param name="playCount" value="20000">\n'+
'<\/object>\n');
else
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" type="audio/wav" 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>

datachem
04-27-2008, 06:27 AM
John I had read your other posts relative to this topic and knew that my situation was opposite of what others had found the case to be. I also noticed that my situation only applied if I tried using a midi file and not if I used a wav or mp3 file. Those files played in both msie and firefox. However your new version has resolved my situation as it now plays in both msie and firefox. Thank you very much for taking the time to look into this.

uppercanuck
04-27-2008, 05:42 PM
What's the value in doing it this way? Flash is a lot easier to work with for audio and you have better accessibility.

jscheuer1
04-27-2008, 05:50 PM
Ahem . . . Read the quoted first post in this thread (emphasis added):


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


What's the value in doing it this way? Flash is a lot easier to work with for audio and you have better accessibility.

Actually, the code here is more accessible than Flash alone, and could be made to include Flash as an option. The entire point of this thread from the beginning was to do this without Flash though. Try reading the whole thread before commenting out of hand.

bershka
08-03-2008, 06:01 AM
Dear jscheuer1,

In reference to Post #13, I would like the music to be played once the site has finished loading.

Could you please tweak the code to play the music immediately, instead of the visitor to click on the button to play the music?

Thank you so much!

jscheuer1
08-03-2008, 10:43 AM
Where it has:


onload=function(){toggleSound(document.images.bob);
if(document.getElementById&&document.getElementById('sndC'))
document.getElementById('sndC').style.display='';};

Make it like:


onload=function(){toggleSound(document.images.bob);
if(document.getElementById&&document.getElementById('sndC'))
document.getElementById('sndC').style.display='';
toggleSound(document.images.bob);
document.images.bob.src = document.images.bob.lowsrc;};

bershka
08-03-2008, 12:25 PM
Thank you John, the code works perfectly! :cool:

bershka
09-15-2008, 03:20 AM
^ Dear John,

After upgrading to the latest version of Firefox 3.0.1, the on/off button is no longer working.

Could you please take a look at this?

Thank you so much!

jscheuer1
09-15-2008, 04:38 AM
^ Dear John,

After upgrading to the latest version of Firefox 3.0.1, the on/off button is no longer working.

Could you please take a look at this?

Thank you so much!

What exact code are you using? I'm using FF 3.0.1 and QT 7.55.90.70 and it works fine. Demo: http://loisimages.com/john/music/music_adv_dd.htm

Please post a link to the page on your site that contains the problematic code so we can check it out.

bershka
09-15-2008, 01:31 PM
Dear John,

I am using the code of the demo link you provided above.

I am using two javascript codes (it worked in the previous version of Firefox)


Thanks a lot!

jscheuer1
09-15-2008, 03:17 PM
Well, no you're not but that's not the problem, and I think my version is just a little different. If I removed (highlighted):


<CENTER><FONT COLOR="#00008B" SIZE="+2" FACE="ARIAL">Glyphs</FONT></CENTER>
<P>
<FONT FACE="ARIAL" SIZE="1" color="#00008B">
<!-- Begin Toggle Sound Body Code -->

<!--[if IE]>
<script type="text/javascript">
if(mpIsInstalled)
document.write('<object id="sound" height="0" width="0"'+
' classid="CLSID:6

that took care of the problem. The P is OK (but doesn't seem to really do much), but I don't think the FONT is allowed with that DOCTYPE and even if it is, it's inline, while the script code that follows it generates block level content. This often can confuse a browser (because it is technically illegal), and in this case it does - leading FF to believe that the element it is looking for is not there.

So, at least get rid of that <FONT> tag. If you want to style the text Music On/Music Off, do so in one of the style sections:


#text {
font-family: arial, sans-serif;
font-size: 70%;
color: #00008b;
}

bershka
09-15-2008, 03:30 PM
Thank you John, everything works fine now! :)

dmshep99
05-20-2009, 11:36 AM
Hi John,

I read through the posts and it seems that no one commented on #8 (http://www.dynamicdrive.com/forums/showpost.php?p=67362&postcount=8).

I love the script it works like magic (using ver. #13 + #18) for me but I am facing the same problem as Mark in #8:

I have the music loaded and playing but when I change the page the music stops and then starts again on that new page.

I would love to avoid frames...

Is there ANY way of having one file loaded and playing continuously throughout entire site (seamlessly in the background whether visitor stays on one page or browser around)?

THANKS!

Nadine
08-31-2014, 12:52 AM
Hi John,
Please help me,
I wanna insert on my web site a button to put a "music on/off" but with a one button, with just a only one button, ... dear, i'm sorry for my so bad english, i dont remember.... Excuse me.
And maybe, with all browsers..?
eheh of course, it's not so easy (for me), but for you... Maybe!! >_< oh yeha! (.)
Whau, it would be fantastic!
Sarebbe fantastico, John. Grazie.

I hope you will read my message, or better: my question/request, pardonne, scusami, i'm italo/french, excuse me for my bad english.
I think you are a great webmaster, and not only. >_~' Congrats. Really ()*
Thank you again Mr John. A big kiss from Italy ()* ❤️ grazie molte.

Nadine



Please, it is a my little work:
http://beatlesplanet.it "A test 4 me, but also a great passion. ��

My e-mail: xxx@xxx.it

Nadine
08-31-2014, 02:53 AM
When you have time ... Thank you.

I don't have words. -.-"

jscheuer1
08-31-2014, 02:41 PM
I found that every year or so I was updating this code. Now Dynamic Drive has HTML 5 background sound code that works in most browsers:

http://www.dynamicdrive.com/dynamicindex11/html5audioplayer.htm

Nadine
09-01-2014, 08:17 AM
Thank you for helping me, very kind.
Have a good time. A kiss ):
:)


I found that every year or so I was updating this code. Now Dynamic Drive has HTML 5 background sound code that works in most browsers:

http://www.dynamicdrive.com/dynamicindex11/html5audioplayer.htm

Nadine
09-01-2014, 08:55 AM
thanks a lot again, your script is very good, i like it.
Thank you for your time and kindness. Really .. Grazie.
Have a beautiful day, <3 >_~' kiSss

Nadine




<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:


<!-- 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.[/QUOTE]

Nadine
09-01-2014, 09:45 AM
thanks a lot again, your script is very
good, i like it! Congrats.
Thanks for your time and kindness.
Have a great day, <3 >_~' ): KiSss
* For you:
http://i.imgur.com/9Jt3VHc.jpg

Nadine


I found that every year or so I was updating this code. Now Dynamic Drive has HTML 5 background sound code that works in most browsers:

http://www.dynamicdrive.com/dynamicindex11/html5audioplayer.htm