每天总结一个html标签—

Audio标签

文章目录

Audio标签
- 一、audio标签的定义与介绍
- - 1. 定义介绍
  - 2. 语法
  - 3. 支持的格式
  - 4.文本提示
- 二、audio标签的HTML属性
- - 1. autoplay
  - 2. loop
  - 3. muted
  - 4. preload
- 三、audio标签的常用DOM属性
- 四、audio标签的常用事件
- 四、默认样式
- 五、自定义样式
- - 1. 示例
  - 2. 代码
- 六、播放 m3u8音频
- 七、其他用于播放音频的外部库

一、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标签的常用事件

完整事件请参考：

MDN-https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement
菜鸟教程-https://www.runoob.com/tags/ref-av-dom.html

事件名称	触发条件	用途示例
`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>