製作html5音頻片段引起過去與jQuery的懸停

我在這裏有一個小鋼琴。現在它可以工作，但當鼠標不再在元素上方懸停時（可以理解），該註釋會被切斷。我想知道在鼠標離開< li>之後是否可以讓音符產生共鳴。謝謝你的幫助。製作html5音頻片段引起過去與jQuery的懸停

Jsfiddle - I'm not sure why the sound isn't working here.

JAVASCRIPT

$(document).ready(function(){ 

      $("#B").hover(function(){ 
     note_b.play(); 

     }, 
    function(){ 
     note_b.load(); 
      }); 

      $("#bFlat").hover(function(){ 
     note_bFlat.play(); 

     }, 
    function(){ 
     note_bFlat.load(); 
      }); 

      $("#A").hover(function(){ 
     note_a.play(); 

     }, 
    function(){ 
     note_a.load(); 
      }); 

      $("#aFlat").hover(function(){ 
     note_aFlat.play(); 

     }, 
    function(){ 
     note_aFlat.load(); 
      }); 

      $("#G").hover(function(){ 
     note_g.play(); 

     }, 
    function(){ 
     note_g.load(); 
      }); 

      $("#fSharp").hover(function(){ 
     note_fSharp.play(); 

     }, 
    function(){ 
     note_fSharp.load(); 
      }); 

      $("#f").hover(function(){ 
     note_f.play(); 

     }, 
    function(){ 
     note_f.load(); 
      }); 

       $("#e").hover(function(){ 
     note_e.play(); 

     }, 
    function(){ 
     note_e.load(); 
      }); 

      $("#eFlat").hover(function(){ 
     note_eFlat.play(); 

     }, 
    function(){ 
     note_eFlat.load(); 
      }); 

      $("#d").hover(function(){ 
     note_d.play(); 

     }, 
    function(){ 
     note_d.load(); 
      }); 

      $("#dFlat").hover(function(){ 
     note_dFlat.play(); 

     }, 
    function(){ 
     note_dFlat.load(); 
      }); 

       $('#C').hover(function(){ 
     note_c.play(); 

     }, 
    function(){ 
     note_c.load(); 
      }); 

      $('#hi_c').hover(function(){ 
     note_hi_c.play(); 

     }, 
    function(){ 
     note_hi_c.load(); 
      }); 



     });

HTML

<div class="box_rotate"> 
    <nav> 
     <ul> 

     <li id="hi_c" class="hi_c hvr-grow wrap whole">c</li> 
     <li id="B" class="B hvr-grow wrap whole"></li> 
     <li id="bFlat" class="bFlat hvr-grow wrap flat"></li> 
     <li id="A" class="A hvr-grow wrap whole"></li> 
     <li id="aFlat" class="aFlat hvr-grow wrap flat"></li> 
     <li id="G" class="G hvr-grow wrap whole"></li> 
     <li id="fSharp" class="fSharp hvr-grow wrap flat"></li> 
     <li id="f" class="F hvr-grow wrap whole"></li> 
     <li id="e" class="E hvr-grow wrap whole"></li> 
     <li id="eFlat" class="eFlat hvr-grow wrap flat"></li> 
     <li id="d" class="D hvr-grow wrap whole"></li> 
     <li id="dFlat" class="dFlat hvr-grow wrap flat">c</li> 
     <li id= "C" class="C hvr-grow wrap whole"> 
      <p>c</p></li> 


    </ul> 
    </nav> 


</div> 
<div class="col-xs-4"></div> 





<audio id="note_c"> 
<source id="C" src="http://helloemilyfaye.com/Tones/c.mp3"  type="audio/mp3"/> 
</audio> 

<audio id="note_dFlat"> 
<source id="dFlat" src="http://helloemilyfaye.com/Tones/csharp.mp3" type="audio/mp3"/> 
    </audio> 

<audio id="note_d"> 
<source id="d" src="http://helloemilyfaye.com/Tones/d.mp3" type="audio/mp3"/> 
    </audio> 

<audio id="note_eFlat"> 
<source id="eFlat" src="http://helloemilyfaye.com/Tones/eflat.mp3" type="audio/mp3"/> 
</audio> 

