不需要。controls 属性仅控制浏览器自带控件显示，js 控制能力取决于元数据是否加载完成；需监听 canplay 或 loadedmetadata 事件，或在用户交互中调用 play()，并捕获其 promise 拒绝。
audio 元素必须有 controls 属性才能被 JS 正确控制吗？
不需要。controls 只是显示浏览器自带的播放控件，和 JS 控制能力无关。真正影响 JS 操作的是元素是否已加载元数据（比如时长、是否可播放）。常见错误是：页面一加载就调用 play()，但此时音频还没准备好，会直接抛出 DOMException: The element has no supported sources 或静默失败。
正确做法是监听 canplay 或 loadedmetadata 事件再操作，或者把播放逻辑放在用户交互回调里（如按钮点击），这样能绕过多数浏览器的自动播放策略限制。
-
canplay表示至少有一帧可播放，适合立即播放 -
loadedmetadata表示时长、尺寸等元信息已加载，适合做进度条初始化 - 若音频来自跨域资源，需确保服务端返回
Access-Control-Allow-Origin，否则duration为NaN，play()可能失败
如何用 JS 实现播放/暂停切换？
核心是检查 audio.paused 布尔值，而不是记录状态变量。浏览器可能在后台暂停音频（如标签页失焦、系统节电），靠外部变量容易不同步。
const audio = document.querySelector('audio');
function togglePlay() {
if (audio.paused) {
audio.play().catch(e => console.warn('Playback prevented:', e));
} else {
audio.pause();
}
}
注意：play() 返回 Promise，失败时会 reject，必须用 .catch() 捕获，否则报错且不中断后续逻辑。常见拒绝原因包括：非用户手势触发、音频未加载完成、浏览器策略拦截。
为什么 audio.currentTime = 0; audio.play() 有时不从头播放？
因为 currentTime 设为 0 后，音频未必立刻跳转到位——尤其在 HTTP 流式加载或网络延迟时，play() 可能基于旧位置开始播。更稳妥的方式是监听 seeked 事件：
function playFromStart() {
audio.currentTime = 0;
audio.addEventListener('seeked', function onSeeked() {
audio.play().catch(e => console.error(e));
audio.removeEventListener('seeked', onSeeked);
}, { once: true });
}
-
seeked表示跳转已完成，此时调用play()更可靠 -
{ once: true }避免重复绑定，也防止多次触发 - 如果音频是
preload="none"，首次设置currentTime可能触发网络请求，seeked会延后
移动端 iOS Safari 上 play() 为何总失败？
iOS Safari 要求所有音频播放必须由用户真实手势（tap/click）直接触发，且不能包裹在异步回调（如 setTimeout、fetch.then）里。哪怕只是 button.onclick = () => setTimeout(() => audio.play(), 10) 也会失败。
解决路径只有一条：播放操作必须是事件处理函数的**同步第一层语句**。
document.getElementById('playBtn').addEventListener('click', () => {
// ✅ 正确：play() 是 click 回调中第一个同步调用
audio.play();
// ❌ 错误：包在 setTimeout / Promise / 函数调用里都会被拒
// setTimeout(() => audio.play(), 0);
// fetch('/sound.mp3').then(() => audio.play());
});
另外，iOS 对 autoplay 完全禁用，即使写了 autoplay 属性也无效；且 muted 属性对音频元素无意义（那是 video 用的）。
最易被忽略的一点：iOS 上音频元素首次播放后，后续 play() 才可能脱离用户手势限制——所以首次触发务必设计成显式点击操作，别指望 onload 自动播。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
