必须手动模拟长按并提前在touchstart中调用audio.play()获取播放权限，因HTML无longpress事件且浏览器限制play()须在用户手势同步上下文中执行；移动端尤其敏感，需缓存初始play()返回的Promise并在长按时复用。
不能直接用 longpress 事件插入音频——HTML 标准里压根没有这个事件，必须手动模拟长按，再在触发时调用 play()。
为什么 audio.play() 在长按里经常静默失败
常见现象：长按后控制台没报错，但音频就是不响。根本原因是浏览器对 play() 的调用有严格限制——它必须发生在用户手势（如 touchstart、click）的同步上下文中，而定时器回调（setTimeout）已脱离该上下文。
- 移动端尤其敏感：iOS Safari 和安卓 Chrome 都会拒绝非即时手势链中的
play() - audio 元素必须已加载完成，否则
play()会立即 reject Promise，且不抛异常 - 如果音频是首次播放，还需确保未被静音（
muted属性可绕过部分限制，但用户需后续手动解除）
正确绑定长按 + 播放的三步关键操作
核心思路：把 play() 提前“预约”在 touchstart 的同步阶段，用 Promise 缓存播放能力，长按时直接调用已准备好的 play() 方法。
- 在
touchstart（或pointerdown）中立即创建并调用一次audio.play()，仅用于“解锁”播放权限；捕获返回的 Promise 并缓存 - 用
setTimeout启动长按计时，超时后检查 Promise 状态，若已 resolve 就再次调用play()（此时不会被拦截） - 必须监听
touchend和touchcancel清除定时器，否则滚动中断后仍会触发
简易示意：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
const audio = new Audio('sound.mp3');
let playPromise = null;
element.addEventListener('touchstart', (e) => {
e.preventDefault();
// 第一次调用，只为获取播放权限
playPromise = audio.play().catch(e => console.warn('initial play failed:', e));
});
element.addEventListener('touchend', () => clearTimeout(longPressTimer));
element.addEventListener('touchcancel', () => clearTimeout(longPressTimer));
let longPressTimer = null;
element.addEventListener('touchstart', () => {
longPressTimer = setTimeout(() => {
if (playPromise && playPromise.then) {
playPromise.then(() => audio.play()).catch(console.warn);
}
}, 600);
});
PC 端模拟长按时 audio 播放更易失败的原因
鼠标事件本身不被视为“媒体播放手势”，所以仅靠 mousedown + setTimeout 几乎必然失败。
- 必须搭配真实用户交互入口：比如先点一次播放按钮触发过
play()，后续长按才能复用权限 - 或者改用
pointerdown（兼容性较好），并在支持时优先使用 - 预加载建议设为
preload="metadata"，避免长按瞬间卡在加载上
容易被忽略的兼容性硬伤
iOS Safari 对 Audio 实例的播放权限只保留很短时间（约 1–2 秒），长按延迟设成 500ms 是安全的，但超过 800ms 就可能失效；Android WebView 则常要求音频元素已挂载到 DOM 且 visible，display: none 或 opacity: 0 都可能导致 play() 被拒。
