Question

我不确定为什么这个脚本不能像我想的那样工作，当我运行它时不会发生错误。我也在运行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" width="600" 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>

正如您所看到的，我正在尝试在鼠标悬停事件中播放音频。我不能让这个工作，但我不确定错误在哪里。

更新 - mouseenter事件似乎无效。

Answer 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在尝试执行脚本之前等待页面完全加载。

尝试在mouseover事件上播放HTML5音频

1 个答案: