每天总结一个html标签——Audio音频标签

发布于：2025-06-05 ⋅ 阅读:(18) ⋅ 点赞:(0)

Audio标签

文章目录

一、audio标签的定义与介绍

1. 定义介绍

<audio> 标签是 HTML5 中的一个新元素，它允许开发者直接在 HTML 文档中嵌入音频文件，用户无需安装额外的插件即可播放音频。这一特性大大提升了用户体验，同时也简化了开发者的工作流程。通过 <audio> 标签，我们可以轻松地控制音频的播放、暂停、音量等功能，并且可以支持多种音频格式。

2. 语法

<audio> 标签的基本语法非常简单，以下是一个最基本的示例：

<audio src="sample-15s.mp3" controls></audio>

在这个示例中，src 属性指定了音频文件的路径，这里的 sample-15s.mp3 是音频文件的名称。controls 属性是一个布尔属性，当添加该属性时，浏览器会显示一个默认的音频控制界面，用户可以通过这个界面来控制音频的播放、暂停、音量等操作。

除了基本的 src 和 controls 属性外，<audio> 标签还支持多个其他属性，例如 autoplay、loop、muted 等。下面是一个包含多个属性的示例：

<audio src="sample-15s.mp3" controls autoplay loop muted></audio>

在这个示例中，autoplay 属性表示音频会在页面加载完成后自动播放；loop 属性表示音频会循环播放；muted 属性表示音频会静音播放。

3. 支持的格式

不同的浏览器对音频格式的支持情况有所不同。为了确保音频能够在大多数浏览器中正常播放，我们通常需要提供多种格式的音频文件。<audio> 标签支持的常见音频格式有 MP3、WAV 和 Ogg。

  • MP3：这是一种广泛使用的音频压缩格式，具有较高的压缩比和较好的音质，几乎所有的浏览器都支持 MP3 格式。
  • WAV：这是一种无损音频格式，音质非常好，但文件体积较大，主要用于专业音频处理和一些对音质要求较高的场景。
  • Ogg：这是一种开放的音频压缩格式，具有较好的压缩比和音质，并且在一些开源浏览器中得到了广泛的支持。

为了兼容不同的浏览器，我们可以在 <audio> 标签中使用多个 <source> 标签来指定不同格式的音频文件，示例如下：

<audio controls>
  <source src="sample-15s.mp3" type="audio/mpeg">
  <source src="sample-15s.ogg" type="audio/ogg">
  <source src="sample-15s.wav" type="audio/wav">
  您的浏览器不支持音频播放。
</audio>

在这个示例中，浏览器会按照 <source> 标签的顺序依次尝试加载音频文件，如果第一个文件无法加载，则会尝试加载第二个文件，以此类推。如果所有的文件都无法加载，则会显示 <audio> 标签内的文本信息。

4.文本提示

在 <audio> 标签中，我们可以添加一些文本提示信息，当浏览器不支持音频播放时，这些信息会显示给用户。例如：

<audio controls>
  <source src="sample-15s.mp3" type="audio/mpeg">
  您的浏览器不支持音频播放，请升级您的浏览器或安装相关插件。
</audio>

这样，当用户使用的浏览器不支持音频播放时，就会看到相应的提示信息。

二、audio标签的HTML属性

1. autoplay

autoplay 是一个布尔属性，当添加该属性时，音频会在页面加载完成后自动播放。需要注意的是，由于用户体验和流量消耗的问题，一些浏览器会对自动播放功能进行限制，例如 Chrome 浏览器会在用户与页面进行交互之前禁止自动播放音频和视频。示例如下：

<audio src="sample-15s.mp3" autoplay></audio>

2. loop

loop 也是一个布尔属性，当添加该属性时，音频会在播放结束后自动重新开始播放，实现循环播放的效果。示例如下：

<audio src="sample-15s.mp3" loop></audio>

3. muted

muted 属性用于将音频静音。当添加该属性时，音频会在播放时静音，但用户仍然可以通过控制界面调整音量。示例如下：

<audio src="sample-15s.mp3" muted></audio>

4. preload

preload 属性用于控制浏览器如何预加载音频文件。它有三个可选值：

  • none：表示浏览器不会预加载音频文件。
  • metadata：表示浏览器会预加载音频的元数据，如音频的时长、比特率等。
  • auto：表示浏览器会尽可能地预加载整个音频文件。
    示例如下：
<audio src="sample-15s.mp3" preload="metadata"></audio>

三、audio标签的常用DOM属性

DOM 属性 解释
currentTime 获取或设置音频的当前播放位置（以秒为单位）。
duration 获取音频的总时长（以秒为单位），如果音频不可用则返回 NaN。
paused 返回一个布尔值，表示音频是否处于暂停状态。
ended 返回一个布尔值，表示音频是否已经播放结束。
muted 获取或设置音频是否静音。
volume 获取或设置音频的音量，取值范围从 0.0（静音）到 1.0（最大音量）。
playbackRate 获取或设置音频的播放速度，1.0 为正常速度。
buffered 返回一个 TimeRanges 对象，包含音频已缓冲的时间范围。
seeking 返回一个布尔值，表示浏览器是否正在尝试跳转到新的播放位置。

四、audio标签的常用事件

完整事件请参考：

