【问题标题】:Audio play on hover / mouse over, possible without jQuery ?悬停/鼠标悬停时播放音频,可能没有 jQuery 吗?
【发布时间】:2018-12-03 23:34:17
【问题描述】:

我只是把这段代码放在一起在悬停时播放音频.. 在一个测试页面上,试图将它合并到网站的其余部分,但是 jQuery 与其他 jQuery 发生冲突,此时无冲突模式很漂亮巨大的工作。是否可以仅使用 javascript 执行以下操作?

<audio id="whiterose"  preload="auto">
                <source src="//sarahboulton.co.uk/audio/white-rose.mp3"></source>
                <source src="//sarahboulton.co.uk/audio/white-rose.ogg"></source>
</audio>


<div class="whiterose">

<a href="http://sarahboulton.co.uk">white rose?</a>

</div>

<script>

//change audio 1 to audio 2.. 3 .. etc

var audioOne = $("#whiterose")[0];
$(".whiterose a")
    .mouseenter(function() {
        audioOne.play();
    });


</script>

http://sarahboulton.co.uk/audio.html#

谢谢!

【问题讨论】:

    标签: javascript jquery html audio hover


    【解决方案1】:
    <audio id="audio"  preload="auto" src="http://sarahboulton.co.uk/audio/white-rose.mp3"></audio>
    <div id="test" style="background-color:red;" class="whiterose">
        <a href="http://sarahboulton.co.uk">white rose?</a>
    </div>
    
    <script>
    var test = document.getElementById("test");
    test.addEventListener("mouseover", function( event ) {   
        var audio = document.getElementById("audio");
        audio.play();
    }, false);
    </script>
    

    【讨论】:

    • 谢谢伊万!只有在悬停之前单击空白区域,它似乎才有效,有没有办法解决这个问题?
    • Chrome 从 66 版开始阻止视频和音频自动播放,错误是:“未捕获(承诺中)DOMException:play() 失败,因为用户没有先与文档交互”。“你可以在这里找到一些关于它的帖子,但我认为没有解决方法
    猜你喜欢
    • 2023-04-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-07-27
    • 2018-07-31
    • 2011-07-07
    • 2011-08-04
    • 2016-06-03
    相关资源
    最近更新 更多