## HTML5 Audio标签基础
html
<audio src="my-audio-file.mp3" controls autoplay loop>
Your browser does not support the audio element.
</audio>
上述代码展示了如何基本使用 `<audio>` 标签。其中：
- `src`: 指定要加载和播放的音轨文件路径。
- `controls`: 属性是一个布尔属性，默认值是false。如果设置此属性，则会在浏览器支持的情况下显示标准媒体控件（如播放/暂停按钮、进度条等）。
- `autoplay`: 如果设置了该属性，在页面加载后会自动开始播放指定的音频。
- `loop`: 当这个属性存在时，音频将在结束后重新从头开始循环播放。
请注意，并非所有格式的音频都能被所有浏览器原生支持。通常建议至少包含MP3与Ogg两种编码类型的源以确保跨浏览器兼容性，可以采用如下形式：
html
<audio preload="auto">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
<!-- Fallback for older browsers without HTML5 audio support -->
Your browser doesn't support this audio format.
</audio>
此外，还有更多可选属性用于控制音频行为，例如volume(调整初始音量)、muted(是否静音)，以及通过JavaScript进行更复杂的交互操作。
## 应用实例
假设我们要创建一个简单的音乐播单页，用户可以选择并播放不同的曲目:
html
<div id="playlist">
<button onclick="play('track1')">Track 1</button>
<button onclick="play('track2')">Track 2</button>
<audio id="player" crossorigin></audio>
<script>
function play(trackSrc){
var player = document.getElementById("player");
// 清除之前的来源列表然后添加新的音频资源
while(player.firstChild){
player.removeChild(player.firstChild);
}
var source = document.createElement('source');
source.src = trackSrc + ".mp3";
source.type= "audio/mp3";
player.appendChild(source);
player.play();
}
</script>
</div>
在这个例子中，当点击不同按钮时调用了 JavaScript 函数 `play()` ，它动态更改了 `<audio>` 元素内的 `<source>` 资源地址从而实现了切换歌曲的功能。
总之，《HTML5》引入的 `<audio>` 标签极大地丰富和完善了 Web 内容的表现力，使得在网络环境下无缝集成声音素材变得简便易行且功能强大，让用户体验更为生动立体化。同时配合其他诸如 CSS 和 JS 的技术手段，能够灵活适应各种实际应用场景的需求。