在悬停图像时播放声音

Question

我尝试在列表悬停或鼠标中心播放声音。这个列表里面有img里面的

属性

这是html代码和js

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

一旦我将鼠标放入播放声音中。转到图像并再次回到它的播放

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

Answer 1

<强> 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');
    }
    });
    });