如何制作圆形播放/暂停音频播放器按钮？附现有HTML代码

我来帮你搞定这个圆形播放/暂停按钮的需求！基于你提供的HTML代码，我们可以通过CSS美化样式+JavaScript实现状态切换来完成，具体方案如下：

1. 调整HTML结构（可选优化） #

你的原有HTML可以保留，不过为了结构更清晰，我们可以把音频元素和触发按钮稍微拆分（不影响核心功能）：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="container">
  <span class="trigger-audio fa fa-play"></span>
  <audio class="audio-player" src="https://cbc_r2_tor.akacast.akamaistream.net/7/364/451661/v1/rc.akacast.akamaistream.net/cbc_r2_tor" volume="1.0"></audio>
</div>

2. 添加CSS样式实现圆形按钮 #

通过CSS设置圆形外观、交互效果并让图标居中：

.trigger-audio {
  /* 核心圆形样式 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%; /* 宽高相等时，50%圆角就是完美圆形 */
  background-color: #2196F3; /* 自定义背景色，这里用蓝色 */
  color: white;
  font-size: 24px;
  cursor: pointer;
  /* 添加入门级交互动画 */
  transition: background-color 0.3s ease;
}

.trigger-audio:hover {
  background-color: #1976D2; /* hover时加深背景色 */
}

.container {
  margin: 20px; /* 给容器加一点外边距，避免贴边 */
}

3. JavaScript实现播放/暂停状态切换 #

最后写JS逻辑，实现点击按钮切换音频状态，同时同步更新图标：

const triggerBtn = document.querySelector('.trigger-audio');
const audioPlayer = document.querySelector('.audio-player');

triggerBtn.addEventListener('click', () => {
  if (audioPlayer.paused) {
    // 音频暂停时：开始播放 + 切换为暂停图标
    audioPlayer.play();
    triggerBtn.classList.remove('fa-play');
    triggerBtn.classList.add('fa-pause');
  } else {
    // 音频播放时：暂停播放 + 切换为播放图标
    audioPlayer.pause();
    triggerBtn.classList.remove('fa-pause');
    triggerBtn.classList.add('fa-play');
  }
});

这样一套操作下来，你就能得到一个美观且功能完整的圆形播放/暂停按钮，点击时会平滑切换状态和样式~

内容的提问来源于stack exchange，提问作者timusR