为何使用HTML无法实现音频自动播放？求解决方案

现在主流浏览器（包括Edge、Opera GX）都有严格的自动播放政策，默认会阻止没有用户主动交互的音频自动播放——这是为了避免未经许可的声音打扰用户，也是你用autoplay属性却没效果的核心原因。

下面是两种符合浏览器规则的可行方案：

方案1：静音自动播放（最简便） #

给audio标签添加muted属性，浏览器允许静音的媒体内容自动播放，用户可以手动点击播放器的静音按钮取消静音。修改后的代码如下：

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Website </title>
</head>
<body>
    <h2>Welcome to my website</h2>
    <audio src="sound.mp3" controls autoplay muted>
        <p>If you are reading this, it is because your browser does not support the audio element.</p>
    </audio>
</body>
</html>

方案2：通过用户交互触发播放 #

如果不想静音启动，可以监听用户的第一次交互（比如点击页面、触摸屏幕），在交互发生后触发音频播放。这种方式完全符合浏览器政策，代码示例：

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Website </title>
</head>
<body>
    <h2>Welcome to my website</h2>
    <audio id="bgAudio" src="sound.mp3" controls>
        <p>If you are reading this, it is because your browser does not support the audio element.</p>
    </audio>

    <script>
        // 监听用户第一次点击事件，触发播放后自动移除监听
        document.addEventListener('click', async () => {
            const audio = document.getElementById('bgAudio');
            try {
                await audio.play();
            } catch (err) {
                console.error('音频播放失败:', err);
            }
        }, { once: true });
    </script>
</body>
</html>

需要注意：没有办法绕过浏览器的自动播放限制——任何声称可以无交互自动播放的方法要么已经失效，要么会被浏览器拦截，甚至可能被标记为恶意行为。

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