How to automatically play sound on mouse enter event without clicking on document?

Question

I have the following HTML code:

<div id="word">word</div>

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

and the following JavaScript/jQuery code:

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

On my browser, this code only works if I click the document. Otherwise, it does not work and the following error appears in the JavaScript console:

Uncaught (in promise) DOMException: Play method not allowed The user agent or platform in the current context, possibly Because the user denied permission.

and the following warning:

Allow autoplay only if user accepts, The user has interacted with the website or the media file has the volume set Return to zero.

If I set the volume to zero, I get the following error:

Uncaught (in promise) DOMException: Media retrieval process The user agent terminated the resource at the user's request.

I tried it on both Chrome and 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>