不能。单个<audio>标签不支持自动顺序播放，需用JavaScript监听ended事件并手动切换src和调用play()，且须处理移动端自动播放限制及编码兼容性问题。
用 <audio> 标签加 preload 和 autoplay 能不能顺序播放？
不能。单个 <audio> 标签本身不支持“播放完自动切下一首”，autoplay 只控制是否自动开始，preload 只影响资源预加载策略，和播放逻辑无关。浏览器不会主动监听 ended 事件并切换文件——这必须手动写 JS。
常见错误现象是：放完一首就停住，页面没反应；或者多个 <audio> 同时加载、互相干扰；又或者在移动端因自动播放策略被静音拦截，点一次只播半秒就暂停。
- 移动端 Chrome / Safari 默认禁止无用户手势触发的音频自动播放（包括
autoplay），必须由用户点击等交互后才能调用play() -
loop是循环当前音频，不是循环列表，别误用 - 不要把多段音频塞进一个
<source>里——<source>是格式回退用的（如 mp3/wav/webm），不是播放队列
怎么用 JavaScript 实现真正顺序播放？
核心是监听当前 <audio> 的 ended 事件，然后更新 src 并调用 play()。但要注意：不能在 ended 回调里直接 audio.src = nextUrl; audio.play();，因为部分浏览器（尤其是 iOS Safari）要求 play() 必须由用户手势触发，否则会抛出 NotAllowedError。
实操建议：
- 预先加载所有音频 URL 到数组，比如
const playlist = ['song1.mp3', 'song2.mp3', 'song3.mp3']; - 用一个索引变量
let currentIndex = 0;记录当前播放项 - 首次播放必须由用户点击按钮触发（例如
<button onclick="playCurrent()">播放</button>），确保获得播放权限 - 在
ended事件中只做两件事：更新索引、设置新src；play()放在用户交互上下文里不安全，改用audio.load()+ 下次用户点击再播，或利用 iOS 允许的“连续播放”特性（见下一条）
const audio = document.getElementById('player');
const playlist = ['a.mp3', 'b.mp3', 'c.mp3'];
let index = 0;
function playCurrent() {
audio.src = playlist[index];
return audio.play().catch(e => console.warn('play failed:', e));
}
audio.addEventListener('ended', () => {
index = (index + 1) % playlist.length;
// 不在这里调 play()，避免跨上下文被拒
});
iOS Safari 顺序播放的特殊处理
iOS Safari 对自动播放限制最严：即使用户点过一次，后续 play() 若间隔超过几秒、或不在同一用户手势链内，仍可能失败。解决方案不是绕过限制，而是接受它，并设计容错流程。
关键点：
- 首次播放成功后，iOS 允许在短时间内（约 1–2 秒）连续调用
play()，所以可在ended后立刻play()，但要加try/catch容错 - 如果
play()失败，显示提示让用户再点一下“继续播放”按钮，而不是静默卡住 - 避免使用
audio.src = url; audio.play();分两步——应改为audio.src = url; audio.load();，等下次用户触发再play() - 不要依赖
canplaythrough事件来自动播放，它不解决权限问题
要不要用第三方库？
简单顺序播放没必要。原生 Audio API + 几十行 JS 就够用。引入 howler.js 或 plyr 等库反而增加包体积、引入额外兼容性问题（比如 howler 默认启用 Web Audio，某些老安卓 WebView 不支持）。
真正容易被忽略的是：音频文件编码一致性。混用采样率、比特率、容器格式（mp3 vs m4a）可能导致某首在某些设备上 canplay 不触发，或 duration 为 NaN，进而让顺序逻辑错乱。上线前务必在真机（尤其 iPhone）上逐首测试。
立即学习“前端免费学习笔记（深入）”；
