Wie kann man bei Mauseingabe automatisch Ton abspielen, ohne auf das Dokument zu klicken?

Question

Ich habe den folgenden HTML-Code:

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

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

und der folgende JavaScript/jQuery-Code:

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

In meinem Browser funktioniert dieser Code nur, wenn ich auf das Dokument klicke. Andernfalls funktioniert es nicht und in der JavaScript-Konsole erscheint der folgende Fehler:

Uncaught (in Versprechen) DOMException: Play-Methode nicht zulässig Möglicherweise der Benutzeragent oder die Plattform im aktuellen Kontext Weil der Benutzer die Erlaubnis verweigert hat.

und die folgende Warnung:

Autoplay nur zulassen, wenn der Benutzer zustimmt, Der Benutzer hat mit der Website interagiert oder für die Mediendatei ist die Lautstärke festgelegt Zurück zur Null.

Wenn ich die Lautstärke auf Null stelle, erhalte ich die folgende Fehlermeldung:

Uncaught (in Versprechen) DOMException: Medienabrufprozess Der Benutzeragent hat die Ressource auf Wunsch des Benutzers beendet.

Ich habe es sowohl auf Chrome als auch auf Firefox ausprobiert.

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>