CODEWITHSUNDEEP
javascriptjqueryhtmlcssaudio
Joel
Joel

Reputation: 456

jQuery Audio: How to Allow Overlapping Sounds?

http://codepen.io/JTBennett/pen/vyJmBK (Snippet below)

Hi - just wanting to allow the sounds to overlap with themselves as many times as they're clicked rather than waiting for the audio file to finish.

The string sounds overlap with each other just fine, but I don't know how to get the same sounds to overlap - if I press the E6 string three times, it's not triggering anything after the first click until the sound finishes.

$("#string-E1")
.mousedown(function() {
E1.play();
});
$("#string-B2")
.mousedown(function() {
B2.play();
});
$("#string-G3")
.mousedown(function() {
G3.play();
});
$("#string-D4")
.mousedown(function() {
D4.play();
});
$("#string-A5")
.mousedown(function() {
A5.play();
});
$("#string-E6")
.mousedown(function() {
E6.play();
});
body {margin:0;padding:0;}


.string {width:100%;text-align:center;border-top:2px #000 solid;border-bottom:2px #000 solid;margin:10px 0;background:#ccc;cursor:default;}
.string:hover {border-top:2px #f00 solid;border-bottom:2px #f00 solid;box-shadow:2px 0px 2px #666;}
.string:active {border-top:2px #fff solid;border-bottom:2px #fff solid;box-shadow:2px 0px 2px #666 inset;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tuner">
<div id="string-E1" class="string">E1</div>
<div id="string-B2" class="string">B2</div>
<div id="string-G3" class="string">G3</div>
<div id="string-D4" class="string">D4</div>
<div id="string-A5" class="string">A5</div>
<div id="string-E6" class="string">E6</div>
</div>

<audio id="E1" preload="auto">
<source src="https://www.electricherald.com/tuner/1-E.mp3"></source>
This browser does not support the HTML5 audio tag.
</audio>
<audio id="B2" preload="auto">
<source src="https://www.electricherald.com/tuner/2-B.mp3"></source>
This browser does not support the HTML5 audio tag.
</audio>	
<audio id="G3" preload="auto">
<source src="https://www.electricherald.com/tuner/3-G.mp3"></source>
This browser does not support the HTML5 audio tag.
</audio>	
<audio id="D4" preload="auto">
<source src="https://www.electricherald.com/tuner/4-D.mp3"></source>
This browser does not support the HTML5 audio tag.
</audio>	
<audio id="A5" preload="auto">
<source src="https://www.electricherald.com/tuner/5-A.mp3"></source>
This browser does not support the HTML5 audio tag.
</audio>	
<audio id="E6" preload="auto">
<source src="https://www.electricherald.com/tuner/6-E.mp3"></source>
This browser does not support the HTML5 audio tag.
</audio>

*Edit: The final version of the guitar tuner app is located here.

Upvotes: 0

Views: 724

Answers (1)

Luka Kvavilashvili
Luka Kvavilashvili

Reputation: 1389

The only solution I see, is to create a new clone of the audio node and play it. That way the current playing audio nodes will stay, and the new ones will just overlap.

https://jsfiddle.net/cw8f67wp/

// function that will clone the audio node, and play it
function cloneAndPlay(audioNode) {
    // the true parameter will tell the function to make a deep clone (cloning attributes as well)
    var clone = audioNode.cloneNode(true);
    clone.play();
}

$("#string-E1").mousedown(function() {
    cloneAndPlay(E1);
});
$("#string-B2").mousedown(function() {
    cloneAndPlay(B2);
});
$("#string-G3").mousedown(function() {
    cloneAndPlay(G3);
});
$("#string-D4").mousedown(function() {
    cloneAndPlay(D4);
});
$("#string-A5").mousedown(function() {
    cloneAndPlay(A5);
});
$("#string-E6").mousedown(function() {
    cloneAndPlay(E6);
});

Upvotes: 1

Related Questions