ドキュメントをクリックせずにマウス入力イベントで自動的にサウンドを再生するにはどうすればよいですか?

Question

次の HTML コードがあります:

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

<オーディオ ID="プレーヤー">
    <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 メソッドは許可されていません 現在のコンテキストにおけるユーザー エージェントまたはプラットフォーム、おそらく ユーザーが許可を拒否したためです。

および次の警告:

<ブロック引用>

ユーザーが同意した場合にのみ自動再生を許可します。 ユーザーが Web サイトを操作したか、メディア ファイルにボリュームが設定されています ゼロに戻ります。

音量をゼロに設定すると、次のエラーが表示されます:

<ブロック引用>

キャッチされません (約束どおり) 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>