Question

我正在尝试播放多个音频文件，当观众将鼠标悬停在不同的图像上时，我不希望任何播放器/条/功能显示在屏幕上，我只是希望观看者将鼠标悬停在图像上，并且声音播放，即使用户将光标移开也会完成播放。我的所有图片都放在apDiv标签中

$(function(){
    $('#apDiv3').hover(
    function() { $("killyou")[0].play(); },
    function() { $("killyou")[0].pause(); }
    )
});


<audio id="killyou" controls preload="auto">
    <source src="iwilkillyou.mp3" type="audio/mpeg"></source>
    <div id="apDiv3">
        <img src="explosion_by_dbszabo1-d3hmssu.png" width="175" height="5">
    </div>
</audio>

我在悬停时让它工作，它播放声音，但是我无法将它用于多个图像，当鼠标移离图像时声音停止，这是我第一次使用html和JQuery，任何人都可以帮我解决这个问题？谢谢！

Answer 1

（编辑：重新阅读你的问题）

也许：

$('.audio-source img').mouseover(function() {
    $('player source').attr('src', $(this).data('file'))
            .parent()[0].play();
});

使用HTML：

<audio hidden id="player" controls preload="auto">
    <source src="default-audio.mp3" type="audio/mpeg"></source>
</audio>
<div class="audio-source">
    <img data-file="foo.mp3" src="image-1.png"/>
    <img data-file="bar.mp3" src="image-2.png"/>
    <img data-file="baz.mp3" src="image-3.png"/>
</div>

我现在无法测试它。

jQuery函数.hover(on, off)绑定两个函数，一个用于鼠标悬停，一个用于鼠标关闭。您只需要鼠标，因此您可以使用函数.mouseover(function)。 jQuery代码段的作用是从您悬停的图片中获取data-file属性，并将其应用于src标记的<source>属性。然后我们抓取父<audio>标签，并在DOM节点上调用play()。

将鼠标悬停在图像上时的音频

1 个答案: