CODEWITHSUNDEEP
jqueryhtml
Xarcell
Xarcell

Reputation: 2011

Using jQuery To Play Audio On Hover

Going by the information here: http://forums.blackmesasource.com/showthread.php?t=13235

I'm trying to play an audio file on hover in my nav links. The problem with playing audio files when moving over links real fast, is that it plays the whole file before playing again, causing somewhat a delay in audio when hovering fast across links.

The solution to that problem in the link above, is to add load();

This is my jQuery code so far:

<script type="text/javascript">
    $("nav ul li").hover(function(){
        nav_audio.play();
        },
    function(){
        nav_audio.load();
    });
</script>

My HTML5 Code:

<audio id="nav_audio">
    <source src="nav.mp3" type="audio/mpeg"></source>
    <source src="nav.ogg" type="audio/ogg"></source>
</audio>

No audio is played on hover, and no errors show in the browser console(Chrome).

Any idea what I'm doing wrong, or why it's not working? I have linked to the jQuery file, and the audio tags work, because they are used elsewhere without jQuery. I can only guess that the issue here is with the jQuery.

Upvotes: 1

Views: 7531

Answers (2)

Xarcell
Xarcell

Reputation: 2011

I figured it out. It needed the document ready function. So, script was changed slightly to this:

<script type="text/javascript">
$(document).ready(function(){
    $("nav ul li").hover(function(){
        nav_audio.play();
        },
    function(){
        nav_audio.load();
    });
});
</script>

Upvotes: 2

Jorge Y. C. Rodriguez
Jorge Y. C. Rodriguez

Reputation: 3449

    $(document).ready(function() {
     var audioElement = document.createElement('audio');
     audioElement.setAttribute('src', 'audio.mp3');
     audioElement.setAttribute('autoplay', 'autoplay');
     $.get();
     audioElement.addEventListener("load", function() {
     audioElement.play();
    }, true);




    $('.play').on('hover',function(event) {
       audioElement.play();
    }); 

    $('play)..unbind("mouseleave");

});

Upvotes: 1

Related Questions