Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Oct 2002
    Posts
    28
    Thanks
    1
    Thanked 0 Times in 0 Posts

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

    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

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,989
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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>

  • #3
    New Coder
    Join Date
    Oct 2002
    Posts
    28
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,989
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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;
    	} 
    }

  • Users who have thanked xelawho for this post:

    Null (04-30-2012)

  • #5
    New Coder
    Join Date
    Oct 2002
    Posts
    28
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,989
    Thanks
    56
    Thanked 557 Times in 554 Posts
    and you really can't change the code I gave you above to do that?

  • #7
    New Coder
    Join Date
    Oct 2002
    Posts
    28
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Euhm no, I am just started learning js a bit using these examples.

  • #8
    New Coder
    Join Date
    Oct 2002
    Posts
    28
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •