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

我想弄清楚每次按下按钮时如何播放不同的声音（孩子们的迷你游戏，以便他们可以猜测动物的声音）。如何在每次点击Javascript中的按钮时播放不同的声音？

在JS我有：

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

在HTML我使用：

onclick="lion.play()"

是否有可能使用这种方法了6声音节目？

来源

2016-05-23 icenine

你应该通过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>

希望它让你的想法。

来源

2016-05-23 19:35:29 andlrc

您好，感谢您的帮助，但你的代码似乎没有工作... 下面是我用JS： VAR听起来= [ 新音频（ “http://www.thewavsite.com/Animals/Lion03.wav”），新音频（ “http://www.laffertyranch.org/sounds/eagle.wav”），个新的音频（ “http://files.anitalink.com/gamecache/hl/svencoop/sound/mw/monkey1.wav”） ]; VAR EL = document.getElementsById（ '动物'）; el.addEventListener（function（）{ //从声音列表中取出随机声音： var sound = sounds [Math.floor（Math.random（）* sounds.length]; sound.play（）; } ）; 和HTML： <按钮的ID =“动物”>点击这里 – icenine

您需要使用HTTP前缀外部URL：// – andlrc

感谢您的耐心提前不，我已经试过了HTTP ......我认为有索姆有毛病sintax： VAR EL =的document.getElementById（ '动物'）; el.addEventListener（函数（）{// 采取随机声音列表中的声音： var sound = sounds [Math.floor（Math.random（）* sounds.length]; sound.play（）; }）; 我用支架和事件监听功能不相符的parentisis和大括号......也，与此代码，在主JS文件等计划成采空工作。试图解决它，但我没有得到任何地方。 – icenine

我用框架来开发游戏，它帮助了很多，很容易添加监听事件：

//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

来源

2016-05-24 07:19:06 ETalien8542

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

}）; }）;

来源

2016-06-24 21:54:53 icenine

你想到的很有趣的游戏。我很乐意帮助任何有助于孩子教育的事情。无论如何，我认为这可能会帮助你。让我知道是否有任何问题，但这需要更多的面向对象方法。

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

来源

2016-06-24 22:21:53

感谢您的评论和代码......你似乎也有趣但我不得不说这是一个早一点对我来说，因为我还在学习JS/jQuery和这个小游戏是一个课程项目......但我请记住你的心意干杯 – icenine

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

回答

相关问题