通用属性
- src: 指定音频文件的 URL。
- controls: 显示播放控制项(例如播放、暂停、音量)。
- autoplay: 自动开始播放音频。
- loop: 循环播放音频。
- muted: 将音频静音。
音频控制
- volume: 设置音频音量(0-1)。
- currentTime: 获取或设置当前播放时间。
- duration: 获取音频文件的持续时间。
- paused: 检查音频是否已暂停。
外观属性
- width: 指定音频播放器的宽度。
- height: 指定音频播放器的高度。
- poster: 指定当音频没有播放时显示的图像。
事件属性
- onplay: 当音频开始播放时触发事件。
- onpause: 当音频暂停播放时触发事件。
- onended: 当音频结束播放时触发事件。
- ontimeupdate: 当音频播放时间更新时触发事件。
其他属性
- preload: 指定音频加载方式(none、metadata、auto)。
- crossorigin: 允许跨域加载音频。
- mediagroup: 将多个音频播放器分组到一起,以便仅播放一个。
- playsinline: 在移动设备上内嵌播放音频,而不是全屏播放。
示例
<audio src="song.mp3" controls></audio>
此代码嵌入了一个音频播放器,其中包含播放控制项,当用户单击播放按钮时自动播放音频。
高级用法
HTML5 音频标签还支持高级功能,例如:
- 音轨: 使用
<track>
元素向音频添加字幕或章节标记。 - Web Audio API: 通过 JavaScript 访问和操作音频数据。
- 媒体片段: 使用
<source>
元素为不同浏览器提供多种音频格式。
通过充分利用 HTML 音频标签的属性和值,Web 开发人员可以创建交互式且引人入胜的音频体验,增强用户与网站的互动。