HTML5 Audio(音频)

HTML5 提供了<audio>元素来嵌入音频文件到网页中。使用<audio>元素可以方便地在网页中播放音频，而不需要依赖第三方插件。

如何使用<audio>元素

要在网页中嵌入音频文件，只需要使用<audio>元素并指定音频文件的路径即可。以下是一个简单的示例：

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

在上面的示例中，<audio>元素包含了一个<source>子元素，用于指定音频文件的路径和类型。controls属性会在音频下方显示一个播放控制条，让用户可以控制音频的播放。

支持的音频格式

不同的浏览器支持不同的音频格式。为了确保音频在各种浏览器中都能正常播放，可以提供多个不同格式的音频文件，让浏览器自行选择支持的格式。

以下是一些常见的音频格式及其对应的 MIME 类型：

• MP3: audio/mpeg
• Ogg: audio/ogg
• WAV: audio/wav

控制音频播放

<audio>元素提供了一些属性和方法来控制音频的播放，比如play()方法可以开始播放音频，pause()方法可以暂停音频。另外，还可以使用currentTime属性来设置音频的播放位置。

下面是一个示例，演示如何使用 JavaScript 控制音频的播放：

// www.javascriptcn.com code example
<audio id="myAudio" controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<button onclick="playAudio()">Play</button>
<button onclick="pauseAudio()">Pause</button>

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

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

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

结语

通过<audio>元素和相关的属性和方法，我们可以在网页中方便地添加音频，并实现一些基本的音频控制功能。希望本章节的内容对你有所帮助！