根本原因是Chrome自2018年起强制执行的自动播放策略，需用户首次交互（点击/触摸/按键）后才能播放有声音频；实测可用https://www.php.cn/link/53b1e5a2a6e0e5bd49d6bb4b3eabad0c验证，若返回audio: "denied"则必须通过muted+autoplay、用户事件触发play()或AudioContext.resume()等方式绕过限制。
谷歌浏览器无法播放HTML5网页中的音频流，常见表现为页面加载后无声、控制台报错DOMException: play() failed because the user didn't interact with the document first、或音频元素状态始终为paused，根本原因不是代码写错，而是Chrome自2018年起强制执行的自动播放策略已深度介入媒体生命周期。
确认当前浏览器是否允许有声自动播放
第一步：访问 https://www.php.cn/link/53b1e5a2a6e0e5bd49d6bb4b3eabad0c 进行实测。该页面会直接调用AudioContext和play()，返回Promise {fulfilled}且audio: "allowed"才表示当前上下文支持有声自动播放。
第二步：若结果显示audio: "denied"，说明你正处在被策略拦截的环境里——这与HTML代码是否加autoplay无关，也与音量滑块是否打开无关，只取决于用户是否完成过首次交互（点击、触摸、键盘按键）。
第三步：检查当前标签页左上角是否有带斜线的扬声器图标。有则代表该标签页已被手动静音，点击即可解除；无则继续下一步。
立即学习“前端免费学习笔记（深入）”；
绕过自动播放限制的三种可行方法
方法一：添加muted属性并触发play()（仅适用于音频需配合视频场景）
在<audio>标签中加入muted和autoplay，例如：<audio src="bgm.mp3" autoplay muted></audio>。这能立即触发播放，但输出无声——它只是“骗过”策略，为后续用户交互后取消静音做准备。
方法二：监听用户首次交互后调用play()（推荐用于纯音频项目）
在页面任意可点击区域（如按钮、封面图、空白<div>）绑定一次click或touchstart事件，在回调中调用audio.play()。注意：必须是真实用户操作触发，element.click()模拟点击无效。
方法三：启用AudioContext并在交互后恢复（适用于Web Audio API项目）
创建const ctx = new (window.AudioContext || window.webkitAudioContext)();后，其初始状态为suspended；只有在用户交互事件回调中调用ctx.resume()，后续所有节点（OscillatorNode、BufferSourceNode等）才能正常发声。【若跳过此步直接连接节点并调用start()，将静默失败且不报错】
检查网站级声音权限是否被阻止
点击地址栏左侧锁形图标 → “网站设置” → 找到“声音”选项 → 确认其值为“允许”。【若显示为“阻止”，必须手动改为“允许”，否则即使用户已交互，play()仍会抛出NotAllowedError】
该设置独立于标签页静音和系统音量，是Chrome三级静音控制中最底层的一环。
验证JavaScript是否被禁用
访问 chrome://settings/content/javascript → 确保开关为“允许所有网站运行 JavaScript（推荐）”。
若此处被设为“不允许任何网站运行 JavaScript”，则<audio>标签虽能渲染，但所有play()、load()、oncanplay等行为全部失效，控制台也不会报错，只会静默卡住。
