How do I play the same sound on multiple clicks, using jQuery and Javascript
Currently, I have an explosion sound firing when my bubble's pop, using
the explode effect from jQuery. I'm wanting to be able to click on one
bubble after another, without having to pause waiting for the other sound
to finish. I've tried using a variable to change to a different audio
object with no luck. Any help would be appreciated!
The same problem is 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>
$( ".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();
});
});
No comments:
Post a Comment