CODEWITHSUNDEEP
javascriptjqueryaudio
powtac
powtac

Reputation: 41080

Play audio file on hover (and stop playing on mouseout)

What is the best solution to play an audio file on mouse over via JavaScript? And stop it when the mouse leaves the link. jQuery is available.

<a href="/test.mp3" class="play">play</a>

Upvotes: 3

Views: 9388

Answers (3)

Lri
Lri

Reputation: 27633

<audio id="mysound" src="mysound.wav"></audio>
<button onmouseover="document.getElementById('mysound').play()" onmouseout="document.getElementById('mysound').pause()">Hover me!</button>

Upvotes: 3

TheBrain
TheBrain

Reputation: 5608

<script type="text/javascript">
    (function($) {
        $(function(){
                $("a.play").each(function() {
                  $(this).mouseover(function(){ 
                       var mp3file = $(this).attr('href');
                       // asign this mp3file to the player and play it
                  }).mouseout(function() { 
                       // tell the mp3 player to stop
                  });
                });
        });
    })(jQuery);
</script>

you can use the player that unomi suggested. works great

Upvotes: 1

unomi
unomi

Reputation: 2672

http://www.schillmania.com/projects/soundmanager2/
Provides HTML5 + legacy support

Upvotes: 1

Related Questions