JavaScript中没有全局play函数，必须通过HTMLMediaElement.play()操作audio/video元素，且需用户手势触发并处理Promise失败。
Play 没有内置 play 函数——你可能在找 HTMLMediaElement.play()
直接说结论：JavaScript 里没有叫 play 的全局函数能“创建播放器”。所谓“用 play 创建播放器”，本质是操作 或 元素的原生 API。浏览器不会让你随便调用 play() 就响，尤其在移动端或用户未交互后，会静音拦截。
常见错误现象：Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
- 必须由用户手势（如
click、touchstart）触发play()，不能在页面加载完自动调 -
play()返回 Promise，失败时需.catch()处理，否则报错不提示 - 部分安卓 WebView 或 iOS Safari 对
autoplay+muted也有额外限制，别迷信autoplay muted一定成功
自定义控件怎么绑定到
核心逻辑：监听自定义按钮事件 → 调用对应媒体元素方法 → 同步更新 UI 状态（比如播放/暂停图标）。
关键点不是“怎么画按钮”，而是“怎么让按钮和 audio 实时联动”：
- 用
audio.addEventListener('play', ...)和audio.addEventListener('pause', ...)响应状态变化，别只靠按钮点击单向控制 - 暂停时调
audio.pause()，但别忘了手动改按钮文字或 class；同理，播放中audio.paused是false，可据此更新 UI - 进度条拖动要结合
audio.currentTime和audio.duration，注意duration初始为NaN，得等loadedmetadata事件后再读
示例（简化版）：
const audio = document.querySelector('audio');
const playBtn = document.querySelector('#play-btn');
playBtn.addEventListener('click', () => {
if (audio.paused) {
audio.play().catch(e => console.warn('play failed:', e));
} else {
audio.pause();
}
});
audio.addEventListener('play', () => {
playBtn.textContent = '⏸';
});
audio.addEventListener('pause', () => {
playBtn.textContent = '▶';
});
controls 属性关了，但音量/倍速/下载这些功能怎么补
禁用原生控件（controls="false"）后，所有功能都得自己实现。但不是每个都值得做：
-
volume：可读写audio.volume（0–1），但 iOS Safari 不允许 JS 控制音量，只能靠系统物理键；设了也无效，别白费劲 -
playbackRate：支持audio.playbackRate = 1.5，但部分老 Android 不识别，且ratechange事件兼容性差，建议加个 fallback 显示当前值 - 下载按钮：只需
⬇，但注意跨域资源会触发下载失败（download属性对跨域链接无效） - 全屏（
不支持全屏）：别折腾，浏览器根本不给requestFullscreen()权限，只有可以
为什么自定义控件在微信里点不动
微信内置浏览器（X5 内核）对 audio 的策略比标准 Chrome 更严：即使用户点了按钮，首次 play() 仍可能被拦截，尤其音频未预加载或格式非 MP3。
- 必须在用户手势回调内立即调
play()，中间不能有await、setTimeout或网络请求 - MP3 格式兼容性最好，避免用
.ogg或未转码的.wav - 加一句
audio.load()在play()前，强制触发加载流程，有时能绕过 X5 的懒加载判断 - 真不行就降级：检测到微信环境，直接显示“请点击右上角 ··· → 在浏览器中打开”提示
这事没银弹。用户交互路径、音频加载时机、微信版本、iOS 系统版本，任意一个变量变了，行为都可能不同。最稳的做法，是把“播放失败”当成常态来处理，而不是当成异常。
