黑客灵魂

这个屌丝很懒，什么也没留下！

热门标签

HTML5 音频 Audio 标签详解_h5 audio标签

作者：黑客灵魂 | 2024-07-25 05:25:13

踩

h5 audio标签

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

一、基础用法

1. 基本结构

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

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

在这个示例中，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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

二、属性详解

1. `src`

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

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

2. `controls`

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

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

3. `autoplay`

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

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

4. `loop`

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

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

5. `muted`

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

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

6. `preload`

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

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

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

7. `crossorigin`

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

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

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

三、支持多种音频格式

由于不同浏览器对音频格式的支持不同，通常需要提供多种格式的音频文件，以确保兼容性。可以使用多个 <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>
1
2
3
4
5

示例代码

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

四、使用 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

在这个示例中，我们通过 JavaScript 控制音频的播放、暂停和停止。audio.pause() 方法用于暂停音频，audio.currentTime = 0 将播放位置重置到开始。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/黑客灵魂/article/detail/878582

HTML5 音频 Audio 标签详解_h5 audio标签

一、基础用法

1. 基本结构

2. 示例代码

二、属性详解

1. src

2. controls

3. autoplay

4. loop

5. muted

6. preload

7. crossorigin

三、支持多种音频格式

示例代码

四、使用 JavaScript 控制音频

1. 常用属性

2. 常用方法

示例代码

1. `src`

2. `controls`

3. `autoplay`

4. `loop`

5. `muted`

6. `preload`

7. `crossorigin`