每天总结一个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标签的常用事件

完整事件请参考：

事件名称触发条件用途示例
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 等。这些库提供了更多的功能和自定义选项，使音频播放更加灵活和方便。

posted on 2025-07-18 12:12  ljbguanli  阅读(15)  评论(0)    收藏  举报

博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3