<p>我有以下HTML代码：</p> <pre class="brush:php;toolbar:false;">&lt;div id=&quot;word&quot;&gt;word&lt;/div&gt; &lt;audio id=&quot;player&quot;&gt; &lt;source id=&quot;source&quot; src&quot;sound.ogg&quot; type=&quot;audio/ogg&quot; /&gt; &lt;/audio&gt;</pre> <p>以及以下JavaScript/jQuery代码：</p> <pre class="brush:php;toolbar:false;">$('#word').mouseenter(function() { var audio = $(&quot;#player&quot;)[0]; audio.load(); audio.play(); });</pre> <p>在我的浏览器上，这段代码只有在我<strong>点击</strong>文档后才能工作。否则，它不起作用，并且在JavaScript控制台中会出现以下错误：</p> <blockquote> <p>未捕获（承诺中）DOMException：不允许播放方法 当前上下文中的用户代理或平台，可能 因为用户拒绝了权限。</p> </blockquote> <p>以及以下警告：</p> <blockquote> <p>只有当用户接受时才允许自动播放， 用户已与网站进行交互或媒体文件已设置音量 归零。</p> </blockquote> <p>如果我将音量设置为零，我会得到以下错误：</p> <blockquote> <p>未捕获（承诺中）DOMException：媒体的获取过程 用户代理根据用户的请求中止了资源。</p> </blockquote> <p>我在Chrome和Firefox上都尝试过。</p>

<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>