使用带有 create.js 脚本的“onclick”时，两个图像播放相同的声音？

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.我试图在两个单独的图像上使用两个单独的音频文件，这样当我点击图片 A 时，播放声音 1，当我点击图片 B 时，播放声音 2。 The problem is, when I click on picture A or B, sound 2 will always play.问题是，当我点击图片 A 或 B 时，总是会播放声音 2。

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.它是一个“create.js/sound.js”脚本。 I like the way the audio functions with create.js.我喜欢 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.我试过弄乱 soundID 变量，但无济于事。 The other things I have tried were just guesses which also failed.我尝试过的其他事情只是猜测，也失败了。

Any bit of help would be really appreciated.任何帮助将不胜感激。

Answer 1

You are overwriting the first instances of loudSound() and playSound() in the second script.您在第二个脚本中覆盖了loudSound()和playSound()的第一个实例。 If you change the name to loudSound2() and playSound2() , that should fix it.如果您将名称更改为loudSound2()和playSound2() ，那应该可以解决它。

Ie IE

<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.此外，通常最好对 CSS 类使用 kebab-case，因为 CSS 不区分大小写。

使用带有 create.js 脚本的“onclick”时，两个图像播放相同的声音？

问题描述

1 个解决方案

解决方案1
0 2021-05-20 04:14:06

使用带有 create.js 脚本的“onclick”时，两个图像播放相同的声音？

问题描述

1 个解决方案

解决方案1 0 2021-05-20 04:14:06

解决方案1
0 2021-05-20 04:14:06