javascript - Play audio file on hover (and stop playing on mouseout) - Stack Overflow

admin管理员组

文章数量:1324838

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>

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>

• javascript
• jquery
• audio

Share Improve this question Follow edited Feb 22, 2013 at 21:52 powtac asked Jun 10, 2010 at 11:23 powtacpowtac 41.1k2828 gold badges118118 silver badges172172 bronze badges 4

• 3 As a member of humanity, I ask you to at least make this a click event. – Nick Craver Commented Jun 10, 2010 at 11:44
• As a fan of clear (HT) Markup Language I want to keep this link to a audio file. Adding just a little JS fancy... – powtac Commented Jun 10, 2010 at 11:54
• I think you missed my point, as a majority, users prefer not to have a sound startup when simply moving their mouse across the page, it should be a click, not a hover. Why do you think flash based ads with high volume are going away and ad/flash blockers usage is skyrocketing? A lot of the same reasoning applies here...just something you should consider. – Nick Craver Commented Jun 10, 2010 at 12:12
• @Nick: Its for an application which handles a lot of audio files and clicking is slower than hovering. It is for a backend administration tool and it is necessary to figure out very fast what file it is... – powtac Commented Jun 10, 2010 at 12:35

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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

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

<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

本文标签： javascriptPlay audio file on hover (and stop playing on mouseout)Stack Overflow