Кнопки нажмите Звуки

Question

Это то, что я хочу сделать:

У меня есть 30 кнопок. И я хочу, чтобы при нажатии каждой кнопки он воспроизводил разные mp3-файлы. Как это http://www.soundjig.com/pages/soundfx/beeps.html

Я просто знаю, как нажать кнопку 1, чтобы играть 1 звуковой файл, как это:

<audio id="mysoundclip" preload="auto"> 
    <source src="ci1.mp3"></source> 
</audio> 
<button type="button" class="ci">play</button> 

<script type="text/javascript"> 
    var audio = $("#mysoundclip")[0]; 
     console.log(audio); 
    $("button.play").click(function() { 
     audio.play(); 
    }); 
</script> 

Я не хочу применить весь этот код на все кнопки - Есть в любом случае делать это быстро?

Благодарим за понимание!

Answer 1

Вы можете использовать класс Audio, предоставляемый JavaScript.

Отъезд fiddle.

Это фрагмент.

var baseUrl = "http://www.soundjay.com/button/"; 
 
var audio = ["beep-01a.mp3", "beep-02.mp3", "beep-03.mp3", "beep-04.mp3", "beep-05.mp3", "beep-06.mp3", "beep-07.mp3", "beep-08b.mp3", "beep-09.mp3"]; 
 

 
$('button.ci').click(function() { 
 
    var i = $(this).attr('id').substring(1);   //get the index of button 
 
    new Audio(baseUrl + audio[i - 1]).play();   //play corresponding audio 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<button id="b1" type="button" class="ci">SOUND</button> 
 
<br> 
 
<button id="b2" type="button" class="ci">SOUND</button> 
 
<br> 
 
<button id="b3" type="button" class="ci">SOUND</button> 
 
<br> 
 
<button id="b4" type="button" class="ci">SOUND</button> 
 
<br> 
 
<button id="b5" type="button" class="ci">SOUND</button> 
 
<br> 
 
<button id="b6" type="button" class="ci">SOUND</button> 
 
<br> 
 
<button id="b7" type="button" class="ci">SOUND</button> 
 
<br> 
 
<button id="b8" type="button" class="ci">SOUND</button> 
 
<br> 
 
<button id="b9" type="button" class="ci">SOUND</button> 
 
<br>

Answer 2

сделать ваши кнопки отличаются друг от друга путем добавления id к каждому из них. Это позволит вам отображать каждую кнопку с собственным аудиофайлом, указывая те же id на тег <source>. Пример:

<audio id="mysoundclip" preload="auto"> 
    <source src="ci1.mp3" id="1"></source> 
</audio> 
<button type="button" class="ci" id="1">play</button> 

<script type="text/javascript"> 
    $("button.play").click(function() { 
    var id = $('this').data('id'); 

    var audio = $('#mysoudclip #'+id)[0]; 
     audio.play(); 
    }); 
</script> 

Answer 3

Это мое решение, основанное на подсказках Shrinivas Shukla и whiteletter (ниже). И этот код игры как * .WAV и * mp3 файл:

<script type="text/javascript"> 
$('td.bb').click(function() { // add a same class to every button 
    var fileName = $(this).attr('id'); //fileName as id button 
    var audiot = new Audio("file/" +fileName+".mp3"); 
    audiot.play(); 
    var audiott = new Audio("file/" +fileName+".wav"); 
    audiott.play(); 
}); 

Примечание: имя звукового файла в качестве идентификатора каждой кнопки, что у меня есть, и добавить тот же класс для каждой кнопки - в этом случае: «BB»