<audio id="note_e"> 
<source id="e" src="http://helloemilyfaye.com/Tones/e.mp3" type="audio/mp3"/> 
    </audio> 

<audio id="note_f"> 
<source id="F" src="http://helloemilyfaye.com/Tones/f.mp3" type="audio/mp3"/> 
    </audio> 

<audio id="note_fSharp"> 
<source id="fSharp" src="http://helloemilyfaye.com/Tones/fsharp.mp3" type="audio/mp3"/> 
    </audio> 

    <audio id="note_g"> 
<source id="G" src="http://helloemilyfaye.com/Tones/g.mp3" type="audio/mp3"/> 
    </audio> 

    <audio id="note_aFlat"> 
<source id="aFlat" src="http://helloemilyfaye.com/Tones/gsharp.mp3" type="audio/mp3"/> 
    </audio> 

<audio id="note_a"> 
<source id="a" src="http://helloemilyfaye.com/Tones/a.mp3" type="audio/mp3"/> 
    </audio> 

<audio id="note_bFlat"> 
<source id="bFlat" src="http://helloemilyfaye.com/Tones/bflat.mp3" type="audio/mp3"/> 
    </audio> 

    <audio id="note_b"> 
<source id="B" src="http://helloemilyfaye.com/Tones/b.mp3"/> 
    </audio> 

<audio id="note_hi_c"> 
<source id="hiC" src="http://helloemilyfaye.com/Tones/hi_c.mp3"/> 
    </audio>

CSS

body{ 
    margin: 0px; 
    padding: 0px; 
    height: 100%; 
    width: auto; 
    font-size: 15px; 
} 



/*--------------------LISTS---------------------*/ 


li{ 
    list-style: none; 
    font-family: 'Great Vibes', cursive; 
    color: white; 

} 
.flat{ 
    text-align: left; 
    padding-left: 20px; 
} 

.whole{ 
    text-align: right; 
    padding-right: 20px; 
} 



/*--------------------NOTES---------------------*/ 


.C{ 
    background-color: #00a200; 
    Opacity: .5; 
    height: 70px; 
    width: 70%; 
    z-index:0; 
    margin-bottom: -27px; 


} 
.C:hover{ 
    opacity: .2; 

} 

.dFlat{ 
    background-color: #409cac; 
    Opacity: 1; 
    height: 40px; 
    width: 50%; 
    z-index:9; 
    position: relative; 
    margin-bottom: -35px; 


} 
.dFlat:hover{ 
    opacity: .9; 

} 

.D{ 
    background-color: #0000ff; 
    Opacity: .5; 
    height: 70px; 
    width: 70%; 
    margin-bottom: -37px 


} 
.D:hover{ 
    opacity: .5; 

} 

.eFlat{ 
    background-color: #ad82ff; 
    Opacity: 1; 
    height: 40px; 
    width: 50%; 
    margin-bottom: -40px; 
    z-index:9; 
    position: relative; 

} 
.eFlat:hover{ 
    opacity: .9; 

} 

.E{ 
    background-color: #c488c2; 
    Opacity: .5; 
    height: 70px; 
    width: 70%; 
    margin-bottom: -44px; 
} 

.E:hover{ 
    opacity: .5; 

} 

.F{ 
    background-color: red; 
    Opacity: .5; 
    height: 70px; 
    width: 70%; 
    margin-bottom: -10px; 

} 
.F:hover{ 
    opacity: .5; 

} 

.fSharp{ 
    background-color: #e62800; 
    Opacity: 1; 
    height: 40px; 
    width: 50%; 
    z-index:9; 
    position: relative; 
    margin-bottom: -30px; 

} 
.fSharp:hover{ 
    opacity: .9; 

} 
.G{ 
    background-color: #fd4f0d; 
    Opacity: .5; 
    height: 70px; 
    width: 70%; 
    margin-bottom: -37px 

} 
.G:hover{ 
    opacity: .2; 

} 

