如何在 HTML 中添加音频

HTML 中可以通过 <audio> 标签来添加音频，例如：

<audio src="audio.mp3" controls></audio>

上述代码中的 src 属性用于指定音频文件的路径，controls 属性用于显示音频控件，包括播放/暂停按钮、音量调节、进度条等。

接下来，我们将详细介绍如何在 HTML 中添加音频。

基本用法

最简单的方法是使用 <audio> 标签，并设置 src 和 controls 属性：

<audio src="audio.mp3" controls></audio>

这段代码将在页面中显示一个具有播放、暂停、音量和进度控制的音频播放器。

添加多个音频

要在同一个网页上添加多个音频文件，可以为每个音频文件创建一个 <audio> 标签：

<audio src="audio1.mp3" controls></audio>
<audio src="audio2.mp3" controls></audio>
<audio src="audio3.mp3" controls></audio>

自动播放音频

要设置音频文件自动播放，可以添加 autoplay 属性：

<audio src="audio.mp3" controls autoplay></audio>

需要注意的是，在一些浏览器中，自动播放音频可能会被禁用，用户必须点击播放按钮才能播放音频。

循环播放音频

要设置音频文件循环播放，可以添加 loop 属性：

<audio src="audio.mp3" controls loop></audio>

预加载音频

要在页面加载时预加载音频文件，可以添加 preload 属性：

<audio src="audio.mp3" preload="auto" controls></audio>

preload 属性有三个可选值：

• none：不预加载音频文件。
• metadata：仅加载音频文件的元数据（如时长和音频格式）。
• auto：预加载整个音频文件（包括音频数据）。

显示音频控件

要在页面中显示音频控件，可以添加 controls 属性：

<audio src="audio.mp3" controls></audio>

隐藏音频控件

要隐藏音频控件，可以使用 CSS：

<audio src="audio.mp3" controls style="display:none;"></audio>

自定义音频控件

可以使用 CSS 和 JavaScript 自定义音频控件的外观和行为。为 <audio> 标签添加 id 属性，并使用 JavaScript 代码获取该元素：

<audio id="myAudio" src="audio.mp3"></audio>

<script>
var audio = document.getElementById("myAudio");
</script>

然后，可以使用 JavaScript 来控制音频的播放、暂停等操作：

<button onclick="audio.play()">播放</button>
<button onclick="audio.pause()">暂停</button>
<button onclick="audio.currentTime += 5">快进 5 秒</button>

进一步的控制需要使用 JavaScript 和 Web Audio API 来实现。