在HTML和CSS中添加音乐的方法有很多种，其中最常见的是使用<audio>标签，本文将详细介绍如何在网页中嵌入音乐，以及如何使用CSS对其进行样式设计。
我们需要了解<audio>标签的基本用法。<audio>标签是HTML5中新增的元素，用于在网页中嵌入音频内容，其基本语法如下：
<audio controls> <source src="音乐文件地址" type="音频文件类型"> 您的浏览器不支持 audio 元素。 </audio>
controls属性表示音频播放器将显示播放、暂停等控件，以便用户进行操作。<source>标签用于指定音频文件的地址和类型，如MP3、WAV等，如果浏览器不支持<audio>标签，将在其下方显示“您的浏览器不支持 audio 元素。”的提示信息。
接下来，我们可以使用CSS对音频播放器进行样式设计，我们可以设置播放器的宽度、高度、背景颜色等属性，以下是一个简单的示例：
audio {
width: 300px;
height: 30px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
将上述CSS代码添加到网页的<style>标签中，或保存到外部的CSS文件中并通过<link>标签引入，即可实现对音频播放器的样式设计。
我们还可以使用JavaScript为音频播放器添加更多功能，如自动播放、循环播放等，以下是一个使用JavaScript实现自动播放功能的示例：
document.addEventListener('DOMContentLoaded', function() {
var audio = document.querySelector('audio');
audio.play();
});
将上述JavaScript代码添加到网页的<script>标签中，即可在网页加载完成后自动播放音频。
常见问题与解答：
Q1: 如何在网页中添加多个音频文件？
A1: 可以在<audio>标签内添加多个<source>标签，每个<source>标签指定一个音频文件，浏览器将按照<source>标签的顺序尝试加载音频文件，如果当前浏览器不支持某个文件类型，将尝试加载下一个<source>标签指定的文件。
Q2: 如何设置音频文件的默认播放？
A2: 可以在<audio>标签中添加autoplay属性，如下所示：
<audio controls autoplay> <!-- <source> 和其他内容 --> </audio>
Q3: 如何在网页中实现音频的循环播放？
A3: 可以使用JavaScript为音频播放器添加循环播放功能，以下是一个示例：
document.addEventListener('DOMContentLoaded', function() {
var audio = document.querySelector('audio');
audio.addEventListener('ended', function() {
this.currentTime = 0;
this.play();
}, { once: true });
});
这段代码将在音频播放结束时重置当前时间到0，并重新开始播放，实现循环播放效果。