javascript - 使用 jQuery 使 html5 音频片段在悬停时产生共鸣

标签 javascript jquery css html

我这里有一架小钢琴。现在它可以工作，但是当鼠标不再悬停在元素上时(可以理解)，注释会中断。我想知道是否可以让鼠标离开

  • 后让音符产生共鸣。感谢您的帮助。

    Piano on webpage (sound works)

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

    • 最佳答案

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

     $("#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
                });

    关于javascript - 使用 jQuery 使 html5 音频片段在悬停时产生共鸣，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35661989/

    上一篇：java - 在 JavaFX 中使用 CSS 时遇到问题

    下一篇：css - Bootstrap Navbar 中间有品牌

    相关文章：

    jquery - gmaps4rails 按 id 选择标记

    javascript - 如何在AngularJS中的ng-repeat下修改特定数据

    html - 为什么移动尺寸的 Bootstrap 网格中的行之间有空格？

    jquery - 在 jquery .click() 事件后重置背景颜色

    css - 合并 TTF 字体文件(用于 CSS)

    javascript - confirm() 如何在 JavaScript 中工作

    javascript - 如何将逻辑/数学运算符分配给对象的函数？

    javascript - 如何根据一组控制和目标坐标将图像转换为不同的尺寸？

    javascript - 为什么我的脚本不能处理 ajax 文档？

    javascript - Submit() 事件未在表单上触发

    ©2024 IT工具网  联系我们