JSFiddle - React, Tailwind, and code Playground

by Shrinivas Shukla

HTML

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

JavaScript

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);
    new Audio(baseUrl + audio[i-1]).play();
});