html的标签无法直接实现闹铃式循环播放，需结合javascript控制：通过用户交互触发播放，监听ended事件重置currenttime并再次play()，配合定时器实现指定时间响起，同时注意浏览器自动播放策略限制。
HTML 的 <audio></audio> 标签本身不能直接实现“闹铃式”的循环播放（即从指定时间点开始、持续重复、直到用户主动停止），但它可以配合 JavaScript 实现接近闹铃行为的音频循环播放。关键在于：自动播放 + 循环控制 + 可手动停止，且需满足浏览器的自动播放策略（如需用户交互后才可播放）。
基础循环播放：loop 属性
最简单的方式是使用 loop 属性，让音频自然循环：
<audio id="alarm" src="alarm.mp3" loop></audio>
但注意：仅设 loop 不会自动播放，必须配合 autoplay 或 JS 触发播放。现代浏览器普遍禁止无声或无用户交互时的自动播放，所以通常需先有点击等操作才能启动音频。
触发播放 + 强制循环（推荐方案）
用 JavaScript 控制播放，并监听 ended 事件重置播放位置，确保无缝循环（尤其适用于短闹铃音效）：
- 调用
.play()启动音频（需在用户交互如按钮点击后执行） - 监听
ended事件，立即设置currentTime = 0并再次play() - 避免依赖原生
loop，因某些浏览器在 JS 控制下更稳定
示例代码：
<button id="startAlarm">开启闹铃</button><br><button id="stopAlarm" disabled>停止闹铃</button><br><audio id="alarmSound" src="alarm.mp3"></audio><br><br><script><br> const audio = document.getElementById('alarmSound');<br> const startBtn = document.getElementById('startAlarm');<br> const stopBtn = document.getElementById('stopAlarm');<br><br> startBtn.addEventListener('click', () => {<br> audio.currentTime = 0;<br> audio.play().catch(e => console.warn('播放被阻止，请确保用户已交互:', e));<br> startBtn.disabled = true;<br> stopBtn.disabled = false;<br> });<br><br> stopBtn.addEventListener('click', () => {<br> audio.pause();<br> audio.currentTime = 0;<br> startBtn.disabled = false;<br> stopBtn.disabled = true;<br> });<br><br> audio.addEventListener('ended', () => {<br> audio.currentTime = 0;<br> audio.play();<br> });<br></script>
模拟“闹铃提醒”逻辑（定时 + 播放）
真正闹铃还需结合定时器（如 setTimeout 或 setInterval）在指定时刻触发音频。例如：30秒后响起并循环：
- 用
setTimeout延迟首次播放 - 播放后靠
ended事件维持循环，而非用setInterval反复调用play()（易出错、不流畅） - 建议添加音量控制（
audio.volume = 1）确保声音足够
补充一句：移动端 Safari 对自动播放限制更严，务必测试真机表现；部分安卓浏览器也要求音频有用户手势上下文。
增强可用性的小技巧
让闹铃更实用：
- 加载时预解码：给
<audio></audio>加preload="auto"，减少首次播放延迟 - 静音兼容：若用户设备静音，可 fallback 提示文字或震动（
navigator.vibrate） - 避免干扰：循环中可加计数器，播放满 5 次后自动暂停，防止无限打扰
- 格式兼容：提供
.mp3和.ogg多源，提升跨浏览器支持
不复杂但容易忽略——核心是“用户交互解锁播放权”+“ended 事件精准续播”，其余都是优化细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
