PDA

View Full Version : Scheuer Toggle Sound Script II FireFox Problem



datachem
05-28-2010, 03:57 AM
Hi:

I have been using the follow script for quite sometime. And just now noticed that it works well in MSIE and Chrome but in the latest Fire Fox it does play the music but the on/off switch won't work where previously it worked in all three browsers. Any ideas on how to make it work as intended in FireFox are appreciated. Thanks.

<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="music/claire_de_lune.mid" //Set to name and path of your sound file
var music_on="images/eyiplay.gif" //Set to image to display while music is on
var music_off="images/eyistop.gif" //Set to image to display while music is off
var active_img="images/eyispeaker.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>

I use the following code on the page to call it:

<!-- Begin Toggle Sound Body Code --><font color="#c0c0c0">
<!--[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 -->
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font>

jscheuer1
05-28-2010, 03:27 PM
I have no immediate plans to update this script. But you should try the more recent version:

http://www.dynamicdrive.com/forums/showpost.php?p=140629&postcount=13

datachem
05-30-2010, 08:31 PM
John, thanks for the quick response. The new version that you suggested took care of my FireFox problem as it now works in all the three browsers I checked. I do have a problem which is due to my ignorance. I would like to have the script start off by playing the music and then having the option to turn it off. I looked at the script but unlike the script that I was using previously could not figure out how to do this. Would you be able to suggest what to change. Thank you.

jscheuer1
05-31-2010, 01:02 AM
I think that information is here:

http://www.dynamicdrive.com/forums/showpost.php?p=154805&postcount=18

datachem
05-31-2010, 01:10 AM
John:

Thanks for all the help. Script is working as it should. Once again thanks.

datachem
06-20-2010, 01:41 PM
Well the problem with the music script was resolved but now I find that it is conflicting with my Versluis HV Menu version 5.51. When viewed in MSIE I am able to see the menu but can not toggle the music while with with FireFox I do not get to see the menu and I cannot toggle the music. If I enter <body onload= "function Go(){return};"> I am then able to see the menu in FireFox but am still not able to toggle the music.
Finally I had the following code on my main page <SCRIPT LANGUAGE="JavaScript1.2" src="http://www.codeamber.org/js/codea.js"> and that causes everything to work which is why I thought all my problems had been fixed until I viewed all the other pages. If this cannot be resolved I will most likely go with another menu since I don't believe I will be able to fing another music script. Any suggestion would be appreciated. Thank you.

jscheuer1
06-20-2010, 02:26 PM
That sounds like just an onload conflict. Replace:


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;};

with:


;(function(){
var f = 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;};
if (window.addEventListener){
window.addEventListener('load', f, false);
}
else if (window.attachEvent){
window.attachEvent('onload', f);
}
})();

datachem
06-21-2010, 07:47 PM
John:

Thank you for the feedback - especially when you did it on Father's Day. That did correct my problem with MSIE as the menu appears and the I am able to toggle the music on and off. With respect to FireFox both the menu and the music on/off switch appear on the page. However, the toggle switch is not functional.

Again thanks.

jscheuer1
06-21-2010, 08:07 PM
That sounds like a layout problem - maybe. It might be that something unseen is covering the button. But it could be something else.

You should test it with this new loading code and without the menu in Firefox. If it still doesn't work, try it without the menu and with the old onload code.

If you want me to poke around:

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

datachem
06-21-2010, 09:16 PM
John:

Sorry I wasn't clearer. InFireFox I can see both the menu and the toggle switch button. The problem is that the toggle switch is not functional. In MSIE both are working find.

As to a url I would be glad to do so but is ther anyway that I can PM you with it or send it so as it does not appear on this board? Thanks.

Anthony.

SpankThru
11-22-2011, 09:39 AM
Hi, I'm using "Toggle Sound Script III 2008" in my website but I've some problems. The script and buttons works and show perfectly in IE, Safari and Chrome but in Mozilla Firefox (v 8.0.1) the clip (mp3) doesn't play. The code in my index.html is:

Into "head" tag:


