按钮单击声音

问题描述

这就是我想做的事情：

我有30个按钮。我希望当点击每个按钮时，它会播放不同的mp3文件。像这样的

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

我只知道如何点击1按钮播放1个音频文件：

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?

感谢您的阅读！

推荐答案

您可以使用JavaScript提供的音频类。

You can use Audio class provided by 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);           //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>

这篇关于按钮单击声音的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！