Two images playing the same sound when using "onclick" with create.js script?

Question

Coding noob here. I am trying to use two separate audio files on two separate images, so that when I click on picture A, sound 1 plays, and when I click on picture B, sound 2 plays. The problem is, when I click on picture A or B, sound 2 will always play.

I know this is an 'id' issue, but I cannot figure it at all since I'm brand new to coding. I also have some repeating scripts.

It is a "create.js/sound.js" script. I like the way the audio functions with create.js. Here is the code I am working with:

<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script>
      var soundID = "fuzz";

      function loadSound () {
        createjs.Sound.registerSound("https://cdn.shopify.com/s/files/1/0325/1490/0107/files/82751__sikoses__stm1-some-bass-7.mp3?v=1621410085", soundID);
      }

      function playSound () {
        createjs.Sound.play(soundID);
      }
</script>
  
<body onload="loadSound();">
<img onclick="playSound();" class="playSound" img src="https://cdn.shopify.com/s/files/1/0325/1490/0107/files/spiral222.png?v=1621455564" width="220" height="220">
  
    
</body>




 
   
<script>
      var soundID = "thud";

      function loadSound () {
        createjs.Sound.registerSound("https://cdn.shopify.com/s/files/1/0325/1490/0107/files/79150__blipdrums__sheenery2-bd.wav?v=1621409163", soundID);
      }

      function playSound () {
        createjs.Sound.play(soundID);
      }
</script>
  
<body onload="loadSound();"> 
<img onclick="playSound();" class="playSound" img src="https://cdn.shopify.com/s/files/1/0325/1490/0107/files/FACE.png?v=1621462776" width="220" height="220">
  
   
</body>

I've tried messing around with the soundID variable but to no avail. The other things I have tried were just guesses which also failed.

Any bit of help would be really appreciated.

score 0 · Answer 1 · answered May 20 '21 at 04:14

You are overwriting the first instances of loudSound() and playSound() in the second script. If you change the name to loudSound2() and playSound2(), that should fix it.

I.e.

<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script>
      var sound1ID = "fuzz";

      function loadSound1 () {
        createjs.Sound.registerSound("https://cdn.shopify.com/s/files/1/0325/1490/0107/files/82751__sikoses__stm1-some-bass-7.mp3?v=1621410085", sound1ID);
      }

      function playSound1 () {
        createjs.Sound.play(sound1ID);
      }
</script>
  
<body onload="loadSound1();">
<img onclick="playSound1();" class="play-sound" img src="https://cdn.shopify.com/s/files/1/0325/1490/0107/files/spiral222.png?v=1621455564" width="220" height="220">
  
    
</body>




 
   
<script>
      var sound2ID = "thud";

      function loadSound2 () {
        createjs.Sound.registerSound("https://cdn.shopify.com/s/files/1/0325/1490/0107/files/79150__blipdrums__sheenery2-bd.wav?v=1621409163", sound2ID);
      }

      function playSound2 () {
        createjs.Sound.play(sound2ID);
      }
</script>
  
<body onload="loadSound2();"> 
<img onclick="playSound2();" class="play-sound" img src="https://cdn.shopify.com/s/files/1/0325/1490/0107/files/FACE.png?v=1621462776" width="220" height="220">
  
   
</body>

Also, it's usually best to use kebab-case for CSS classes as CSS is case insensitive.

Two images playing the same sound when using "onclick" with create.js script?

1 Answers1