如何在 HTML 音频控件中仅显示播放按钮

在 HTML5 中，我们可以使用 audio 标签内置的控件来控制音频的播放、暂停、调整音量等操作。但有时候我们只想展示一个播放按钮，如何能够实现呢？

方案一：使用 JavaScript

我们可以使用 JavaScript 来控制 audio 标签的显示和隐藏。具体实现步骤如下：

1. 在 HTML 中，将 audio 标签和播放按钮分别放在两个 div 容器中，并为它们分别设置 ID，如下所示：

<div id="audio-wrap">
  <audio id="my-audio" controls>
    <source src="audio.mp3" type="audio/mpeg">
  </audio>
</div>
<div id="play-btn" onclick="playAudio()">播放</div>

2. 在 CSS 中，设置 audio 标签所在的 div 显示为 none，将播放按钮的样式调整为自己喜欢的样式，如下所示：

#audio-wrap {
  display: none;
}
#play-btn {
  /* 根据需要自行调整样式 */
}

3. 在 JavaScript 中，写一个播放按钮的点击事件函数 playAudio()，用来控制 audio 标签的显示和隐藏，如下所示：

function playAudio() {
  var audioWrap = document.getElementById("audio-wrap");
  if (audioWrap.style.display === "none") {
    audioWrap.style.display = "block";
    document.getElementById("my-audio").play();
  } else {
    audioWrap.style.display = "none";
    document.getElementById("my-audio").pause();
  }
}

点击播放按钮时，如果 audio-wrap 显示为 none，则让它显示出来，并且播放音频；如果 audio-wrap 显示为 block，则让它隐藏，并且暂停音频的播放。

方案二：使用 CSS

我们也可以利用 CSS 的 :checked 伪类来实现只显示播放按钮的效果。具体实现步骤如下：

1. 在 HTML 中，将 input 标签和 audio 标签分别放在两个 label 标签内，并为它们分别设置 for 属性和 ID，如下所示：

<label for="toggle"><div id="play-btn">播放</div></label>
<input type="checkbox" name="toggle" id="toggle">
<label for="toggle"><audio id="my-audio" controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio></label>

2. 在 CSS 中，设置 input 标签的样式为 display:none，将 label 标签中的 audio 控件样式设为隐藏，如下所示：

input[type="checkbox"] {
  display: none;
}
label[for="toggle"] audio {
  visibility: hidden;
  height: 0;
  margin: 0;
  padding: 0;
  width: 0;
}

3. 在 CSS 中，使用 :checked 伪类，将 label 标签中的 audio 控件样式设为显示，如下所示：

input[type="checkbox"]:checked + label[for="toggle"] audio {
  visibility: visible;
  height: auto;
  width: auto;
}

点击播放按钮时，会触发 input 标签的选中事件，然后将对应 label 标签中的 audio 控件样式设为显示。如果再次点击播放按钮，则会触发 input 标签的取消选中事件，然后将对应 label 标签中的 audio 控件样式设为隐藏。

综上所述，两种方案都可以实现只显示播放按钮的效果，开发者们可以根据自己的实际情况选择适合自己的方案。