尝试在鼠标悬停事件上播放 HTML5 音频

Posted 2023-02-25

【中文标题】尝试在鼠标悬停事件上播放 HTML5 音频

【英文标题】：Trying to play HTML5 audio on a mouseover event

【发布时间】：2011-10-31 03:30:52

【问题描述】：

我不确定为什么这个脚本没有像我想象的那样工作，当我运行它时没有发生错误。如果这对该脚本的交互方式有任何影响，我也在运行 qTip 2。

这是我的脚本。

JS

    <script type="text/javascript">
var $j = jQuery.noConflict();

var growlSound = $j("#growlSound")[0];
$j("#growl")
    .mouseenter(function() 
            growlSound.play();
    );

var laughSound = $j("#laughSound")[0];
$j("#laugh")
    .mouseenter(function() 
            laughSound.play();
    );

</script>

HTML

<audio id="growlSound" preload="auto">
                            <source src="/messages4u/2011/images/october/growl.ogg">
                            <source src="/messages4u/2011/images/october/growl.mp3">
                            Your browser does not support html5 Audio. Please Upgrade Your Browser.
                    </audio>
                            <audio id="laughSound" preload="auto">
                            <source src="/messages4u/2011/images/october/laugh.ogg">
                            <source src="/messages4u/2011/images/october/laugh.mp3">
                            Your browser does not support HTML5 Audio. Please Upgrade Your Browser.
                    </audio>
    <p><img src="/messages4u/2011/images/october/halloween4.jpg"  border="0" usemap="#Map" class="center" style="width: 600px;" />
      <map name="Map" id="Map">
        <area class="growl" id="growl" style="cursor:default;" shape="rect" coords="117,118,225,223" href="#" />
        <area class="laugh" id="laugh" style="cursor:default;" shape="rect" coords="255,244,308,292" href="#" />
      </map>
</p>

如您所见，我正在尝试在鼠标悬停事件上播放音频。我无法让它工作，但我不确定错误在哪里。

更新 - mouseenterevent 似乎不起作用。

【问题讨论】：

“脚本不起作用”是一个糟糕的问题标题。请重试。

您是否查看过使用 firebug 或集成的 javascript 调试器是否有错误？

Firebug 不会产生任何错误。我创建代码时 Dreamweaver 没有显示任何错误。

@Tomalak Geret'kal - 问题在于问题。虽然标题可能不是很好，但它说明了问题。脚本不起作用...

@Lynda：这不是问题。下次请修正题名，方便以后的访问者辨别题主； thomasrutter 这次做得很好。

【参考方案1】：

可能还有其他一些因素在起作用。我在这里创建了一个更简单的示例；似乎正在工作（在 Chrome 中）：

http://jsfiddle.net/5PnCt/2/

可能是这样的：

您的音频文件未正确链接 不知何故，您未能触发 mouseenter 事件 您没有正确绑定事件

要测试第二种情况，请添加如下内容：

        console.log('playing');

...到您的 mouseenter 处理程序之一。如果触发了事件，您应该会看到日志消息。

对于第三种情况，请确保将脚本放在它们影响的 HTML 之后，或者使用以下包装器确保它们在 HTML 加载之前不会执行：

var $j = jQuery.noConflict();
$j(document).ready(function()
    ...code goes here...
);

如果页面上不存在元素，则无法选择并将事件绑定到该元素，因此代码的顺序很重要。使用 document.ready 是解决此问题的一种方法；它告诉 jQuery 在尝试执行脚本之前等待页面完全加载。

【讨论】：

我让它显示控件。鼠标悬停不会触发文件播放。你知道为什么吗？

嗯，文件没有播放，但您确定事件正在触发？可能是路径不对。当您转到 [yourserver]/messages4u/2011/images/october/growl.ogg 时，是否播放/下载 ogg 文件？您可能知道这一点，但以“/”开头的链接将导致浏览器查看根目录 (example.com/[pathname])，而不是当前位置 (example.com/mywebpage/[pathname])。

是的，他们正在工作。我打开了控件，我可以通过点击播放来播放文件，但它们不会在鼠标悬停时触发。这是我正在处理的页面 - tinyurl.com/3zceysj - 恶魔般的脸和左边的稻草人/女巫是应该发出声音的两个事件。图片的控件仅供测试，一般不会显示。

另一个注意事项，我没有看到日志，所以我认为 mouseenter 没有触发？

看起来问题是您在页面上存在 DOM 元素之前选择了它们！用修复更新我的答案。