.aFlat{ 
    background-color: #ff8000; 
    Opacity: 1; 
    height: 40px; 
    width: 50%; 
    z-index:9; 
    position: relative; 
    margin-bottom: -40px; 

} 
.aFlat:hover{ 
    opacity: .5; 

} 
.A{ 
    background-color: #e89804; 
    Opacity: .5; 
    height: 70px; 
    width: 70%; 
    margin-bottom: -45px; 

} 
.A:hover{ 
    opacity: .2; 

} 
.bFlat{ 
    background-color: #ffff00; 
    Opacity: 1; 
    height: 40px; 
    width: 50%; 
    z-index:9; 
    position: relative; 
    margin-bottom: -45px; 

} 
.bFlat:hover{ 
    opacity: .5; 

} 
.B{ 
    background-color: #c7de21; 
    Opacity: .5; 
    height: 70px; 
    width: 70%; 
    margin-bottom: -54px; 

} 
.B:hover{ 
    opacity: .2; 
    margin-left: -15px; 
    margin-top: -5px; 
} 

.hi_c{ 
    background-color: #00a200; 
    Opacity: .5; 
    height: 70px; 
    width: 70%; 
    margin-bottom: -39px; 
    margin-top: -50px; 

} 
.hi_c:hover{ 
    opacity: .2; 

} 




/*--------------------DIVs---------------------*/ 

div.static { 
    position: static; 

} 

/*--------------------HOVER---------------------*/ 


.hvr-grow { 
    display: inline-block; 
    vertical-align: middle; 
    transform: translateZ(0); 
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
    backface-visibility: hidden; 
    transition-duration: 0.1s; 
    transition-property: transform; 
} 

.hvr-grow:hover, 
.hvr-grow:focus, 
.hvr-grow:active { 
    transform: scale(.95); 
    text-decoration: none; 
} 

/*--------------------TINT---------------------*/ 


.tint { 
    position: relative; 
    float: left; 
    margin-right: 20px; 
    margin-bottom: 20px; 
    cursor: pointer; 
    box-shadow: rgba(0,0,0,.2) 3px 5px 5px; 
} 

.notint { 
    opacity: 1.0; 


} 


.hvr-fade { 
    display: inline-block; 
    vertical-align: middle; 
    transform: translateZ(0); 
    transform: translateZ(0); 
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
    backface-visibility: hidden; 
    backface-visibility: hidden; 
    overflow: hidden; 
    transition-duration: 0.3s; 
    transition-duration: 0.3s; 
    transition-property: #59fdd8, #f01010; 
    transition-property: color, background-color; 
} 

.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active { 
    background-color: #2098d1; 
    color: white; 
} 

div{ 

    font-size: 2em; 
} 

.box{ 
    height: 100px; 
    width: 100px; 
    background-color: grey; 
} 

.box_rotate { 
    -webkit-transform: rotate(90deg); /* Chrome, Safari 3.1+ */ 
    -moz-transform: rotate(90deg); /* Firefox 3.5-15 */ 
     -ms-transform: rotate(90deg); /* IE 9 */ 
     -o-transform: rotate(90deg); /* Opera 10.50-12.00 */ 
     transform: rotate(90deg); /* Firefox 16+, IE 10+, Opera 12.50+ */ 
} 
.box_transition { 
    -webkit-transition: all 0.3s ease-out; /* Chrome 1-25, Safari 3.2+ */ 
    -moz-transition: all 0.3s ease-out; /* Firefox 4-15 */ 
     -o-transition: all 0.3s ease-out; /* Opera 10.50–12.00 */ 
      transition: all 0.3s ease-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+ */ 
}

來源

2016-02-26 EFH

你分配給票據懸停出事件明確地告訴音頻重裝，這會讓其停止播放。

$("#dFlat").hover(function(){ 
     note_dFlat.play(); //hover in handler 

     }, 
    function(){ 
     note_dFlat.load(); //hover out handler 
      });

改變了處理程序做什麼應該允許音頻標籤來完成它的播放週期（您可能需要重新審視懸停在處理程序重新啓動音頻）：

$("#dFlat").hover(function(){ 
      note_dFlat.play(); //hover in handler 

      }, 
     function(){ 
      return; //hover out handler 
       });

來源

2016-02-26 21:40:30

完美，謝謝！ – EFH

製作html5音頻片段引起過去與jQuery的懸停

回答

相關問題