CODEWITHSUNDEEP
jqueryhtmlhtml5-audio
user3688221
user3688221

Reputation: 97

Buttons click Sounds

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!

Upvotes: 4

Views: 17143

Answers (4)

XkriPt
XkriPt

Reputation: 1

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

Upvotes: 0

user3688221
user3688221

Reputation: 97

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"

Upvotes: 0

Shrinivas Shukla
Shrinivas Shukla

Reputation: 4453

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>

Upvotes: 9

Adib Aroui
Adib Aroui

Reputation: 5067

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>

Upvotes: 0

Related Questions