HTML 音频标签疑难杂症大解答：彻底解决你的困惑

HTML 音频标签简介

HTML 音频标签 (<audio>) 用于在网页中嵌入音频文件，允许用户播放音频内容。音频标签提供了对音频的播放、暂停、停止、快进、快退等基本控制，还可以设置音量、循环播放等选项。

HTML 音频标签的基本属性

class="lazy" data-src 属性

class="lazy" data-src 属性指定要播放的音频文件的 URL。可以是相对路径或绝对路径。例如：

<audio class="lazy" data-src="audio/mymusic.mp3">
</audio>

controls 属性

controls 属性指定是否显示音频播放器控件。如果设置为 true，则显示控件；如果设置为 false，则不显示控件。例如：

<audio class="lazy" data-src="audio/mymusic.mp3" controls>
</audio>

autoplay 属性

autoplay 属性指定是否在页面加载时自动播放音频。如果设置为 true，则自动播放；如果设置为 false，则不自动播放。例如：

<audio class="lazy" data-src="audio/mymusic.mp3" autoplay>
</audio>

loop 属性

loop 属性指定是否循环播放音频。如果设置为 true，则循环播放；如果设置为 false，则不循环播放。例如：

<audio class="lazy" data-src="audio/mymusic.mp3" loop>
</audio>

muted 属性

muted 属性指定是否静音播放音频。如果设置为 true，则静音播放；如果设置为 false，则正常播放。例如：

<audio class="lazy" data-src="audio/mymusic.mp3" muted>
</audio>

HTML 音频标签的事件

play 事件

play 事件在音频开始播放时触发。可以通过 addEventListener() 方法监听该事件，然后在事件处理函数中执行相应的操作。例如：

<audio id="myAudio" class="lazy" data-src="audio/mymusic.mp3" controls>
</audio>

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

  audio.addEventListener("play", function() {
    console.log("Audio started playing");
  });
</script>

pause 事件

pause 事件在音频暂停播放时触发。可以通过 addEventListener() 方法监听该事件，然后在事件处理函数中执行相应的操作。例如：

<audio id="myAudio" class="lazy" data-src="audio/mymusic.mp3" controls>
</audio>

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

  audio.addEventListener("pause", function() {
    console.log("Audio paused");
  });
</script>

ended 事件

ended 事件在音频播放结束时触发。可以通过 addEventListener() 方法监听该事件，然后在事件处理函数中执行相应的操作。例如：

<audio id="myAudio" class="lazy" data-src="audio/mymusic.mp3" controls>
</audio>

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

  audio.addEventListener("ended", function() {
    console.log("Audio ended");
  });