HTML | DOM 音频控件属性介绍

HTML 5 中的音频控件可以让你方便地在网页上播放音频。除了基本的播放、暂停、音量调整等功能，它还提供了许多属性和事件来支持更丰富的音频播放体验。以下是一些常用的音频控件属性：

属性

autoplay

这个属性用来控制音频是否在页面加载时自动播放。如果指定了这个属性，那么音频会在页面加载完成后自动播放。例如：

<audio src="music.mp3" autoplay></audio>

controls

这个属性用来控制是否显示音频控件的默认控制面板。如果指定了这个属性，那么会显示默认的控制面板，这个面板包括播放、暂停、音量调整、快进、后退等功能。例如：

<audio src="music.mp3" controls></audio>

loop

这个属性用来控制音频是否循环播放。如果指定了这个属性，那么音频会在播放结束后立即重新开始播放。例如：

<audio src="music.mp3" loop></audio>

preload

这个属性用来控制音频是否应该在页面加载时预加载。如果指定了这个属性，那么音频会在页面加载时预加载，这意味着用户在播放时不需要等待音频下载。例如：

<audio src="music.mp3" preload="auto"></audio>

preload 属性有三个值：

• auto：浏览器会尽可能提前加载整个音频。
• metadata：浏览器仅加载音频的元数据（如时长）。
• none：浏览器不会预加载音频，也不会缓存音频。

src

这个属性用来指定要播放的音频文件的 URL。例如：

<audio src="music.mp3"></audio>

事件

音频控件也提供了一些事件来实现更复杂的交互。以下是一些常用的事件：

play

当音频开始播放时触发。例如：

<audio src="music.mp3" onplay="console.log('开始播放')"></audio>

pause

当音频暂停时触发。例如：

<audio src="music.mp3" onpause="console.log('暂停播放')"></audio>

ended

当音频播放结束时触发。例如：

<audio src="music.mp3" onended="console.log('播放结束')"></audio>

timeupdate

当音频播放的时间更新时触发。例如：

<audio src="music.mp3" ontimeupdate="console.log('播放时间更新')"></audio>

timeupdate 事件会在音频播放时一直触发，可以通过 currentTime 属性获取当前播放时间。例如：

<audio src="music.mp3" ontimeupdate="console.log(this.currentTime)"></audio>

参考链接

• HTML5 音频/视频
• HTMLMediaElement API