Comment lire automatiquement le son lors de l'événement d'entrée de la souris sans cliquer sur le document ?

Question

J'ai le code HTML suivant :

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

<identifiant audio="lecteur">
    <identifiant de la source="source" src"sound.ogg" type="audio/ogg" />
</audio>

et le code JavaScript/jQuery suivant :

$('#word').mouseenter(function()
{
    var audio = $("#player")[0];
    audio.load();
    audio.play();
});
Sur mon navigateur, ce code ne fonctionne que si je clique sur le document. Sinon, cela ne fonctionne pas et l'erreur suivante apparaît dans la console JavaScript : 

Non capturé (promis) DOMException : méthode de lecture non autorisée
L'agent utilisateur ou la plateforme dans le contexte actuel, éventuellement
Parce que l'utilisateur a refusé l'autorisation. 

et l'avertissement suivant : 

Autoriser la lecture automatique uniquement si l'utilisateur l'accepte,
L'utilisateur a interagi avec le site Web ou le fichier multimédia a le volume défini
Retour à zéro. 

Si je règle le volume à zéro, j'obtiens l'erreur suivante : 

Non capturé (promis) DOMException : processus de récupération de média
L'agent utilisateur a mis fin à la ressource à la demande de l'utilisateur. 

Je l'ai essayé sur Chrome et 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>