How do I play the same sound on multiple clicks, using jQuery and Javascript -
currently, have explosion sound firing when bubble's pop, using explode effect jquery. i'm wanting able click on 1 bubble after another, without having pause waiting other sound finish. i've tried using variable change different audio object no luck. appreciated!
the same problem happening in jsfiddle: jsfiddle.net/xbrjp/1/
my 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() { $( ).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>
i take route of creating <audio> element each bubble:
$(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); }); }); 
Comments
Post a Comment