<audio>-音频内容

<audio> 标签是 HTML5 中用于嵌入音频内容的元素，支持多种音频格式，无需依赖第三方插件。通过属性和 JavaScript 控制，可以实现播放、暂停、音量调节等功能。

<audio> 标签的基本语法

<audio> 标签的语法非常简单，以下是一个基础示例：

<audio src="audio.mp3" controls></audio>

• src 属性指定音频文件的路径。
• controls 属性显示浏览器默认的音频控制界面（播放/暂停按钮、进度条、音量等）。

如果不添加 controls 属性，音频不会显示任何界面，但可以通过 JavaScript 控制播放：

<audio id="myAudio" src="audio.mp3"></audio>
<button onclick="document.getElementById('myAudio').play()">播放</button>

支持的音频格式

不同浏览器支持的音频格式可能不同，常见的格式包括：

• MP3（广泛支持）
• WAV（无损，但文件较大）
• OGG（开源格式，部分浏览器支持）

为了提高兼容性，可以使用 <source> 标签指定多个格式：

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  您的浏览器不支持音频播放。
</audio>

浏览器会按顺序尝试加载第一个支持的格式，如果都不支持，则显示 <audio> 标签内的后备内容（如“您的浏览器不支持音频播放”）。

常用属性

<audio> 标签支持多种属性来控制音频行为：

示例：自动循环播放且静音的音频

<audio src="background.mp3" autoplay loop muted></audio>

JavaScript 控制音频

通过 JavaScript 可以动态控制音频的播放、暂停、音量等。以下是一个完整示例：

<audio id="myAudio" src="sound.mp3"></audio>
<button onclick="playAudio()">播放</button>
<button onclick="pauseAudio()">暂停</button>
<button onclick="setVolume(0.5)">音量50%</button>

<script>
  const audio = document.getElementById("myAudio");

  function playAudio() {
    audio.play();
  }

  function pauseAudio() {
    audio.pause();
  }

  function setVolume(volume) {
    audio.volume = volume; // 取值范围 0.0 到 1.0
  }
</script>

事件监听

<audio> 标签支持多种事件，可以通过 JavaScript 监听这些事件以实现更复杂的功能：

<audio id="eventAudio" src="music.mp3" controls></audio>
<script>
  const audio = document.getElementById("eventAudio");

  audio.addEventListener("play", () => {
    console.log("音频开始播放");
  });

  audio.addEventListener("ended", () => {
    console.log("音频播放结束");
  });

  audio.addEventListener("timeupdate", () => {
    console.log(`当前播放位置: ${audio.currentTime}`);
  });
</script>

常用事件包括：

• play：播放时触发
• pause：暂停时触发
• ended：播放结束时触发
• timeupdate：播放位置变化时触发

自定义音频播放器

通过结合 HTML、CSS 和 JavaScript，可以完全自定义音频播放器的样式和功能。以下是一个简单示例：

<div class="custom-player">
  <audio id="customAudio" src="song.mp3"></audio>
  <button onclick="togglePlay()">播放/暂停</button>
  <input 
    type="range" 
    min="0" 
    max="1" 
    step="0.1" 
    onchange="setVolume(this.value)"
  >
  <span id="timeDisplay">0:00</span>
</div>

<script>
  const audio = document.getElementById("customAudio");
  const timeDisplay = document.getElementById("timeDisplay");

  function togglePlay() {
    if (audio.paused) {
      audio.play();
    } else {
      audio.pause();
    }
  }

  function setVolume(volume) {
    audio.volume = volume;
  }

  audio.addEventListener("timeupdate", () => {
    const minutes = Math.floor(audio.currentTime / 60);
    const seconds = Math.floor(audio.currentTime % 60);
    timeDisplay.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
  });
</script>

<style>
  .custom-player {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #f0f0f0;
    border-radius: 5px;
  }
</style>

高级功能：音频可视化

通过 Web Audio API 可以实现音频可视化效果。以下示例展示如何绘制音频频谱：

<audio id="visualizerAudio" src="music.mp3" controls></audio>
<canvas id="canvas" width="600" height="200"></canvas>

<script>
  const audio = document.getElementById("visualizerAudio");
  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");

  // 创建音频上下文
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const analyser = audioContext.createAnalyser();
  const source = audioContext.createMediaElementSource(audio);

  source.connect(analyser);
  analyser.connect(audioContext.destination);
  analyser.fftSize = 256;

  const bufferLength = analyser.frequencyBinCount;
  const dataArray = new Uint8Array(bufferLength);

  function draw() {
    requestAnimationFrame(draw);
    analyser.getByteFrequencyData(dataArray);

    ctx.fillStyle = "rgb(0, 0, 0)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    const barWidth = (canvas.width / bufferLength) * 2.5;
    let x = 0;

    for (let i = 0; i < bufferLength; i++) {
      const barHeight = dataArray[i] / 2;
      ctx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
      ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
      x += barWidth + 1;
    }
  }

  audio.addEventListener("play", () => {
    audioContext.resume().then(() => {
      draw();
    });
  });
</script>

移动端注意事项

在移动设备上，浏览器通常限制自动播放功能，必须由用户交互（如点击事件）触发音频播放：

<button onclick="startAudio()">点击播放音频</button>
<audio id="mobileAudio" src="notification.mp3"></audio>

<script>
  function startAudio() {
    const audio = document.getElementById("mobileAudio");
    audio.play().catch(e => {
      console.error("播放失败:", e);
    });
  }
</script>

无障碍设计

为 <audio> 标签添加适当的文本描述和键盘控制，确保无障碍访问：

<audio 
  id="accessibleAudio" 
  src="podcast.mp3" 
  controls 
  aria-label="播客节目"
></audio>
<script>
  const audio = document.getElementById("accessibleAudio");
  
  // 添加键盘事件支持
  document.addEventListener("keydown", (e) => {
    if (e.key === " ") {
      e.preventDefault();
      if (audio.paused) {
        audio.play();
      } else {
        audio.pause();
      }
    }
  });
</script>