在网页开发中，<audio> 元素用于在网页中嵌入音频内容。通过使用 <audio> 元素，我们可以很容易地向网页添加音频文件，并且可以使用 controls 属性来添加音频播放器控件，使用户能够控制音频的播放。
语法
<audio controls> <source src="audio.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio>
在上面的示例中，我们使用了 <audio> 元素并添加了 controls 属性。在 <audio> 元素内部，我们还可以使用 <source> 元素指定多个音频源文件以便在不同浏览器上兼容不同的音频格式。
控件说明
当我们在 <audio> 元素上添加 controls 属性时，浏览器会自动为我们生成一个音频播放器控件，其中包含以下按钮和功能：
- 播放/暂停按钮：用于开始或暂停音频的播放。
- 音量控制：用于调整音频的音量大小。
- 进度条：显示音频的播放进度，并允许用户拖动进度条到指定位置播放音频。
- 静音按钮：用于将音频静音或取消静音。
- 全屏按钮：用于将播放器切换到全屏模式。
示例代码
下面是一个包含音频播放器控件的示例代码：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio Player</title>
</head>
<body>
<h1>My Audio Player</h1>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</body>
</html>在上面的示例中，我们创建了一个简单的音频播放器，用户可以通过控件来播放音频文件。
自定义样式
虽然浏览器会为我们生成默认的音频播放器控件，但我们也可以通过自定义样式来美化播放器，以使其与网页设计风格更加一致。我们可以使用 CSS 样式来修改播放器的外观，包括控件的大小、颜色、布局等。
下面是一个简单的示例代码，用于自定义音频播放器的样式：
// www.javascriptcn.com code example
audio {
width: 100%;
background-color: #f1f1f1;
border-radius: 5px;
padding: 10px;
}
audio::-webkit-media-controls-panel {
background-color: #333;
color: #fff;
border-radius: 5px;
}
audio::-webkit-media-controls-play-button {
background-color: #fff;
color: #333;
}在上面的示例中，我们使用 CSS 来设置音频播放器的宽度、背景颜色、边框圆角等样式，以及修改播放按钮和控件面板的颜色。
通过学习和使用 HTML <audio> 元素的 controls 属性，我们可以轻松地在网页中添加音频内容，并为用户提供一个可交互的音频播放器，提升用户体验。