悬停时播放音频文件（鼠标悬停时停止播放）

Posted 2023-02-25

【中文标题】悬停时播放音频文件（鼠标悬停时停止播放）

【英文标题】：Play audio file on hover (and stop playing on mouseout)

【发布时间】：2010-06-10 11:23:28

【问题描述】：

通过 javascript 在鼠标悬停时播放音频文件的最佳解决方案是什么？并在鼠标离开链接时停止它。 jQuery 可用。

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

【问题讨论】：

作为人类的一员，我要求您至少将其设为click 活动。

作为清晰 (HT) 标记语言的粉丝，我想将此链接保留为音频文件。添加一点 JS 的花哨...

我想你没看懂我的意思，作为大多数用户，用户不希望在简单地将鼠标移动到页面上时启动声音，它应该是点击，而不是悬停。为什么您认为大量基于 Flash 的广告正在消失，而广告/Flash 拦截器的使用量却在飙升？许多相同的推理在这里适用......只是你应该考虑的事情。

@Nick：它适用于处理大量音频文件并且单击比悬停慢的应用程序。它是用于后端管理工具的，有必要非常快速地找出它是什么文件......

【参考方案1】：

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

【参考方案2】：

http://www.schillmania.com/projects/soundmanager2/ 提供 html5 + 旧版支持

【讨论】：

SoundManager 有点重。没有其他建议？

我已经看到这在不同的游戏开发活动中得到了很好的应用 +1，它很有效——我不知道其他的选择。如果有一些简约的解决方案，我也很感兴趣。

【参考方案3】：

<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>

你可以使用 unomi 推荐的播放器。效果很好

【讨论】：

这里有两件事，有一个 .hover() 函数你应该检查一下，绑定时永远不需要 .each()，只需调用 $("a.play").click() 例如，它会绑定每个匹配该选择器:)

谢谢尼克，我忘了悬停！

@NickCraver 是否有可能获得您的替代解决方案作为答案？我不喜欢回答者在您发表评论后没有改进他的答案。这将使这篇文章的质量更高。