网站导航
> 技术文档 > 每天总结一个html标签——Audio音频标签_audio标签

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

网友: 技术文档 2025-07-30 11:27:11

Audio标签

文章目录

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

一、audio标签的定义与介绍

1. 定义介绍

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

2. 语法

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

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

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

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

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

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

3. 支持的格式

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

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

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

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

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

4.文本提示

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

<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 音频的播放位置发生变化时 可用于显示当前播放时间、更新进度条等

四、默认样式

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

  • 默认控制界面的display是inline
  • 可以设置宽高，边框等。
  • 不能设置音频播放器中的单个组件（如改变按钮大小、改变图标或字体等）
    每天总结一个html标签——Audio音频标签_audio标签

五、自定义样式

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

1. 示例

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

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 等。这些库提供了更多的功能和自定义选项，使音频播放更加灵活和方便。

网络标签：

相关问题