November 26th, 2012, 12:04 PM
|
|
Registered User
|
|
Join Date: Nov 2012
Posts: 1
Time spent in forums: 54 m 39 sec
Reputation Power: 0
|
|
|
.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:
Code:
<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.
Code:
<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
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
