HTML5 Audio

HTML5 Audio是一种非常常用的音频标签，能够在网页上插入音频，并且支持多种音频格式，比如MP3，WAV和OGG。HTML5 Audio的使用非常简单，只需要简单的几行代码就可以帮你实现网页音频的播放功能。

基本语法

HTML5 Audio音频标签的基本语法如下所示：

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

通过上面的语法，我们可以看到Audio标签有一个controls属性，表示要在音频元素中添加一个内置的控制面板，帮助用户控制音频的状态。

其中，我们需要准备多种音频格式，以方便各个浏览器都能够顺利地播放音频。比如在上述例子中，我们提供了两种格式的音频文件，分别是MP3和OGG格式的。

常用属性

在使用HTML5 Audio进行音频播放的时候，我们可能需要掌握一些常用属性，以便更加灵活的控制音频的播放状态。

autoplay

autoplay属性表示音频是否自动播放，取值可以是true或false，默认为false。

loop

loop属性表示音频在播放完毕后，是否需要再次循环播放。如果需要不断循环播放，可以将loop属性设置为true。

preload

preload属性表示页面加载时是否自动预加载音频资源，取值可以是“auto”、“meta”或“none”。如果希望音频能够在页面加载时自动缓存，可以将preload属性设置为“auto”。

volume

volume属性表示设置音频的音量，取值范围为0到1之间。

常用方法

在使用HTML5 Audio进行音频播放的时候，我们也需要掌握一些常用方法，以便更好地控制音频的播放状态。

play()

play()方法表示播放音频，如果音频已经处于暂停状态，会继续播放。

pause()

pause()方法表示暂停音频的播放。

load()

load()方法表示重新加载音频。

事件

HTML5 Audio还支持一些事件来监听音频的播放状态，常用的音频事件包括：

play

当音频开始播放时触发。

pause

当音频暂停时触发。

ended

当音频播放结束时触发。

error

当发生错误时触发。

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

<script>
  var audio = document.getElementsByTagName("audio")[0];
  audio.addEventListener("play", function() {
    console.log("音频开始播放");
  });
</script>

浏览器支持

HTML5 Audio标签是HTML5中新增的标签之一，目前在各大浏览器环境下都能够完美支持。但是在使用其中的某些音频格式时，不同的浏览器还是存在一些兼容性问题，需要在使用时多加注意。