www.webdeveloper.com
Results 1 to 2 of 2

Thread: Can't get my code to work to play a sound when I click on an image

  1. #1
    Join Date
    Apr 2012
    Posts
    4

    Can't get my code to work to play a sound when I click on an image

    Hey all, was hoping I could get some help here, trying to get some sound to play when I click parts of an image. Here's some of my code, hopefully you can help me find out what's wrong

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Virtual Drums</title>
    <link href="wrapper.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    function playSound(soundobj) {
    var thissound=document.getElementById(sound1);
    thissound.Play();
    }
    </script>
    </head>


    <body>
    <embed src="./MusicalNotes/sound1.wav" width=0 height=0
    enablejavascript="true" autostart=false id="sound1">

    <img src="Background_1.jpg" width="800" height="200" border="0" usemap="#Map" /> <img src="drum.jpg" width="800" height="600" border="0" usemap="#Map2" />
    <map name="Map2" id="Map2">
    <area shape="rect" coords="144,84,195,574" />
    <form>
    <input type="button" value="Play Sound1"
    onClick="playSound1('sound1')">
    </form>
    <area shape="rect" coords="202,89,245,561" href="#" />
    <area shape="rect" coords="254,90,297,514" href="#" />
    <area shape="rect" coords="306,91,348,476" href="#" />
    <area shape="rect" coords="359,93,396,427" href="#" />
    <area shape="rect" coords="408,97,445,401" href="#" />
    <area shape="rect" coords="455,98,484,372" href="#" />
    <area shape="rect" coords="494,93,523,344" href="#" />
    <area shape="rect" coords="534,98,563,316" href="#" />
    <area shape="rect" coords="577,89,599,294" href="#" />
    <area shape="poly" coords="610,91,608,286,632,285,636,93" href="#" />
    <area shape="poly" coords="643,91,641,267,665,269,667,90" href="#" />
    </map>
    <map name="Map" id="Map">
    <area shape="rect" coords="73,149,217,194" href="#" />
    <area shape="rect" coords="238,152,419,196" href="#" />
    <area shape="rect" coords="436,151,755,196" href="#" />
    </map>


    </body>
    </html>
    </div>


    Thanks a lot for any help you may be able to give!

    I placed an image of drums, and I made hotspots on the drums and I'd like that when I click each individual drum, a sound plays.

  2. #2
    Join Date
    Nov 2010
    Posts
    1,102
    have a look at your onclick...

    Code:
    <input type="button" value="Play Sound1" onClick="playSound1('sound1')">
    it passes the string "sound1" to the function

    the function receives it here

    Code:
    function playSound(soundobj) {
    var thissound=document.getElementById(sound1);
    thissound.Play();
    }
    and says right, soundobj now equals the string "sound1"

    you then tell it to look for an element with an id equivalent to the variable sound1 (which doesn't exist) so it fails.

    I suspect your function would look better like this:

    Code:
    function playSound(soundobj) {
    var thissound=document.getElementById(soundobj);
    thissound.Play();
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles