JQuery

How to play audio on hover using jQuery?

How to play audio on hover using jQuery?, someone asked me to explain?

In this article we will discuss to play audio on hover using jQuery. We are going to use HTML5 without flash. We need an audio element with mp3.

Example:

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Text effects</title>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <style type="text/css">
        .nav {
            width: 120px;
            float: left;
            list-style: none;
        }
 
            .nav li {
                position: relative;
            }

           .nav a {
                display: block;
                padding: 20px;
                text-decoration: none;
                color: white;
                background-image: -moz-linear-gradient(bottom, #444444, #999999);
                background-image: -o-linear-gradient(bottom, #444444, #999999);
                background-image: -webkit-gradient(linear, left top, left bottom, from(#659ECC), to(#194D77));
                background-image: -webkit-linear-gradient(bottom, #12456D, #00BCD4);
            }
                 .nav a:hover {
                    background: #082135;
               }
 
            .nav audio {
                position: absolute;
                left: 110%;
                top: 10px;
                display: block;
                height: 30px;
                width: 200px;
            }
    </style>
</head>
<body>
    <section id="one">
        <div class="inside">
            <h2>One &lt;audio&gt; for all menu items</h2>
            <p>play audio on hover the menu </p>
            <ul id="nav-one" class="nav">
                <li>
                  <a href="#">Home</a>
                   <audio id="beep-one" controls="controls" preload="auto">
                       <source src="audio/beep.mp3">
                       <source src="audio/beep.ogg">
                       Your browser isn't invitedfor super fun time.
                   </audio>
                </li>
                <li><a href="#">About</a></li>
                <li><a href="#">Clients</a></li>
                <li><a href="#">ContactUs</a></li>
            </ul>

            <script>varbeepOne = $("#beep-one")[0];
               $("#nav-onea")
                   .mouseenter(function () {
                       beepOne.play();
                   });</script>
        </div>
    </section>
</body>
</html> 

Output:

play audio on hover using jQuery

Post your comments / questions