HTML 使用自定义按钮静音HTML5音频元素

在本文中，我们将介绍如何使用自定义按钮来静音HTML5音频元素。

阅读更多：HTML 教程

什么是HTML5音频元素？

HTML5音频元素 <audio> 是HTML标签之一，用于嵌入音频文件到网页中。它提供了控制音频播放的各种属性和方法，如播放、暂停、音量控制等。

创建HTML5音频元素

首先，我们需要在HTML文档中创建一个 <audio> 元素。这可以通过以下代码完成：

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

在上面的代码中，我们为 <audio> 元素指定了一个唯一的id为”myAudio”，以及一个控件属性 controls，这样用户可以通过浏览器提供的默认控制面板来控制音频的播放和暂停。

静音音频元素

要通过自定义按钮来静音音频元素，我们需要使用JavaScript来操控音频的 muted 属性。

首先，我们需要为按钮添加一个点击事件监听器。在点击按钮时，这个事件监听器会触发一个函数。

<button onclick="muteAudio()">静音</button>

接下来，在JavaScript中创建一个 muteAudio() 函数。该函数会使用音频元素的 muted 属性来静音音频。

function muteAudio() {
  var audio = document.getElementById("myAudio");
  audio.muted = true;
}

在上述代码中，我们通过获取音频元素的id来获取对应的元素。然后，将音频元素的 muted 属性设置为 true，这样就可以静音音频。

取消静音音频元素

类似地，我们也可以创建一个按钮来取消静音音频元素。

首先，在HTML中添加取消静音按钮：

<button onclick="unmuteAudio()">取消静音</button>

然后，在JavaScript中创建一个 unmuteAudio() 函数：

function unmuteAudio() {
  var audio = document.getElementById("myAudio");
  audio.muted = false;
}

当点击取消静音按钮时，unmuteAudio() 函数会将音频元素的 muted 属性设置为 false，这样就可以取消静音音频。

示例

下面是一个完整的示例，展示如何使用自定义按钮来静音和取消静音HTML5音频元素：

<html>
<head>
  <script>
    function muteAudio() {
      var audio = document.getElementById("myAudio");
      audio.muted = true;
    }

    function unmuteAudio() {
      var audio = document.getElementById("myAudio");
      audio.muted = false;
    }
  </script>
</head>
<body>
  <audio id="myAudio" controls>
    <source src="audio.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>

  <button onclick="muteAudio()">静音</button>
  <button onclick="unmuteAudio()">取消静音</button>
</body>
</html>