Web学习网站

Appearance

<audio> 标签 ​

<audio> 标签用于在文档中嵌入音频内容，如音乐或其他音频流。

概述 ​

<audio> 标签是 HTML5 中引入的媒体标签，用于在网页中嵌入音频内容。它支持多种音频格式，包括 MP3、WAV、OGG 等。

语法 ​

html
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  您的浏览器不支持 audio 标签。
</audio>

基本用法 ​

简单音频播放器 ​

html
<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 标签。
</audio>

自动播放音频 ​

html
<audio controls autoplay>
  <source src="sound.mp3" type="audio/mpeg">
</audio>

属性 ​

controls 属性 ​

添加播放控件（播放、暂停、音量等）：

html
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

autoplay 属性 ​

音频就绪后自动播放：

html
<audio controls autoplay>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

loop 属性 ​

音频循环播放：

html
<audio controls loop>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

muted 属性 ​

音频静音：

html
<audio controls muted>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

preload 属性 ​

指定音频预加载方式：

html
<!-- 不预加载 -->
<audio controls preload="none">
  <source src="audio.mp3" type="audio/mpeg">
</audio>

<!-- 预加载元数据 -->
<audio controls preload="metadata">
  <source src="audio.mp3" type="audio/mpeg">
</audio>

<!-- 预加载整个音频 -->
<audio controls preload="auto">
  <source src="audio.mp3" type="audio/mpeg">
</audio>

实际示例 ​

音乐播放器 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>audio 标签示例</title>
  <style>
    .audio-player {
      max-width: 500px;
      margin: 2rem auto;
      padding: 1.5rem;
      background-color: #f8f9fa;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .track-info {
      text-align: center;
      margin-bottom: 1rem;
    }
    
    .track-info h3 {
      margin: 0 0 0.5rem 0;
      color: #333;
    }
    
    .track-info p {
      margin: 0;
      color: #666;
    }
    
    audio {
      width: 100%;
      margin-top: 1rem;
    }
  </style>
</head>
<body>
  <div class="audio-player">
    <div class="track-info">
      <h3>夏日微风</h3>
      <p>艺术家：自然之声</p>
    </div>
    
    <audio controls>
      <source src="summer-breeze.mp3" type="audio/mpeg">
      <source src="summer-breeze.ogg" type="audio/ogg">
      您的浏览器不支持 audio 标签。
    </audio>
  </div>
  
  <div class="audio-player">
    <div class="track-info">
      <h3>雨夜</h3>
      <p>艺术家：环境音乐</p>
    </div>
    
    <audio controls>
      <source src="rainy-night.mp3" type="audio/mpeg">
      <source src="rainy-night.ogg" type="audio/ogg">
      您的浏览器不支持 audio 标签。
    </audio>
  </div>
</body>
</html>

播放列表 ​

html
<section>
  <h2>音频播放列表</h2>
  
  <div class="playlist">
    <div class="track">
      <h3>Track 1: 开场音乐</h3>
      <audio controls>
        <source src="track1.mp3" type="audio/mpeg">
        您的浏览器不支持 audio 标签。
      </audio>
    </div>
    
    <div class="track">
      <h3>Track 2: 背景音乐</h3>
      <audio controls>
        <source src="track2.mp3" type="audio/mpeg">
        您的浏览器不支持 audio 标签。
      </audio>
    </div>
    
    <div class="track">
      <h3>Track 3: 结束音乐</h3>
      <audio controls>
        <source src="track3.mp3" type="audio/mpeg">
        您的浏览器不支持 audio 标签。
      </audio>
    </div>
  </div>
</section>

JavaScript 控制 ​

动态控制音频 ​

html
<!DOCTYPE html>
<html>
<head>
  <style>
    .audio-controls {
      text-align: center;
      margin: 2rem 0;
    }
    
    button {
      padding: 0.5rem 1rem;
      margin: 0 0.5rem;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    
    button:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <audio id="myAudio">
    <source src="music.mp3" type="audio/mpeg">
  </audio>
  
  <div class="audio-controls">
    <button onclick="playAudio()">播放</button>
    <button onclick="pauseAudio()">暂停</button>
    <button onclick="stopAudio()">停止</button>
    <button onclick="volumeUp()">音量+</button>
    <button onclick="volumeDown()">音量-</button>
  </div>
  
  <script>
    const audio = document.getElementById('myAudio');
    
    function playAudio() {
      audio.play();
    }
    
    function pauseAudio() {
      audio.pause();
    }
    
    function stopAudio() {
      audio.pause();
      audio.currentTime = 0;
    }
    
    function volumeUp() {
      if (audio.volume < 1.0) {
        audio.volume += 0.1;
      }
    }
    
    function volumeDown() {
      if (audio.volume > 0.0) {
        audio.volume -= 0.1;
      }
    }
  </script>
</body>
</html>

支持的音频格式 ​

不同浏览器对音频格式的支持情况：

浏览器MP3WAVOGG
Chrome✓✓✓
Firefox✓✓✓
Safari✓✓✗
Edge✓✓✓

无障碍访问 ​

添加音频描述 ​

html
<figure>
  <audio controls>
    <source src="interview.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 标签。
  </audio>
  <figcaption>采访音频：技术专家访谈</figcaption>
</figure>

最佳实践 ​

  1. 提供多种格式：为不同浏览器提供多种音频格式
  2. 添加备用文本：为不支持 audio 标签的浏览器提供备用文本
  3. 谨慎使用 autoplay：避免自动播放音频打扰用户
  4. 考虑带宽：优化音频文件大小以提高加载速度
  5. 提供控件：使用 controls 属性让用户控制音频播放

浏览器兼容性 ​

<audio> 标签在现代浏览器中得到良好支持：

  • Chrome 3+
  • Firefox 3.5+
  • Safari 3.1+
  • Edge
  • Internet Explorer 9+

注意事项 ​

  1. <audio> 标签是块级元素
  2. 需要提供多种音频格式以确保跨浏览器兼容性
  3. 使用 <source> 标签指定不同格式的音频文件
  4. 为不支持的浏览器提供备用文本
  5. 考虑用户的网络带宽和数据使用

相关标签 ​