<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="music/music.mp3" //Set to name and path of your sound file
var music_on="images/altavoz.png" //Set to image to display while music is on
var music_off="images/altavoz2.png" //Set to image to display while music is off
var active_img="altavoz.png" //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'
}
}
;(function(){
var f = 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;};
if (window.addEventListener){
window.addEventListener('load', f, false);
}
else if (window.attachEvent){
window.attachEvent('onload', f);
}
})();

</script>

Into "body" tag:


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

What I'm doing wrong? Thanks and sorry for my poor English.

jscheuer1
11-22-2011, 03:43 PM
You're not doing anything wrong. The script no longer works in Firefox, some others. I was just playing around with the HTML 5 audio tag. It looks promising as a way to include more modern browsers. It works in Opera, Firefox, IE 9, Chrome, probably Safari, probably some others. I just have to figure out how to integrate it into the script. When I have more time, I may do that. But it looks to be more of a major rewrite, as that script is rather dated just in general.

If you don't hear back from me in this thread in a week or so, feel free to post a reminder.

SpankThru
11-23-2011, 12:55 PM
Ok. In Firefox no works because it depends of Quicktime. Yesterday I did a tons of test with many versions of quicktime and the result was:

- In Windows 7, with Firefox 8.0 (last) and Quicktime 7 (last) the script works perfectly.
- In Mac with Firefox 8.0 (last) and Quicktime 10 (last for mac) the script does not work.

In Mac Quicktime 10 is installed with SO, then I can't uninstall it to reinstall 7 version. Then the script works in firefox only if you have Quicktime 7 in your system.

My theory: In Opera, IE9, Chrome and Safari the scripts work because it depends of a Quicktime plugin, not the Quicktime program directly. In Firefox I think that the Quicktime plugin needs Quicktime installed on SO to work.

Hope this info will help you to fix de script, because I'm searching for another one and this is the best. Sadly I've to choice a flash music button (I don't like flash hehe) to my site because I don't want that my visitors depend of Quicktime version to play/switchon/off music.

Anyway thanks for work on this script, it was useful for me :)

jscheuer1
11-23-2011, 09:19 PM
Here's the demo (same images as before, I think. Double check those in the defaults section to be sure.):


<!DOCTYPE html>
<html>
<head>
<title>Toggle Sound - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="http://home.comcast.net/~jscheuer1/favicon.ico" />
<style type="text/css">
.togglesoundtext {
font-family: verdana, arial, sans-serif;
font-size: 80%;
position: relative;
top: -12px;
color: gray;
}
h2 {
border: 1px solid #666;
margin: 0;
padding: 5px;
display: inline-block;
font: bold 110% verdana, arial, helvetica, sans-serif;
}
</style>
<script type="text/javascript">