事件名称 触发条件 用途示例
canplay 音频文件可以播放时 可在此时执行一些初始化操作，如显示播放按钮等
play 音频开始播放时 可用于记录播放开始时间、更新播放状态等
pause 音频暂停时 可用于暂停相关的业务逻辑，如暂停动画等
ended 音频播放结束时 可用于实现自动播放下一首音频等功能
timeupdate 音频的播放位置发生变化时 可用于显示当前播放时间、更新进度条等

四、默认样式

浏览器会为 <audio> 标签提供一个默认的控制界面，这个界面的样式会因浏览器的不同而有所差异。默认的控制界面通常包含播放/暂停按钮、进度条、音量控制等元素。

  • 默认控制界面的display是inline
  • 可以设置宽高，边框等。
  • 不能设置音频播放器中的单个组件（如改变按钮大小、改变图标或字体等）
    在这里插入图片描述

五、自定义样式

要自定义 <audio> 标签的样式，我们可以通过 JavaScript 来创建自定义的控制界面，并使用 CSS 来对其进行样式设计。以下是一个简单的示例：

1. 示例

音频样式示例

2. 代码

<style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f9;
        }
        .audio-container {
            width: 600px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 25px;
            border-radius: 15px;
            display: flex;
            align-items: center;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }
        .control {
            width: 350px;
            height: 120px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }
        .btn-container {
            display: flex;
            align-items: center;
        }
        .play-pause-btn, .nav-btn {
            width: 45px;
            height: 45px;
            background-color: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            color: white;
            cursor: pointer;
            margin: 0 8px;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }
        .play-pause-btn:hover, .nav-btn:hover {
            background-color: rgba(255, 255, 255, 0.2);
            transform: scale(1.05);
        }
        .progress-bar {
            width: 300px;
            height: 6px;
            background-color: rgba(255, 255, 255, 0.3);
            margin: 0 10px;
            border-radius: 3px;
        }
        .progress {
            height: 100%;
            background-color: white;
            width: 0%;
            border-radius: 3px;
            transition: width 0.1s linear;
        }
        .time-display, .cover {
            color: white;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .time-display {
            margin: 0 10px;
            font-size: 14px;
        }
        .cover {
            width: 150px;
            height: 150px;
            background-color: rgba(255, 255, 255, 0.1);
            margin-left: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            border: 2px solid rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(10px);
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div class="audio-container">
        <div class="control">
            <div class="btn-container">
                <button class="nav-btn" id="prevBtn">◀◀</button>
                <button class="play-pause-btn" id="playPauseBtn">▶</button>
                <button class="nav-btn" id="nextBtn">▶▶</button>
            </div>
            <div class="progress-bar">
                <div class="progress" id="progress"></div>
                <div class="time-display" id="timeDisplay">00:00 / 00:00</div>
            </div>

        </div>
        <div class="cover">歌曲封面</div>
    </div>
    <audio id="myAudio" src="sample-15s.mp3"></audio>
    <script>
        const audio = document.getElementById('myAudio');
        const playPauseBtn = document.getElementById('playPauseBtn');
        const progress = document.getElementById('progress');
        const timeDisplay = document.getElementById('timeDisplay');

        const formatTime = (seconds) => {
            const minutes = Math.floor(seconds / 60);
            seconds = Math.floor(seconds % 60);
            return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
        };

        audio.addEventListener('loadedmetadata', function () {
            timeDisplay.textContent = `00:00 / ${formatTime(audio.duration)}`;
        });

        playPauseBtn.addEventListener('click', function () {
            if (audio.paused) {
                audio.play();
                playPauseBtn.textContent = '⏸';
            } else {
                audio.pause();
                playPauseBtn.textContent = '▶';
            }
        });

        audio.addEventListener('timeupdate', function () {
            const progressPercent = (audio.currentTime / audio.duration) * 100;
            progress.style.width = `${progressPercent}%`;
            timeDisplay.textContent = `${formatTime(audio.currentTime)} / ${formatTime(audio.duration)}`;
        });
    </script>
</body>

在这个示例中，我们创建了一个自定义的音频控制界面，包括播放/暂停按钮和进度条。通过 JavaScript 监听音频的事件，我们可以实现对音频的控制，并更新进度条的状态。

六、播放 m3u8音频

M3U8 是一种基于 HTTP Live Streaming (HLS) 协议的音频和视频播放列表文件格式，常用于在线流媒体播放。要在网页中播放 M3U8 文件，我们可以使用一些第三方库，如 hls.js。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>播放 M3U8 文件</title>
</head>
<body>
  <audio id="myAudio" controls></audio>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script>
    const audio = document.getElementById('myAudio');
    if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource('your-m3u8-file.m3u8');
      hls.attachMedia(audio);
      hls.on(Hls.Events.MANIFEST_PARSED, function() {
        audio.play();
      });
    } 
  </script>
</body>
</html>

在这个示例中，我们引入了 hls.js 库，并使用它来加载和播放 M3U8 文件。如果浏览器支持 HLS 协议，我们会使用 hls.js 来处理；

七、其他用于播放音频的外部库

例如：plyr.js、howler.js、wavesurfer.js 等。这些库提供了更多的功能和自定义选项，使音频播放更加灵活和方便。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布