悬停播放带有图像的声音 [英] Play sound on hover with image

问题描述

我尝试在列表悬停或mouseenter上播放声音.此列表的

I trying to play sound on list hover or mouseenter . this list have img inside the a

属性

此it html代码和js

this it html code and js

function playclip() 
{
  var audio = document.getElementsByTagName("audio")[0];
  audio.play();
}

<ul id="nav1" class="widgeticons2">

  <li>
    <a onmouseover="playclip();" href="Statistics.aspx">
      <img src="../Styles/SMSKat/img/MOHM4ZImg/NEW_IMG/smslogo.png" />
        asdf2
    </a>
  </li>

  <li>
    <a onmouseover="playclip();" href="SMS.aspx">
     <img src="../Styles/SMSKat/img/MOHM4ZImg/NEW_IMG/smslogo.png" alt="" />
      asdfg1
    </a>
  </li>
</ul>

一旦我将鼠标放到它的播放声音中.转到图片并再次播放它的剧照

once i put the mouse inside a it play sound. Go to image and back to a its play again

如何只播放声音一次，直到声音消失为止

how to make sound play only one time until it go out the li itself

推荐答案

html

 <audio>
    <source src="../Styles/SMSKat/Sounds/Hover.mp3" />
    <source src="../Styles/SMSKat/Sounds/click.mp3" />
    <source src="../Styles/SMSKat/Sounds/click.ogg" />
</audio>

<ul id="nav1" class="widgeticons2">

  <li class="mtrack">
    <a href="Statistics.aspx">
      <img src="../Styles/SMSKat/img/MOHM4ZImg/NEW_IMG/smslogo.png" />
        asdf2
    </a>
  </li>

  <li class="mtrack">
    <a href="SMS.aspx">
     <img src="../Styles/SMSKat/img/MOHM4ZImg/NEW_IMG/smslogo.png" alt="" />
      asdfg1
    </a>
  </li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">

javascript

function playclip(){
     var audio = document.getElementsByTagName("audio")[0];
              audio.play();
            }
 $(document).ready(function() {
        $('.mtrack').on('mouseenter',function(){
        if(!$(this).hasClass('.played')){
        playclip();
        $(this).addClass('.played');
        }
        });
$('.mtrack').on('mouseleave',function(){
    if($(this).hasClass('.played')){
    $(this).removeClass('.played');
    }
    });
    });

这篇关于悬停播放带有图像的声音的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！