如何在每次點擊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

我用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(); 

}）; }）;

Answer 4

你想到的很有趣的遊戲。我很樂意幫助任何有助於孩子教育的事情。無論如何，我認爲這可能會幫助你。讓我知道是否有任何問題，但這需要更多的面向對象方法。

演示：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>