在个人页面中添加音频可以提升页面的趣味性和交互性，html提供了原生的audio标签来支持音频的嵌入，不需要依赖第三方插件就能实现基础的音频播放功能。
audio标签基础语法
html的<audio>标签是用于嵌入音频内容的核心标签，基础的使用方式如下：
<audio src="music.mp3" controls> 您的浏览器不支持audio标签，无法播放音频 </audio>
上面的代码中，src属性指定音频文件的路径，controls属性会显示浏览器默认的音频控制面板，包含播放、暂停、音量调节等按钮。如果浏览器不支持<audio>标签，就会显示标签内部的提示文本。
audio标签常用属性
除了基础的src和controls属性，<audio>标签还有很多实用的属性，可以根据需求灵活配置：
- autoplay：页面加载完成后自动播放音频，部分浏览器为了用户体验会限制自动播放，需要配合muted属性使用
- loop：音频播放结束后自动循环播放
- muted：默认静音播放音频
- preload：设置音频的预加载策略，可选值有none（不预加载）、metadata（只预加载元数据）、auto（预加载整个音频）
- volume：设置音频的默认音量，取值范围是0到1，0表示静音，1表示最大音量
多格式音频兼容处理
不同浏览器支持的音频格式存在差异，为了保证所有用户都能正常播放音频，可以通过<source>标签提供多种格式的音频文件：
<audio controls> <source src="music.mp3" type="audio/mpeg"> <source src="music.ogg" type="audio/ogg"> <source src="music.wav" type="audio/wav"> 您的浏览器不支持audio标签，无法播放音频 </audio>
浏览器会按照<source>标签的顺序依次尝试加载，找到第一个支持的格式就会停止加载后续的文件，这样可以最大程度兼容不同内核的浏览器。
个人页面音频实战示例
下面是一个个人页面添加背景音乐并隐藏控制面板的示例，适合需要自动播放背景音的场景：
<!-- 自动播放、循环、静音的背景音乐，用户点击页面后取消静音 -->
<audio id="bgMusic" loop muted preload="auto">
<source src="bg_music.mp3" type="audio/mpeg">
</audio>
<script>
// 页面点击事件触发后取消静音，解决浏览器自动播放限制
document.addEventListener('click', function() {
const music = document.getElementById('bgMusic');
if (music.muted) {
music.muted = false;
music.play();
}
});
</script>
如果需要在个人页面中显示自定义的音频控制按钮，也可以通过js调用<audio>标签的API实现，常用的API方法有play()播放音频、pause()暂停音频、volume属性调整音量等。
注意事项
- 音频文件的路径要填写正确，相对路径是相对于当前html文件的位置，绝对路径需要填写完整的文件地址
- 自动播放属性autoplay在很多现代浏览器中会被拦截，建议搭配muted属性使用，或者引导用户手动触发播放
- 尽量不要使用过大的音频文件，避免影响页面的加载速度，个人页面背景音乐建议控制在2MB以内
- 如果音频文件放在ipipp.com的服务器上，需要确保服务器配置了正确的音频文件MIME类型，否则可能出现无法加载的问题