这就是我想做的：
我有大约 30 个按钮。我希望当点击每个按钮时，它会播放不同的mp3文件。像这样http://www.soundjig.com/pages/soundfx/beeps.html 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>
我不想将所有这些代码应用到所有按钮 - 有没有办法快速做到这一点？
感谢您的阅读！
您可以使用AudioJavaScript 提供的类。
看看这个fiddle http://jsfiddle.net/shrinivas93/1gt1Lzr6/5/.
这是片段。
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
