Javascriptでボタンをクリックするたびに、さまざまなサウンドを再生する方法は？

Question

私はボタンを押すたびに異なる音を出す方法を理解しようとしています（動物の音を推測できるように、子供のためのミニゲーム）。 JSで

は私が持っている：HTMLで

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

は、私が使用します。

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

私はゲームを開発するためのフレームワークを使用し、そしてそれがたくさん を助け、リスナーイベントを追加するのは簡単です：example link

：

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

わずか2行のコード 、ここでは、例えばリンクです

とF12を押して再生するサウンドを確認することができます（クロムを使うのがよいでしょう）

フレームワークを使用してゲームを開発するのは本当に簡単だと思います。

あなたは、フレームワークに興味がある場合は、ここではオンライン枠組みのリンクがあり、あなたがオンラインを自分でテストすることができます：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

あなたが考えている非常に面白いゲーム。私は子供の教育に役立つものに貢献してくれることをうれしく思います。とにかくこれがあなたを助けるかもしれないと思います。質問があれば教えてください。しかし、これは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>