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

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

完整事件请参考：

• 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>

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

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

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