Question about the Cut & Paste HTML5 Mouseover/ Click sound effect script

Null · 04-29-2012, 10:29 PM

Hi all,

I am using the following script posted on this site: http://www.javascriptkit.com/script/...oundlink.shtml

It works great, but I want to extend this script and mute the sound using a checkbox. This checkbox has the id: sound. If checked, I want to hear the sounds, when unchecked, no sounds should be heard.

This is the code I currently have for the checkbox:

Code:

function playSound() {
    if (document.getElementById('sound').checked){
        -something needs to be added here to make it work?-
    }
}

Anyone have an idea how to make this work?

Many thanks

xelawho · 04-29-2012, 11:29 PM

like so?

Code:

<body>
<audio id="aud" controls="controls">
  <source src="song.mp3" type="audio/mpeg" />
</audio>
<input type="checkbox" onclick="playSound(this)"/>
<script type="text/javascript">
function playSound(box) {
  document.getElementById('aud').muted = box.checked?true:false;
}
</script>
</body>

Null · 04-29-2012, 11:38 PM

No more like:

Code:

function playSound(playclip) {
    if (document.getElementById('sound').checked){
        document.getElementById(playclip).play();
    }
}

But using document.getElementById doesn't work, not sure if play clip is correct too. Please see the link provided in the first post for the code I use.

Thank you for your time

xelawho · 04-30-2012, 12:40 AM

I get it now...

Code:

<input type="checkbox" onclick="muteIt(this)"/>

function muteIt(box) {
if (clicksound){
  clicksound.muted = box.checked?true:false;
	}
 if (mouseoversound){
 mouseoversound.muted = box.checked?true:false;
	} 
}

Null · 04-30-2012, 12:50 AM

Thank you for your reply. The problem with your code is that you need a click event with it (please correct me if I am wrong).

The checkbox can also be unchecked (it's checked/unchecked status is "remembered" in a cookie). This means that the click event is not always used (if someone unchecked the box and comes back to the site, the box will still be unchecked and no click is needed to mute it.

Thats why I used

Code:

if (document.getElementById('sound').checked){

So if checked play sounds, if not checked don't play them

xelawho · 04-30-2012, 05:43 AM

and you really can't change the code I gave you above to do that?

Null · 04-30-2012, 11:47 AM

Euhm no, I am just started learning js a bit using these examples.

Null · 04-30-2012, 04:22 PM

Nevermind, I solved it. I was thinking too hard, it can be done very simple:

Code:

    if (document.getElementById('sound').checked){
    				sound1.playclip(); 
    			}

This works