如何实现播放按钮切换暂停、独立控制对应盒子音频及UI重置

实现方案 #

1. HTML结构修改 #

每个.box容器内添加对应的隐藏音频元素，你只需要替换src属性为你的实际音频地址即可，示例修改后的单盒子结构如下：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" rel="stylesheet">

<div class="box">
  <div class="box_title"><i class='material-icons'>graphic_eq</i>Test song title</div>
  <!-- 新增对应音频元素，默认隐藏 -->
  <audio hidden src="你的音频地址.mp3" preload="metadata"></audio>
  <div class="playbutton"><i class='material-icons'>play_arrow</i></div>
  <div class="box_content">
    <p> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
    <p class="box_footer"> date | autor </p>
    <p class="box_footer_right"> <i class='material-icons'>delete</i> | <i class='material-icons'>edit</i> | <i class='material-icons'>visibility</i></p>
  </div>
</div>
<!-- 多盒子直接复制上述.box结构替换对应内容和音频地址即可，互不干扰 -->

2. 追加CSS（优化播放按钮样式，可直接加在原有CSS末尾） #

/* 优化播放按钮图标居中 */
.playbutton {
  height: 125px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 增加hover缩放效果，提升交互感 */
.playbutton:hover {
  transform: scale(1.05);
}
/* 修正激活态样式 */
.playbutton:active {
  transform: scale(0.98) translateY(4px);
}

3. 新增JS功能代码（直接放在页面</body>标签前即可） #

// 获取所有播放按钮
const playButtons = document.querySelectorAll('.playbutton');
playButtons.forEach(btn => {
  // 获取当前按钮对应的音频元素
  const audio = btn.parentElement.querySelector('audio');
  const icon = btn.querySelector('i');
  // 监听按钮点击
  btn.addEventListener('click', () => {
    if(audio.paused) {
      // 播放状态：切换暂停图标，播放音频
      icon.textContent = 'pause';
      audio.play();
    } else {
      // 暂停状态：切回播放图标，重置进度并暂停
      icon.textContent = 'play_arrow';
      audio.pause();
      audio.currentTime = 0;
    }
  });
  // 监听音频播放结束事件
  audio.addEventListener('ended', () => {
    icon.textContent = 'play_arrow';
    audio.currentTime = 0;
  });
});

功能验证说明 #

• 多个同结构.box容器会各自绑定独立的音频和按钮事件，互相不会干扰
• 点击播放自动切换图标并播放音频，点击暂停自动切回图标并重置进度到0
• 音频播放完毕后自动重置图标和进度

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