Javascript works for a piano

Question

Javascript works for a piano

Navigation

#1 by (2 votes)

0

I'm making a piano that reproduces the sounds by onclick but when I click twice on the same note and the first time it keeps playing the second one does not reproduce the sound.

The example is this:

link

and this is the code:

$(document).ready(function()) {

        var sonido = document.getElementById("sonido");
        var sonido2 = document.getElementById("sonido2");
        var sonido3 = document.getElementById("sonido3");  }

The sound picks up from here:

 <audio id="sonido">
<source src="midia/220-A%20(mp3cut.net).mp3">

'

And the onclick is this:

   <map name="image-maps-2017-03-24-070855" id="pianomaps">
            <area id="negra1" alt="" title="negra1" onclick="sonido16.play()" shape="rect" coords="34,0,62,178" style="outline:none;" target="_self"     />
            <area id="negra2" alt="" title="negra2" onclick="sonido17.play()" shape="rect" coords="97,0,125,178" style="outline:none;" target="_self"     />
            <area id="negra3" alt="" title="negra3" onclick="sonido18.play()" shape="rect"  coords="316,0,344,178" style="outline:none;" target="_self"     />

javascript html web

asked by Trackless 01.06.2017 в 14:48

source

1 answer

Set priority on an application in c # SQL query with String data

score 2 · Accepted Answer

The script does exactly what you ask it to do. If you play a video that you are watching, the video continues as usual. If you give stop or pause and then play, it continues to function as it is. What you could do, I'm not sure if it's what you want, is that every time you click on a key, the sound plays from the beginning, for that you should do:

<area id="negra1" alt="" title="negra1" onclick="onKeyClick('sonido16');" shape="rect" coords="34,0,62,178" style="outline:none;" target="_self"     />

And the javascript would be something like that

function onKeyClick(objId) {
   var tecla = document.getElementById(objId);
   tecla.pause();
   tecla.currentTime = 0;
   tecla.play();
}

What you are doing is stopping the sound, rewinding it and executing it every time you click.