// Cross Toggle Sound Script IV (c)2011 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 CrossToggleSound = function(cfg){
if(!document.getElementById) {return;}
var defaults = {
id: 'crosstogglesound', // id of element to put the toggle sound images and text in
ogg_sound: 'sounds/welcome.ogg', // location of .ogg version of sound file
mp3_sound: 'sounds/welcome.mp3', // location of .mp3 version of sound file
music_on: 'music_on1s_o.gif', // image to display while music is on
music_off: 'music_off1s_o.gif', // image to display while music is off
active_img: 'active_img1_o.gif', // image to display while image is hovered
text_on: '&nbsp;Turn Music Off', // HTML text to show on hover when music is on
text_off: '&nbsp;Turn Music On', // HTML text to show on hover when music is off
touch_screen_text_on: '&nbsp;Tap to Turn Music Off', // HTML text for touch screens when music is on
touch_screen_text_off: '&nbsp;Tap to Turn Music On', // HTML text for touch screens when music is off
start_music_onload: true, // music to begin on page load (true/false) - overrides to false for touch screens

/////////////// End Editable Defaults - Stop Editing ///////////////

html5: (function(){
var html5 = document.createElement('audio');
return typeof html5.play === 'function'? html5 : false;
})()
},
ie = CrossToggleSound.ie, touch = CrossToggleSound.touch, cts = this, preloading = [], control = null, preload, i, p;
cfg = typeof cfg === 'object'? cfg || {} : {};
for(p in defaults){
if(cfg.hasOwnProperty && !cfg.hasOwnProperty(p) || !cfg.hasOwnProperty && !cfg[p]){
cfg[p] = defaults[p];
}
}
if(touch){cfg.start_music_onload = false;}
if(!(cfg.container = document.getElementById(cfg.id))) {return;}
this.cfg = cfg;
preload = [cfg.music_on, cfg.music_off, cfg.active_img];
for (i = preload.length - 1; i > -1; --i){
preloading[i] = new Image();
preloading[i].src = preload[i];
}
cfg.mpIsInstalled = false;
if(ie){
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
try {
control = new ActiveXObject('WMPlayer.OCX');
} catch (e) {}
@end @*/
if(control && control.versionInfo){
cfg.mpIsInstalled = document.createElement('object');
control = null;
}
}
cfg.bgsound = (function(){
return ie && !cfg.html5 && !cfg.mpIsInstalled? document.createElement('bgsound') : false;
})();
while (cfg.container.lastChild){
cfg.container.removeChild(cfg.container.lastChild);
}
if(cfg.html5){
cfg.html5.loop = 'loop';
cfg.html5.controls = 'controls';
cfg.html5.style.height = cfg.html5.style.width = 0;
cfg.html5.style.position = 'absolute';
cfg.html5.style.top = '-1000px';
cfg.html5.id = cfg.id + 'audio';
cfg.src1 = document.createElement('source');
cfg.src2 = cfg.src1.cloneNode(false);
cfg.src1.src = cfg.ogg_sound;
cfg.src1.type = 'audio/ogg';
cfg.src2.src = cfg.mp3_sound;
cfg.src2.type = 'audio/mp3';
cfg.html5.appendChild(cfg.src1);
cfg.html5.appendChild(cfg.src2);
cfg.container.appendChild(cfg.html5);
if(!/loop/.test(cfg.container.innerHTML)){ // fix for Firefox (perhaps others) not assigning loop as a property, and not respecting it as an attribute
this.addEvent(cfg.html5, 'ended', function(){cfg.html5.play();});
}
document.body.insertBefore(cfg.html5, document.body.firstChild);
} else if(cfg.mpIsInstalled){
if(ie < 7 && !/\/\//.test(cfg.mp3_sound)){ // if IE 6 or less and mp3 path not absolute
cfg.mp3_sound = location.href.replace(/[^\/]*$/, '') + cfg.mp3_sound;
}
cfg.mpIsInstalled.id = cfg.id + 'mp';
cfg.mpIsInstalled.style.height = cfg.mpIsInstalled.style.width = 0;
cfg.mpIsInstalled.classid = 'CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6';
cfg.container.appendChild(cfg.mpIsInstalled);
} else if(cfg.bgsound) {
cfg.bgsound.id = cfg.id + 'bgsound';
cfg.bgsound.loop = -1;
cfg.container.appendChild(cfg.bgsound);
} else {
cfg.container.innerHTML = '<div id="' + cfg.id +
'embedc" style="width:0;height:0;position:absolute;top:-1000px;left:-1000px;visibility:hidden;display:none;">\n' +
'\t<embed id="' + cfg.id +
'embed" type="audio/wav" style="width:0;height:0;position:absolute;top:-1000px;left:-1000px;visibility:hidden;" src="' +
cfg.mp3_sound + '" autostart="true" hidden="true" loop="true">\n<\/div>\n';
cfg.embedc = document.getElementById(cfg.id + 'embedc');
cfg.embed = document.getElementById(cfg.id + 'embed');
document.body.insertBefore(cfg.embedc, document.body.firstChild);
}
cfg.im = document.createElement('img');
cfg.im.id = cfg.id + 'image';
cfg.im.className = 'togglesoundimage';
cfg.im.style.cursor = ie && ie < 6? 'hand' : 'pointer';
cfg.im.src = cfg.music_off;
cfg.im.setAttribute('data-mouseoutim', cfg.music_on);
cfg.text = document.createElement('span');
cfg.text.id = cfg.id + 'text';
cfg.text.className = 'togglesoundtext';
cfg.text.style.visibility = touch? 'visible' : 'hidden';
cfg.container.appendChild(cfg.im);
cfg.container.appendChild(cfg.text);
cfg.text.innerHTML = touch? cfg.touch_screen_text_on : cfg.text_on;
if(touch){
cfg.text.style.cursor = 'pointer';
this.addEvent(cfg.text, 'click', function(){cts.toggleSound();});
} else {
this.addEvent(cfg.im, 'mouseover', function(e){cts.textReveal(e);});
this.addEvent(cfg.im, 'mouseout', function(e){cts.textReveal(e);});
}
this.addEvent(cfg.im, 'click', function(){cts.toggleSound();});
this.toggleSound();
if(cfg.embedc){cfg.embedc.style.display='';}
if(cfg.start_music_onload){
this.toggleSound();
cfg.im.src = cfg.music_on;
}
};

