HTML5 Audio（音频）

原创于 2025-10-29 22:14:58 发布 · 369 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言

HTML5 Audio（音频）

引言

HTML5的推出为网页设计带来了许多新的功能，其中之一就是内嵌音频播放功能。HTML5 Audio标签（<audio>）允许开发者直接在网页中嵌入音频文件，无需依赖第三方插件。本文将详细介绍HTML5 Audio标签的使用方法、支持的音频格式以及如何对其进行控制。

HTML5 Audio标签的基本用法

HTML5 Audio标签的基本用法如下：

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

在上面的代码中，<audio>标签包含了controls属性，这意味着浏览器会自动为音频添加播放、暂停、音量控制等控件。<source>标签用于指定音频文件的路径和类型。

支持的音频格式

HTML5 Audio标签支持以下音频格式：

MP3（audio/mpeg）
WAV（audio/wav）
AAC（audio/aac）
OGG（audio/ogg）

为了提高兼容性，建议同时提供多种格式的音频文件。

控制音频播放

HTML5 Audio标签提供了以下方法来控制音频播放：

play()：开始播放音频。
pause()：暂停播放音频。
currentTime：获取或设置音频的当前播放时间。
duration：获取音频的总时长。
ended：判断音频是否已经播放完毕。

以下是一个简单的示例，演示如何控制音频播放：

<audio id="myAudio" controls>
  <source src="audio.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

<button onclick="playAudio()">播放</button>
<button onclick="pauseAudio()">暂停</button>

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

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

  function pauseAudio() {
    audio.pause();
  }
</script>

自定义音频播放器

除了使用HTML5 Audio标签提供的控件外，还可以通过CSS和JavaScript自定义音频播放器。以下是一个简单的自定义音频播放器示例：

<div class="audio-player">
  <audio id="myAudio" controls>
    <source src="audio.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
  </audio>
  <div class="progress-bar">
    <div class="progress"></div>
  </div>
</div>

<script>
  var audio = document.getElementById("myAudio");
  var progress = document.querySelector(".progress");

  audio.addEventListener("timeupdate", function() {
    var width = (audio.currentTime / audio.duration) * 100;
    progress.style.width = width + "%";
  });
</script>

在上面的示例中，我们通过CSS和JavaScript自定义了音频播放器的样式和进度条。