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查看它播放的声音（你最好使用镀铬）

我认为使用框架开发游戏真的很容易。

如果您对框架感兴趣，这里是在线框架链接，您可以自己测试在线：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的）：

$（function（）{

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

＆＃34; http://www.studiowan.com/ICAN/BRUITAGES/Animals/Bear%20Growl%2002.wav＆＃34;];

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

}）; }）;

每次单击Javascript中的按钮时，如何播放不同的声音？

4 个答案: