HTML5 音频 Audio 标签详解

最新推荐文章于 2025-03-26 21:22:37 发布

昱晏

最新推荐文章于 2025-03-26 21:22:37 发布

阅读量1.4w

点赞数 47

分类专栏： # HTML5\CSS3 文章标签： html5 音视频前端

本文链接：https://blog.csdn.net/imdeity/article/details/139362361

版权

HTML5\CSS3 专栏收录该内容

24 篇文章

订阅专栏

HTML5 引入了 <audio> 标签，允许开发者在网页中直接嵌入音频文件，而不需要依赖第三方插件。本文将全面介绍 <audio> 标签的各种属性，并通过实例代码详细说明其用法。

一、基础用法

1. 基本结构

HTML5 中使用 <audio> 标签嵌入音频文件，最简单的形式如下：

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

在这个示例中，src 属性指定音频文件的路径，controls 属性使浏览器显示音频控件。

2. 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Audio Example</title>
</head>
<body>
    <h1>HTML5 Audio Example</h1>
    <audio src="audio-file.mp3" controls>
        Your browser does not support the audio element.
    </audio>
</body>
</html>

这段代码将在网页上显示一个音频播放器，如果浏览器不支持 <audio> 标签，将显示替代文本 “Your browser does not support the audio element.”。

二、属性详解

1. `src`

指定音频文件的 URL，可以是相对路径或绝对路径。

<audio src="path/to/your-audio-file.mp3" controls></audio>

2. `controls`

显示音频控件（播放、暂停、音量等）。

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

3. `autoplay`

音频文件在页面加载完成后自动播放。需要注意的是，为了用户体验，很多浏览器默认禁止自动播放，特别是移动设备。

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

4. `loop`

音频文件播放结束后自动重新播放。

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

5. `muted`

初始加载时将音频设置为静音。

<audio src="audio-file.mp3" controls muted></audio>

6. `preload`

提示浏览器在页面加载时如何处理音频文件。可能的值有：

none：不预加载音频文件。
metadata：只预加载音频文件的元数据。
auto：浏览器选择最佳方式预加载音频文件。

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

7. `crossorigin`

控制跨域资源共享 (CORS)，允许你配置是否可以加载跨域资源。

anonymous：不使用凭据。
use-credentials：使用凭据（如 Cookies）。

<audio src="audio-file.mp3" controls crossorigin="anonymous"></audio>

三、支持多种音频格式

由于不同浏览器对音频格式的支持不同，通常需要提供多种格式的音频文件，以确保兼容性。可以使用多个 <source> 标签来定义不同格式的音频文件。

<audio controls>
    <source src="audio-file.mp3" type="audio/mpeg">
    <source src="audio-file.ogg" type="audio/ogg">
    Your browser does not support the audio element.
</audio>

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Audio Example</title>
</head>
<body>
    <h1>HTML5 Audio Example with Multiple Formats</h1>
    <audio controls>
        <source src="audio-file.mp3" type="audio/mpeg">
        <source src="audio-file.ogg" type="audio/ogg">
        Your browser does not support the audio element.
    </audio>
</body>
</html>

四、使用 JavaScript 控制音频

HTML5 提供了丰富的 JavaScript API，可以用来控制音频播放。以下是一些常用的属性和方法：

1. 常用属性

audio.currentTime：获取或设置当前播放时间（秒）。
audio.duration：获取音频总时长（秒）。
audio.paused：返回音频是否暂停。
audio.volume：获取或设置音量（0.0 到 1.0）。

2. 常用方法

audio.play()：播放音频。
audio.pause()：暂停音频。
audio.load()：重新加载音频文件。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Audio Control with JavaScript</title>
</head>
<body>
    <h1>Control HTML5 Audio with JavaScript</h1>
    <audio id="myAudio" src="audio-file.mp3" controls></audio>
    <br>
    <button onclick="playAudio()">Play</button>
    <button onclick="pauseAudio()">Pause</button>
    <button onclick="stopAudio()">Stop</button>

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

        function playAudio() {
            audio.play();
        }

        function pauseAudio() {
            audio.pause();
        }

        function stopAudio() {
            audio.pause();
            audio.currentTime = 0; // Reset playback position to the start
        }
    </script>
</body>
</html>