Question

我尝试在列表悬停或鼠标中心播放声音。这个列表在a /＆gt;里面有img属性

这是html代码和js

＆＃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" />
         <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>

＆＃13;

一旦我把鼠标放在/＆gt;它播放声音。转到图像并返回/＆gt;它再次发挥

如何让声音只播放一次，直到它消失为li /＆gt;本身

Answer 1

这是完整页面也不起作用

＆＃13;

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Defult.aspx.cs" Inherits="SMS.DASSchools.Defult" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">

         function playclip() {
            var audio = document.getElementsByTagName("audio")[0];
            audio.play();
        }
      
        $(function () {
            $('#nav1 li').on('mouseover', playclip);
        });

        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('#nav1 li').addEventListener('onmouseover', playclip, false);
        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <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">
            <li style="width:100px; border:2px solid red" ><a href="SMS.aspx" style="display: inline-block;">
                <img src="../Styles/SMSKat/img/MOHM4ZImg/NEW_IMG/smslogo.png" alt="" /><span>النظام</span></a></li>

            <li style="width:100px; border:2px solid red"><a href="Docm.aspx" style="display: inline-block;">
                <img src="../Styles/SMSKat/img/MOHM4ZImg/NEW_IMG/archive1.png" alt="" /><span>الملفات</span></a></li>
        </ul>
    </form>
</body>
</html>

＆＃13;

Answer 2

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

悬停时播放声音<a attribute="" with="" image="" inside="" it=""> its not working properly</a>

2 个答案: