CODEWITHSUNDEEP
htmlcssaudio
Shurvir Mori
Shurvir Mori

Reputation: 2417

how to give sound effect on hover

I have menu ... like below

I want to give sound effect on hover

<ul id="menu" class="nav">
    <li>
        <a href="#">Home</a>
        <audio id="sound" controls preload="auto"><source src="http://soundbible.com/mp3/MP5_SMG-GunGuru-703432894.mp3" controls></source></audio>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

I want to give sound effect on hover

Upvotes: 2

Views: 6424

Answers (3)

shurvirpm
shurvirpm

Reputation: 81

You can use jQuery mouseover() OR mouseenter() to start audio and mouseleave() OR mouseout() to disable audio effect.

Try once. it's working for me

Upvotes: 2

rajvir.mori
rajvir.mori

Reputation: 21

I agree with Rafik Malek.

<head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <style type="text/css">audio {display: none;}</style>
</head>
<body>
<ul id="nav-two" class="nav">
    <li>
        <a href="#">Home</a>
        <audio id="sound" controls preload="auto"><source src="http://soundbible.com/mp3/MP5_SMG-GunGuru-703432894.mp3" controls></source></audio>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>
<script>
$("#nav-two a")
  .each(function(i) {
    if (i != 0) {
      $("#sound")
        .clone()
        .attr("id", "sound" + i)
        .appendTo($(this).parent());
    }
    $(this).data("beep", i);
  })
  .mouseenter(function() {
    $("#sound" + $(this).data("beep"))[0].play();
  });
$("#sound").attr("id", "sound0");
</script>
</body>

Upvotes: 2

Alfiza malek
Alfiza malek

Reputation: 1004

$("#nav-two a")
  .each(function(i) {
    if (i != 0) {
      $("#sound")
        .clone()
        .attr("id", "sound" + i)
        .appendTo($(this).parent());
    }
    $(this).data("beep", i);
  })
  .mouseenter(function() {
    $("#sound" + $(this).data("beep"))[0].play();
  });
$("#sound").attr("id", "sound0");
audio {display: none;}
<head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</head>
<body>
<ul id="nav-two" class="nav">
    <li>
        <a href="#">Home</a>
        <audio id="sound" controls preload="auto"><source src="http://soundbible.com/mp3/MP5_SMG-GunGuru-703432894.mp3" controls></source></audio>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

</body>

try this

<head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <style type="text/css">audio {display: none;}</style>
</head>
<body>
<ul id="nav-two" class="nav">
    <li>
        <a href="#">Home</a>
        <audio id="sound" controls preload="auto"><source src="http://soundbible.com/mp3/MP5_SMG-GunGuru-703432894.mp3" controls></source></audio>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>
<script>
$("#nav-two a")
  .each(function(i) {
    if (i != 0) {
      $("#sound")
        .clone()
        .attr("id", "sound" + i)
        .appendTo($(this).parent());
    }
    $(this).data("beep", i);
  })
  .mouseenter(function() {
    $("#sound" + $(this).data("beep"))[0].play();
  });
$("#sound").attr("id", "sound0");
</script>
</body>

Upvotes: 1

Related Questions