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

Question

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

44 Views Asked by mdx111 At 10 April 2025 at 17:16

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.

Original Q&A

There are 1 best solutions below

**Kyruski** · Answer 1

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?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in AUDIO

Related Questions in CREATEJS

Related Questions in SOUNDJS

Trending Questions

Popular # Hahtags

Popular Questions