JQuery

How to play audio on hover using jQuery?

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

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

Related Article

Post your comments / questions



Recent Article