CrossToggleSound.prototype = {
textReveal: function(e){
e = e || event;
var over = e.type === 'mouseover';
this.cfg.text.style.visibility = over? 'visible' : 'hidden';
this.cfg.im.src = over? this.cfg.active_img : this.cfg.im.getAttribute('data-mouseoutim');
},
toggleSound: function(){
var cfg = this.cfg, touch = CrossToggleSound.touch, on = cfg.text.innerHTML == cfg.text_on ||
cfg.text.innerHTML == cfg.touch_screen_text_on, cts = this;
if (cfg.html5){
if(on){cfg.html5.pause();} else {cfg.html5.play();}
}
else if(cfg.mpIsInstalled){
if(on){
clearInterval(cfg.timer);
cfg.p=cfg.mpIsInstalled.controls.currentPosition;
cfg.mpIsInstalled.controls.stop();
} else {
cfg.mpIsInstalled.URL = cfg.mp3_sound;
if(cfg.p){cfg.mpIsInstalled.controls.currentPosition = cfg.p;}
cfg.timer = setInterval(function(){
if(cfg.mpIsInstalled.controls.currentPosition == 0){
cfg.mpIsInstalled.URL = cfg.mp3_sound;
}
}, 1000);
}
} else if(cfg.bgsound && (cfg.bgsound.src || !cfg.toggleSound)){
cfg.toggleSound = true;
cfg.bgsound.src = '';
}
else if(cfg.embed && document.getElementById(cfg.embed.id)) {
cfg.embed = cfg.embedc.removeChild(cfg.embed);
} else if(cfg.bgsound && !cfg.bgsound.src) {
cfg.bgsound.src = cfg.mp3_sound;
} else {cfg.embedc.appendChild(cfg.embed);}
if(on){
cfg.im.setAttribute(touch? 'src' : 'data-mouseoutim', cfg.music_off);
cfg.text.innerHTML = touch? cfg.touch_screen_text_off : cfg.text_off;
} else {
cfg.im.setAttribute(touch? 'src' : 'data-mouseoutim', cfg.music_on);
cfg.text.innerHTML = touch? cfg.touch_screen_text_on : cfg.text_on;
}
},
addEvent: (function(){return window.addEventListener? function(el, ev, f){
el.addEventListener(ev, f, false);
}:window.attachEvent? function(el, ev, f){
el.attachEvent('on' + ev, f);
}:function(){return;};
})()
};

/*@cc_on @*/
/*@if(@_jscript_version >= 5)
CrossToggleSound.ie = (function(){
var ver;
if((ver = /MSIE (\d+)/.exec(navigator.userAgent))){
return ver[1];
}
return false;
})();
@end @*/

CrossToggleSound.touch = typeof window.ontouchstart !== 'undefined' || typeof document.ontouchstart !== 'undefined';

