javascript - 悬停时播放声音 <a attribute with image inside it> 它不能正常工作

Question

我试图在列表悬停或鼠标输入时播放声音。此列表在 a/> 属性中有 img

这是html代码和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" />
         <span">إحصائيات
         </span>
    </a>
  </li>

  <li>
    <a onmouseover="playclip();" href="SMS.aspx">
     <img src="../Styles/SMSKat/img/MOHM4ZImg/NEW_IMG/smslogo.png" alt="" />
      <span>النظام
      </span>
    </a>
  </li>
</ul>

一旦我将鼠标放入 a/> 中，它就会播放声音。转到图像并返回 a/> 再次播放

如何让声音只播放一次直到它自己熄灭

Answer 1

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

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