如何在mouseenter事件中播放声音，而不首先单击文档?

Question

我有以下HTML代码:

<div id="word">word</div>
<audio id="player">
<source id="source" src"sound.ogg" type="audio/ogg" />
</audio>

和以下JavaScript/jQuery代码:

$('#word').mouseenter(function()
{
var audio = $("#player")[0];
audio.load();
audio.play();
});

在我的浏览器上，这段代码只有在单击时才有效。首先在文件上。否则它不起作用，在JavaScript控制台中我得到这个错误:

Uncaught (in promise) DOMException: play方法不被允许可能是当前上下文中的用户代理或平台因为用户拒绝权限。

和这个警告:

只有在用户同意的情况下才允许自动播放用户已经与站点进行了交互，或者媒体文件已经设置了卷为零。

如果我将音量设置为0，我会得到以下错误:

Uncaught (in promise) DOMException:获取媒体的过程用户代理应用户请求中止资源。

我在Chrome和Firefox上都试了。

Answer 1

<div id="word" style="font-size: 30px; margin-bottom: 200px; ">word</div>

<audio id="player" controls preload="auto">
<source src="audio/beep.mp3" controls></source>
<source src="audio/beep.ogg" controls></source> 
</audio>

<script>
var player = $("#player")[0];
$("#word").mouseenter(function() {              
player.play();
}); 
</script>