.mouseup, .mousedown - paly sound
Hello. I´ve got a problem, trying to solve it for two days now, but wasn´t lucky enough to find solution so far. I hope you might help me. I need a script which plays a sound whenever I click on a picture, but when I release the mouse button the sound stops playing and another sound will play. (I´m trying to implement a piano on my web, the picture are the keys, first sound is the note, second sound is reverberation) This is what i´ve got so far:
<section id="two"> <div class="inside"> <div id="nav-two" class="nav"> <audio id="beep-two"> <source src="piano/E5.mp3" controls></source> <source src="piano/E5.ogg" controls></source> Your browser does not support that. Please get a new version. </audio> <a onMouseOver="self.document['obrazek3'].src='piano/a_001.png'" onMouseOut="self.document['obrazek3'].src='piano/001.png';" onMouseDown="self.document['obrazek3'].src='piano/b_001.png';"> <img id="obrazek_id_3" name="obrazek3" style="margin-left: 100px; position: absolute;" hspace=5 src="piano/001.png" border="0"> </a> </div> <script>$("#nav-two a") .each(function(i) { if (i != 0) { $("#beep-two") .clone() .attr("id", "beep-two" + i) .appendTo($(this).parent()); } $(this).data("beeper", i); }) .mousedown(function() { $("#beep-two" + $(this).data("beeper"))[0].play(); }); $("#beep-two").attr("id", "beep-two0");</script> </div> </section>
Script for one key, i´ve tried at least 70 variations but the problem is I´m not able to make the sound stop playing when i release the button. I implemented everything I´ve found but I´m writting it syntactically wrong I guess. (.mouseup, .mousedown). I´m not able to add .currentTime=0 (I guess bad syntax again). Next issue, I´ve tried (with help of Google xD) to make one script using "hover" nevertheless it works the way that it plays the sound when I move the cursor into the key area and thats not what I need again.
<script src="(URL address blocked: See forum rules)"></script> <div class="birds"> <audio src="piano/C5.ogg" preload="auto"></audio> </div> <script language="javascript" src="(URL address blocked: See forum rules)"></script> <script type="text/javascript"> $(function(){ var birdhover = $('.birds'); var birdaudio = birdhover.find('audio')[0]; birdhover.hover(function(){ birdaudio.play(); }, function(){ var audioElm = document.getElementById('soundTour'); birdaudio.currentTime=0; birdaudio.pause(); }); }); </script>
Reply by illustrative demonstration please
THX