bootstrap不支持表单验证提示音效，需手动用javascript控制audio对象并严格遵循浏览器自动播放策略：首次播放必须由用户手势同步触发，后续方可复用同一实例实现稳定发声。
Bootstrap 本身不提供、也不支持表单验证提示音效 —— 它没有内置 audio API 调用，也没有 data-bs-sound 或类似配置项。想加提示音，必须手动用 JavaScript 控制 Audio 对象，且需严格遵循浏览器的自动播放策略（autoplay policy）。
为什么直接 new Audio().play() 在表单校验时大概率静音
现代浏览器（Chrome、Edge、Safari、Firefox）强制要求：音效首次播放必须由用户手势（如 click、keydown）触发，且该手势上下文不能被异步延迟破坏。表单校验失败通常发生在 blur、input 或 submit 回调中，这些不是“可信事件源”，play() 会立即抛出 DOMException: play() failed because the user didn't interact with the document first。
- 错误写法：
input.addEventListener('invalid', () => new Audio('/beep.mp3').play())→ 必然失败 - 正确前提：必须在用户点击“提交”按钮、或聚焦输入框等明确手势后，**立刻**（同步）初始化并播放一次音频，后续才能复用
- iOS Safari 尤其严格：即使你点过按钮，若中间有
setTimeout、Promise.then或 await，也会断开信任链
如何安全地在 submit 时触发一次提示音
核心思路：在用户点击按钮的那一刻就加载并播放音频（哪怕只是 1ms 的静音片段），建立媒体播放上下文；之后在校验逻辑中复用同一个 Audio 实例。
- 提前创建并缓存实例：
const alertSound = new Audio('/alert.mp3');，放在全局或模块顶层 - 在表单
submit事件处理器最开头同步调用：alertSound.play().catch(e => console.warn('音效未启用:', e)); - 此时播放可能静音（比如用户还没点），但不会报错；关键是建立了播放上下文
- 后续在 JS 校验失败时，直接调用
alertSound.currentTime = 0; alertSound.play();即可稳定发声 - 注意：MP3 文件要小（建议 ≤80KB），避免加载延迟；WAV 延迟更低但体积大，不推荐
如何绑定到 Bootstrap 的 is-invalid 状态变化
Bootstrap 不触发自定义事件通知状态变更，所以不能监听 “类名变化”。必须把音效逻辑嵌入你自己的校验调用链中 —— 比如点击“下一步”或“提交”时的手动校验函数里。
- 不要监听
input.classList.contains('is-invalid')的轮询或 MutationObserver，开销大且不准 - 应在你调用
input.checkValidity()并确认失败后，立即执行音效：if (!valid) { playAlertSound(); input.focus(); } - 如果用了
setCustomValidity()，就在同一位置触发音效，而非等invalid事件 —— 后者不可靠且可能被阻止 - 移动端慎用：部分 Android WebView 和微信内置浏览器对音频支持极差，建议加开关配置项默认关闭
音效不是装饰，是辅助功能的一部分；但浏览器策略让它成了一个需要精确控制执行时机的底层操作。最容易忽略的是：第一次播放必须“紧贴用户手势”，中间不能有任何异步分隔 —— 这个限制比 CSS 动画或 class 切换严格得多。
