堆栈内存溢出
  繁体   English   中英

使用jQuery使HTML5音频代码段在悬停时产生共鸣

[英]Making html5 audio snippet resonate past hover with jQuery

 原文  2016-02-26 21:23:20  6   1    javascript/ jquery/ html/ css/ html5

问题描述

我这里有一架小钢琴。 现在可以正常工作，但是当鼠标不再悬停在元素上时，注释会消失（可以理解）。 我想知道是否有可能在鼠标离开<li>后使音符产生共振。 谢谢你的帮助。

网页上的钢琴（声音作品）

Jsfiddle-我不确定为什么声音在这里不起作用。

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+ */
}

1 个解决方案

解决方案1
 1 已采纳  2016-02-26 21:40:30

您要分配给音符的悬停事件会明确告诉音频重新加载，这会阻止音频播放。 

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

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

将out处理程序更改为不执行任何操作应允许音频标签完成其播放周期（您可能需要重新访问悬停处理程序以重新启动音频）： 

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

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 带有HTML5中“音频”元素的JQuery HTML5音频Jquery无法正常工作 jQuery自动播放HTML5音频 带有JQuery音频的HTML5音频标签 jQuery .on（）悬停不适用于HTML5选择框 HTML5 / jQuery音频随机播放onClick jQuery全局播放和HTML5音频暂停 非法调用jQuery HTML5音频播放 单击以放大在画布上插入的图像并将其剪辑，片段jQuery，html5 在html5音频元素上使用jquery绑定'timeupdate'
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM