如何使用jQuery和Javascript在多次单击时播放相同的声音_Javascript_Jquery_Css

如何使用jQuery和Javascript在多次单击时播放相同的声音

javascript jquery css

如何使用jQuery和Javascript在多次单击时播放相同的声音,javascript,jquery,css,Javascript,Jquery,Css,目前，我有一个爆炸声发射时，我的气泡的弹出，使用jQuery的爆炸效果。我希望能够点击一个又一个气泡，而不必暂停等待其他声音结束。我曾尝试使用一个变量来更改为不同的音频对象，但没有成功。任何帮助都将不胜感激同样的问题也发生在JSFIDLE中：我的HTML <body style="background:black;"> <style> .circleBase { -webkit-border-radius: 999px; -moz-border-rad

目前，我有一个爆炸声发射时，我的气泡的弹出，使用jQuery的爆炸效果。我希望能够点击一个又一个气泡，而不必暂停等待其他声音结束。我曾尝试使用一个变量来更改为不同的音频对象，但没有成功。任何帮助都将不胜感激

同样的问题也发生在JSFIDLE中：

我的HTML

<body style="background:black;">
<style>
.circleBase {
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    border-radius: 999px;
    behavior: url(PIE.htc);
}

.type1 {
     padding:20px;
    background: white;
    border:1px solid black;
    color:black;

}
</style>
<div class="circleBase type1" style="display:table-cell; vertical-align:middle;">
<div align="center">Bubble 1</div></div>
<div class="circleBase type1" style="display:table-cell; vertical-align:middle;">
<div align="center">Bubble 2</div></div>
<div class="circleBase type1" style="display:table-cell; vertical-align:middle;">
<div align="center">Bubble 3</div></div>
</body>
<script>
$( ".type1" ).click(function() {
  $( this ).toggle( "explode", {pieces: 50 }, 2000);

});
$(document).ready(function() {
        var audioElement = document.createElement('audio');
        audioElement.setAttribute('src',                              'http://www.soundjay.com/mechanical/sounds/explosion-01.mp3');
        //audioElement.load()
        $.get();
        audioElement.addEventListener("load", function() {
        audioElement.play();
        }, true);

        var audioElement2 = document.createElement('audio');
        audioElement2.setAttribute('src', 'http://www.soundjay.com/mechanical/sounds/explosion-01.mp3');
        //audioElement.load()
        $.get();
        audioElement2.addEventListener("load", function() {
        audioElement2.play();
        }, true);

    var x = 0;
    if(x == 0) {
            $('.type1').click(function() {
            audioElement.play();
            });
            x = 1;
        }
        if(x == 1) {
            $('.type1').click(function() {
            audioElement2.play();
            });
            x = 0;
        }


        $('.pause').click(function() {
        audioElement.pause();
        });



});
</script>


.环基{
-webkit边界半径：999px；
-moz边界半径：999px；
边界半径：999px；
行为：url（PIE.htc）；
}
.type1{
填充：20px；
背景：白色；
边框：1px纯黑；
颜色：黑色；
}
气泡1
气泡2
泡泡3
$（“.type1”）。单击（函数（）{
切换（“爆炸”，{pieces:50}，2000）；
});
$（文档）.ready（函数（）{
var audioElement=document.createElement（'audio'）；
audioElement.setAttribute（'src'，'http://www.soundjay.com/mechanical/sounds/explosion-01.mp3');
//audioElement.load（）
$.get（）；
audioElement.addEventListener（“加载”，函数（）{
audioElement.play（）；
}，对）；
var audioElement2=document.createElement（'audio'）；
audioElement2.setAttribute（'src'，'http://www.soundjay.com/mechanical/sounds/explosion-01.mp3');
//audioElement.load（）
$.get（）；
audioElement2.addEventListener（“加载”，函数（）{
音频元素2.播放（）；
}，对）；
var x=0；
如果（x==0）{
$（'.type1'）。单击（函数（）{
audioElement.play（）；
});
x=1；
}
如果（x==1）{
$（'.type1'）。单击（函数（）{
音频元素2.播放（）；
});
x=0；
}
$（'.pause'）。单击（函数（）{
audioElement.pause（）；
});
});

我实际上会选择创建


$（文档）.ready（函数（）{
$（“.type1”）。单击（函数（）{
$（此）.toggle（“分解”{
件数：50件
}, 2000);
$（this.find（'audio'）.get（0.play（）；
});
$（'.type1'）。每个（函数（）{
$('')
.attr（'src'，'http://www.soundjay.com/mechanical/sounds/explosion-01.mp3')
.附于（本）；
});
});
谢谢你。这确实管用，但确实太慢了。有没有办法加快速度？如果不是，这仍然是一个可行的答案。@user2128903这里有另一个选项，它将音频元素存储在数组中而不是DOM中。看起来更快，但我不知道它会如何扩展。我原以为克隆一个已经存在的节点也会非常快，但不幸的是，情况似乎还不是这样。
$(document).ready(function () {

    $(".type1").click(function () {
        $(this).toggle("explode", {
            pieces: 50
        }, 2000);
        $(this).find('audio').get(0).play();
    });

    $('.type1').each(function() {
        $('<audio/>')
        .attr('src','http://www.soundjay.com/mechanical/sounds/explosion-01.mp3')
        .appendTo(this);
    });

});