定义和用法
<audio>是 HTML5 中用于在网页上嵌入音频内容的元素。
<audio>标签可包含一个或多个拥有不同音频源的<source>标签，浏览器将选择它支持的第一个源。
<audio>允许开发者在不需要插件的情况下播放音频文件。
<audio>元素的基本语法：
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>属性解释
controls用于显示音频控件（播放/暂停按钮、音量控制等）。autoplay音频就绪后自动播放。loop音频循环播放。muted默认静音。preload指定音频的预加载方式：auto(自动)、metadata(仅元数据)none(不预加载)。src音频文件的 URL。
使用场景
接下来用多种实例演示<audio>标签的用法，来深化您对<audio>的理解。
1. 自动播放，常用作背景音乐
<h1>音频示例</h1>
<audio controls autoplay>
<source src="/uploads/20250322/audio.mp3" type="audio/mpeg">
您的浏览器不支持音频元素。
</audio>2. 循环播放，在背景音乐中也很常见
<article>
<h1>HTML5新特性</h1>
<p>HTML5引入了许多新元素...</p>
<aside>
<h4>你知道吗？</h4>
<p>HTML5在2014年正式成为W3C推荐标准。</p>
</aside>
</article>3. 多格式支持，这是为了兼容更多浏览器
<audio controls>
<source src="/uploads/20250322/audio.mp3" type="audio/mpeg">
<source src="/uploads/20250322/audio.ogg" type="audio/ogg">
<source src="/uploads/20250322/audio.wav" type="audio/wav">
您的浏览器不支持音频元素。
</audio>4. 自定义控件，通过 JavaScript 来单独控制播放、暂停等行为
<audio id="myAudio">
<source src="audio.mp3" type="audio/mpeg">
您的浏览器不支持音频元素。
</audio>
<button onclick="playAudio()">播放</button>
<button onclick="pauseAudio()">暂停</button>
<script>
var audio = document.getElementById("myAudio");
function playAudio() {
audio.play();
}
function pauseAudio() {
audio.pause();
}
</script>全局属性
<audio>标签还支持 HTML 中的全局属性。
事件属性
<audio>标签还支持 HTML 中的事件属性。
默认的 CSS 设置
无
建议与提醒
- 始终提供多种格式以确保兼容性，MP3 (audio/mpeg)广泛支持，OGG (audio/ogg)开源格式，WAV (audio/wav)无损质量。
- 对于大文件，考虑使用
preload="metadata"或preload="none"。 - 谨慎使用
autoplay，许多浏览器会阻止自动播放。 - 为无法播放音频的用户提供备用内容说明。
浏览器支持
表中的数字注明了首个完全支持该元素的浏览器版本。
 |
 |
 |
 |
 |
| 4.0 | 9.0 | 3.5 | 4.0 | 11.5 |
评论区 0
发表评论
教程介绍
HTML 参考手册涵盖 HTML 元素、属性、事件等详细解析，助您快速检索 HTML 使用方法 。
50
章节
75
阅读
0
评论
反馈提交成功
感谢您的反馈，我们将尽快处理您的反馈