如何在未点击文档时，通过mouseenter事件触发音频播放？

问题重现代码 #

HTML代码 #

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

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

注意：原代码中<source>的src属性存在语法错误（缺少=），已修正为src="sound.ogg"

JavaScript/jQuery代码 #

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

遇到的错误与警告 #

• 未点击页面时触发mouseenter的错误：

Uncaught (in promise) DOMException: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

• 对应的浏览器警告：

Automatic playback is permitted only when accepted by the user, the user has interacted with the site or the media file has the volume set to zero.

• 设置音量为0后触发的错误：

Uncaught (in promise) DOMException: The fetching process for the media resource was aborted by the user agent at the user's request.

问题原因 #

Chrome、Firefox等现代浏览器都采用了自动播放限制策略，核心目的是避免未经用户许可的媒体播放干扰用户体验。

浏览器的判定规则是：只有在用户完成主动交互操作（比如点击页面、触摸屏幕、按下按键）之后，才允许通过脚本触发媒体播放。mouseenter属于被动触发的事件，不在浏览器认可的"主动交互"范围内，因此在用户未点击过页面时调用audio.play()会被直接拦截，抛出权限错误。

即使将音量设为0也无法绕过限制——浏览器不仅拦截播放行为，还会中止未经过用户交互的媒体资源加载请求，导致资源获取失败。

解决方案 #

方案1：改用主动点击触发播放 #

将mouseenter事件替换为click事件，用户点击元素属于主动交互，浏览器会允许播放：

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

方案2：提前通过首次交互初始化媒体上下文 #

监听页面的第一次点击/触摸事件，提前初始化音频播放上下文，之后mouseenter事件就能正常触发播放：

// 标记是否已完成首次交互初始化
let hasInteracted = false;

// 监听页面的首次主动交互
$(document).one('click touchstart', function() {
    if (!hasInteracted) {
        const audio = $("#player")[0];
        // 静音播放一次以初始化上下文，随后暂停并恢复音量
        audio.muted = true;
        audio.play().then(() => {
            audio.pause();
            audio.muted = false;
            hasInteracted = true;
        }).catch(err => {
            console.error('音频上下文初始化失败:', err);
        });
    }
});

// 原mouseenter事件，仅在完成初始化后触发
$('#word').mouseenter(function()
{
    if (hasInteracted) {
        const audio = $("#player")[0];
        audio.load();
        audio.play();
    }
});

方案3：预加载音频提升响应速度 #

给<audio>标签添加preload="auto"属性，让浏览器提前加载音频资源，配合方案2的初始化逻辑，能让后续播放更顺畅：

<audio id="player" preload="auto">
    <source id="source" src="sound.ogg" type="audio/ogg" />
</audio>

内容的提问来源于stack exchange，提问作者anva