如何用单个按钮实现HTML音频的播放/暂停切换？

没问题！要把两个独立的播放、暂停按钮合并成一个可以切换状态的按钮，我们只需要通过判断音频的当前状态来执行对应的操作，同时更新按钮的显示文本就可以了。下面是修改后的完整代码：

HTML 部分 #

<button id="playPauseBtn" onclick="togglePlayPause()">Play</button>
<audio id="ad" src="你的音频文件路径.mp3"></audio>

JavaScript 部分 #

var song = document.getElementById("ad");
var playPauseBtn = document.getElementById("playPauseBtn");

function togglePlayPause() {
  // 判断音频是否处于暂停状态
  if (song.paused) {
    song.play();
    playPauseBtn.textContent = "Pause"; // 更新按钮文本为暂停
  } else {
    song.pause();
    playPauseBtn.textContent = "Play"; // 更新按钮文本为播放
  }
}

关键说明： #

• 我们给按钮添加了id，方便在JS里获取它来更新显示文本
• 利用音频元素自带的paused属性判断当前状态：如果paused为true，说明音频没在播放，就执行播放操作；反之则执行暂停
• 每次状态切换时同步更新按钮上的文字，让用户能直观清楚当前按钮的功能

这样点击同一个按钮就能在播放和暂停状态之间来回切换啦！

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