</script>
</head>
<body>
<!-- Cross Toggle Sound Division - Place Where Desired -->
<div id="crosstogglesound">Anything Here Will Be Overwritten unless javascript is disabled or the browser is too old</div>
<!-- End Cross Toggle Sound Division -->
<!-- Cross Toggle Sound Body Script - Place as Last Thing Before the Closing </body> Tag -->
<script type="text/javascript">
new CrossToggleSound();
</script>
<!-- End Cross Toggle Sound Body Script -->
</body>
</html>

See next post for notes.

jscheuer1
11-24-2011, 04:01 PM
See previous post for code.

Well the update is ready. My sympathies for QuackTime™. But sometimes you just have to call a duck a duck.

The only sort of bad thing with this update is that you need to have two versions of your sound file. One .ogg and another .mp3.

On the plus side, it's now modular! You can have as many of these as you want on a page, each with different images and texts if you like. One can be on and the others off. Documentation/details on that to follow in another post and/or with a submission, I may make this version official.

Also, the in body code is now greatly reduced. This makes it easier to position the control where you might want it. And makes it easier to make the main script external, which I will probably do if I submit it to DD.

And it doesn't have to wait until onload for anything, but you do need to put the in body call after the target div. If the target div is in a table or nested tables, for compatibility with IE 7 and less it needs to come after the outer closing </table> tag. If in doubt, just put it right before the closing </body> tag.

Remember, you need both a .ogg and a .mp3 file. Free conversion from mp3 to ogg is available lots of places, if you need help with that, let me know. But, as I say, you need both versions of your sound file.

I had held that post back from it's original post time because shortly after that I discovered that Firefox wasn't looping the file and that Opera was truncating it. I found a solution for Firefox in that though it doesn't respect the audio tag's loop property or attribute, it does apply the onended function. I simply made it so if a browser didn't add the loop property it would add the onended = play(), effectively restoring loop for that browser. It's feature detection not browser sniffing. The thing with Opera was I discovered that if I copied, moved or renamed the .ogg file after having converted it from the mp3 it got truncated in Opera. Fortunately uploading and downloading it didn't do that. So just be careful to convert to ogg to the folder you want it in locally and have the mp3 file you're converting already have the desired filename.

There's still more explanation to come if you're interested in using this modularly. But for a single sound (single pair of 'matching' .ogg and .mp3 files actually) file it works right out of the box.

The most recent additions/changes allow it to work with iPhone. I'm hoping that also suffices for Android, but no one has come forward yet to report on that.

sameh_gpc
01-12-2012, 02:04 PM
thanks for work on this script.

gfdall
04-06-2013, 08:54 PM
Hi John, I can't seem to get this version or your older version to start in the off state. (Firefox and html kit) Have tried autostart="false" and autoplay="false" but this has no effect.

jscheuer1
04-06-2013, 09:35 PM
<script type="text/javascript">

