每次單擊Javascript中的按鈕時，如何播放不同的聲音？

Question

我試圖弄清楚每次按下按鈕時如何播放不同的聲音（為孩子們准備的迷你游戲，他們可以猜測動物的聲音）。

在JS中，我有：

var lion = new Audio("http://www.thewavsite.com/Animals/Lion03.wav");

在HTML中，我使用：

onclick="lion.play()"

可以將這種方法用於6聲音程序嗎？

Answer 1

您應該通過JavaScript添加偵聽器：

var sounds = [
  new Audio("/sounds/Lion03.wav"),
  new Audio("/sounds/Zebra03.wav"),
  new Audio("/sounds/SpaghettiMonster.wav")
];

var el = document.getElementById('my_id');
el.addEventListener(function() {
  // Take random sound from list of sounds:
  var sound = sounds[Math.floor(Math.random() * sounds.length];
  sound.play();
});

和HTML：

<div id="my_id">click for sound</div>

希望它能給您一個想法。

Answer 2

我使用該框架來開發游戲，這很有幫助，並且添加監聽器事件很容易：

//To get a random number to playsound
var playNumber = Math.floor(Math.random()*4)
//playsound
this.win.playSoundEffect("sound_" + playNumber + ".mp3")

僅2行代碼，這是鏈接的示例： example link

然后您可以按F12查看播放的聲音（最好使用chrome）

我認為使用框架開發游戲確實很容易。

如果您對框架感興趣，這里是在線框架鏈接，您可以在線進行測試： hola studio

Answer 3

您想到的非常有趣的游戲。 我很樂意為有助於孩子們教育的任何事情做出貢獻。 無論如何，我認為這可能對您有幫助。 讓我知道是否有任何問題，但這需要更多的OOP方法。

演示： https : //jsfiddle.net/m92mf7kL/

var Animal = function(animal, audio) {
this.animal = animal;
  this.audio = audio;
  return this;
};

Animal.prototype = {
    playSound: function() {
    var audio = document.createElement('audio');
    audio.src = this.audio;
    audio.play();
  }
};

// Create animal objects
var chimp = new Animal("chimp", "http://www.thewavsite.com/Animals/Chimp01.wav"),
        dog = new Animal("dog", "http://www.thewavsite.com/Animals/Dog01.wav"),
    donkey = new Animal("donkey", "http://www.thewavsite.com/Animals/Donkey01.wav"),
    goat = new Animal("Goat", "http://www.thewavsite.com/Animals/Goat.wav");

var animals = [chimp, dog, donkey, goat];

function playRandomAnimal() {
     var sound = animals[Math.floor(Math.random() * animals.length)];
   sound.playSound();
}

的HTML

<button onClick="playRandomAnimal()">
Play Sound
</button>

Answer 4

這次我使用了jquery，並將HTML音頻標簽與先前的代碼結合使用，並且可以正常工作：

HTML：

點擊這里
猜猜誰
想吃你！

JS（jQuery）：

$（函數（）{

 var sons = ["http://www.geolution.nl/dieren/dierengeluiden/download/wolf_11.wav", 

“ http://www.studiowan.com/ICAN/BRUITAGES/Animals/Bear%20Growl%2002.wav “]；

 $(".click-texto").click(function () { var rand = sons[Math.floor(Math.random() * sons.length)]; $("#audio1").attr('src', rand); $("#audio1")[0].play(); 

}）; }）;