代码如下:
<figure class="wp-block-audio">
<audio controls src="https://lianjie.qinghui888.cn/%E8%83%8C%E6%99%AF%E9%9F%B3%E4%B9%90/shicibeijing.MP3" autoplay loop>
</audio>
</figure>
关键说明:
1. autoplay 属性的作用:
这是 HTML5 标准中 <audio> 标签的原生属性,添加后音频会在页面加载完成后自动开始播放,无需用户手动点击 “播放” 按钮。
2. 与 controls 属性的兼容性:
原代码中的 controls 属性用于显示音频的控制栏(播放 / 暂停、进度条、音量等),autoplay 与 controls 可同时存在,不冲突(用户仍可通过控制栏手动控制播放状态)。
3. 浏览器自动播放策略注意:
部分现代浏览器(如 Chrome、Safari)为了提升用户体验,会对 “自动播放” 做限制(例如要求页面有用户交互后才允许自动播放)。如果添加 autoplay 后仍不生效,可尝试补充 muted 属性(静音自动播放,用户可手动开声),代码如下:
4. loop 属性的作用:
该属性是 <audio> 标签的标准属性,添加后音频会在播放完毕后自动重新开始播放,实现无限循环效果,无需用户手动再次点击 “播放”。
5. 属性兼容性:
loop 可与原代码中的 controls(显示控制栏)、autoplay(自动播放)同时存在,三者互不冲突,用户仍能通过控制栏手动暂停、调整进度或关闭循环(部分浏览器的音频控制栏会自带 “循环” 开关,开启后与代码中的 loop 效果一致)。
6. 特殊场景补充:
若希望音频循环时 “无缝衔接”(减少播放结束到重新开始的间隙),仅靠 loop 属性可能无法完全消除间隙(受音频文件本身编码和浏览器解析影响),此时需确保音频文件本身是 “无缝剪辑” 的(可通过音频编辑工具预处理,如 Audacity),再配合 loop 属性使用。