// Cross Toggle Sound Script IV (c)2011 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 CrossToggleSound = function(cfg){
if(!document.getElementById) {return;}
var defaults = {
id: 'crosstogglesound', // id of element to put the toggle sound images and text in
ogg_sound: 'sounds/welcome.ogg', // location of .ogg version of sound file
mp3_sound: 'sounds/welcome.mp3', // location of .mp3 version of sound file
music_on: 'music_on1s_o.gif', // image to display while music is on
music_off: 'music_off1s_o.gif', // image to display while music is off
active_img: 'active_img1_o.gif', // image to display while image is hovered
text_on: '&nbsp;Turn Music Off', // HTML text to show on hover when music is on
text_off: '&nbsp;Turn Music On', // HTML text to show on hover when music is off
touch_screen_text_on: '&nbsp;Tap to Turn Music Off', // HTML text for touch screens when music is on
touch_screen_text_off: '&nbsp;Tap to Turn Music On', // HTML text for touch screens when music is off
start_music_onload: false, // music to begin on page load (true/false) - overrides to false for touch screens

/////////////// End Editable Defaults - Stop Editing ///////////////

html5: (function(){
var html5 = document.createEle . . .

jscheuer1
04-08-2013, 10:48 PM
Here's the latest version (Cross Toggle Sound Script V (c)2013 John Davenport Scheuer). I found that the MediaPlayer fallback wasn't working in IE 8 mode of IE 10, which indicates a possible problem with other IE that take the MP path, so I updated that, tested for backward compatibility (it passed) and changed the approach for touch devices a little, giving the mouseover, mouseout visual changes to CSS (:hover pseudo class). The touch devices might render those. If anyone with touch wants to try it out, I'd appreciate that. The latest demo is here:

http://home.comcast.net/~jscheuer1/molecules/togglesoundiv-ht.htm

It has two toggle sound features on it, same sound clip for both. The second one auto plays, except on touch devices. It's just a little too long to post the entire source code of the page here, so if you're interested in it, use your browser's "View Source".

Oh, and I have permission to use that sound clip. If anyone else has a clip (moderate length, 40 to 120 seconds, something you can listen to a few times without it getting on your nerves too much please) I could legally use without royalty, let me know. I'd like to have a demo with two or more different clips.

Beverleyh
04-09-2013, 12:00 PM
Hi John,

The script/demo works perfectly here on iPhone 4S - it does exactly what you say, with the 2nd example staying mute too until toggled (on touch-screen)

I dont have any sample music clips but I just wanted to say nice work :)

x

jscheuer1
04-09-2013, 02:13 PM
Hi Beverleyh,

Thanks. The mouseover/out duties I was talking about are, that when you hover the icon you should see text to the right of it:

Tap Music On

or, if it's playing:

Tap Music Off

and the image should change to (not animated):

5018

When you hover away, you should see the animated image if the sound is playing or a static speaker image:

5019

if it is not and the text should vanish.

Beverleyh
04-09-2013, 02:34 PM
Those are working on iPhone, except the animated one.

on page-load, both static/muted icons show. No text alongside. (no sound playing)

Tap once and the un-animated sound icon shows. "Tap Music On" text shows alongside. (no sound playing)

Tap a second time and the same un-animated sound icons stays on screen. "Tap Music Off" text shows showing alongside. (the sound plays)

Tap a third time and the un-animated sound icon shows again. "Tap Music On" text shows alongside. (no sound playing)

Move focus with a tap on the other muted icon, or a tap on another link, and the un-animated sound icon returns to the static/muted state.

Hope that all makes sense and is as you expected.

jscheuer1
04-09-2013, 03:02 PM
Not exactly what I expected. I think I do understand what you're saying though.

So you never see the animated music playing icon:

5020

It's an animated GIF image - do those even work on your iPhone?

Anyways, once you are hearing the sound, if you drag your finger away from the icon and text, the text should vanish and you should see the animated icon. From what you're saying, you might have to tap somewhere else as well for that to happen. But the animated icon should show up at some point if the music is playing and focus is off of the icon and text.

Additionally, you shouldn't have to tap twice, once to see the text, again to act on it, but that's another issue. I remember something like that about iPhone from another script (a menu) I finished recently:

Smooth Navigational Menu (v2.0) (http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm)

I had to use the touchstart event instead of the click event for one thing to get iPhone to be happy. That, or a variation on it might need to be used here. It's like a click (tap) on the iPhone is a more restrictive event than a touchstart one, which I imagine can be triggered by a dragging motion.

Once I've made a change along those lines I'll let you know.

For now let me know if you see the animated icon in this post and whether or not it's animated. And if you do and it is, on the test page see if there's any circumstance that can make it appear there, and what that might be.

Thanks.

Beverleyh
04-09-2013, 03:36 PM
Hi John

Yes, gifs pose no problem on iPhone and I can see the little animated one blinking away in your post above.

So you never see the animated music playing icon:
Unfortunately, no.

Anyways, once you are hearing the sound, if you drag your finger away from the icon and text, the text should vanish and you should see the animated icon.
I tippy-tap/move/swipe/pull/drag, all around, but the text doesnt hide and animated gif never shows. Only another direct tap on the icon causes the text to change (and of course the sound to stop)

Its still 'working' though which is really good.

jscheuer1
04-09-2013, 03:58 PM
Thanks, I'll be playing around with it a bit more later. I said 'focus', but what I'm using is 'hover' (:hover pseudo class). There is a :focus pseudo class, that might help. But I had good results in my menu with the touchstart as an event for iPhone, so I may try that first.

From what you say, initially you have to tap to even see the text, and that tap does nothing else, tap again to play, then again to stop, then again to play, etc., is that right?

Beverleyh
04-09-2013, 04:21 PM
From what you say, initially you have to tap to even see the text, and that tap does nothing else, tap again to play, then again to stop, then again to play, etc., is that right?Yes - this is exactly what happens.

jscheuer1
04-09-2013, 04:51 PM
That's not so horrible then. Still I'd like it to be more responsive and/or get that playing icon into the mix at the appropriate time. If you get a chance, check it out on a non-touch PC or Mac. I don't want it to be exactly like that on touch screens, but closer to it. On non-touch, only the icon is responsive to clciks and the text is only seen when you are over the icon, you can never get over the text. For non touch I would like to see hovering over the icon and where the text would be to bring up the text and larger non-animated icon, and the first tap on icon or text play the music, when the icon and text lose focus, the text should disappear and the icon change to the playing or the off icon (whichever the sound is doing). But let me worry about that unless you have some thoughts on it. As you say, it does 'work'.

Beverleyh
04-09-2013, 05:53 PM
No not horrible at at. Very nice in fact :)

Your described tap and image-swop logic already sounds like the ideal setup so the only suggestion I would make is just a cosmetic thing - to have the sound/speaker icon on top of an obvious, possibly 3D, button - so its inviting touch-screen users to press it. I think 'flat' icons can sometime blend in too well with everything else on a page and the effect seems to be amplified on a touch-screen. But I know that these are early days and the cosmetics are less important than getting the functionality exactly right. The actual icons can easily be changed by the person using the script, so no biggy.

I'll be back on PC in the morning so I'll have a good fiddle/compare then - you'll probably have tweaked it some more in that time.

gfdall
04-09-2013, 09:13 PM
Hi John, thanks for that. Can I change the size of the images?

jscheuer1
04-10-2013, 12:48 AM
Sure. You can even use other images. They should all be the same size (dimensions) as each other though.

Of the three I used the 'off' image has a fair amount of blank (white) space in it on its right top and bottom edges so that it's the same width and height as the animated 'on' and the static 'active' (hover) image. They're all 36 x 30. The script preloads them so that they're all ready when needed and sets the dimensions for all three, using the dimensions of the first one that (pre)loads. This is critical in the latest version because it uses them as background images, so their container must be the same dimensions as they are, and they must be all of the same dimensions. In the earlier versions the dimensions are still important so that the layout doesn't jump when one image is substituted for the other.

gfdall
04-10-2013, 11:37 AM
Hi John, I didn't see the images to download so I created my own but they seem to be larger than I made them as if they are forced into being that size. Roughly 2cm squared on the screen and I couldn't see how adjust this to be slightly smaller.
Thanks
George

Beverleyh
04-10-2013, 12:10 PM
Works fine here.

If you see John's previous comment, he says that the size is automatically determined by the dimensions of the first image that loads;
The script preloads them so that they're all ready when needed and sets the dimensions for all three, using the dimensions of the first one that (pre)loads

I just dropped in 3 pics at 280 x 166, and the sizing worked automatically.

Make sure that the images are all the exact same dimensions and see how it goes.

BTW John, I'm on PC now so I can see the differences from touch-screen that you mentioned yesterday - very nice :)

jscheuer1
04-10-2013, 08:18 PM
That's right Beverleyh.

If anyone wants the three images I used (right click each one in turn and 'Save As'):

5024

5025

5026

By the way, I'm sort of being distracted by another project right now (my take on chained selects). So there might not be any updates for a bit. I figure this thing is working well enough on iPhone. Let's see if we can get any feedback from android users.

There is/are (depending if the first one works out or not) some thing(s) I'd like to try using the touchstart event. I'll post about it here or in a new thread when I'm ready.