Buttons click Sounds

Question

This is what I wanna do:

I have like 30 buttons. And I want that when click each button, it will play different mp3 file. Like this http://www.soundjig.com/pages/soundfx/beeps.html

I just know how to click 1 button to play 1 audio file like this:

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

I don't wanna apply all this code to all of the buttons - Is there anyway to do this quickly?

Thank you for reading!

I just answered this question on another thread, is this homework? http://stackoverflow.com/questions/31715188/buttons-click-sounds — Felix, Jul 30 '15 at 04:46
@FelixG same post, here is the [correct link](http://stackoverflow.com/questions/31715017/html5-audio-player-not-working-on-playlist/31715260#31715260) — Kaiido, Jul 30 '15 at 04:49

Shrinivas Shukla · Accepted Answer · 2015-07-30T04:56:23.680

You can use Audio class provided by JavaScript.

Check out this fiddle.

Here is the snippet.

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>

I mean each button will play an different sound. Is this work as what I mean? Thank you! — user3688221, Jul 30 '15 at 04:41
Updated my answer. If you have the list of audio files, then the answer will help you — Shrinivas Shukla, Jul 30 '15 at 04:52
Now it makes sense since OP knows already how to implement solution for one button and he needed to handle all his buttons — Adib Aroui, Jul 30 '15 at 04:54

Adib Aroui · Answer 2 · 2015-07-30T04:47:54.487

0

Make your buttons different from each other by adding an id to each of them. This will allow you to map each button with its own audio file by giving the same id to <source> tag. Example:

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

edited Jul 30 '15 at 04:47

answered Jul 30 '15 at 04:35

Adib Aroui

4,981
5
42
94

you should avoid starting `id` with number – Kaiido Jul 30 '15 at 04:47
@Kaiido, I agree with you, he can concatenate to a small string and add the logic that will handle the difference. I am editing to take into consideration the best practice you mentionned thanks – Adib Aroui Jul 30 '15 at 04:48
or use an array and for-loop – Kaiido Jul 30 '15 at 04:49
I used yours and turn it into: var audio = new Audio("file/" +id+".mp3"); Can I ask something: What if I have both mp3 and wav file, how can it recorgnize the file? – user3688221 Jul 31 '15 at 03:52

score 0 · Answer 3 · answered Jul 31 '15 at 04:07

This is my solution based on clues of Shrinivas Shukla and whiteletter (below). And this code play both *wav and *mp3 file:

<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();
});

Notice: Name the sound file as id of each button that I have and add a same class to every button - in this case: "bb"

score 0 · Answer 4 · answered Mar 25 '23 at 21:59

$(document).ready(function() {
  var obj = document.createElement("audio");
  obj.src = "http://commondatastorage.googleapis.com/codeskulptor-assets/week7-brrring.m4a";
  obj.volume = 0.1;
  obj.autoPlay = false;
  obj.preLoad = true;
  obj.controls = true;

  $(".playSound").click(function() {
    obj.play();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="playSound">Play</button>

Please explain what your code does so that other users can better understand your answer. — , Mar 30 '23 at 02:49

Buttons click Sounds

4 Answers4

Linked