無需點擊文檔，如何在滑鼠進入事件上自動播放聲音？

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控制台中會出現以下錯誤：

未捕獲（承諾中）DOMException：不允許播放方法 當前上下文中的用戶代理或平台，可能 因為使用者拒絕了權限。

以及以下警告：

只有當使用者接受時才允許自動播放， 用戶已與網站互動或媒體檔案已設定音量 歸零。

如果我將音量設為零，我會得到以下錯誤：

未捕獲（承諾中）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>