Audio播放正常但暂停功能失效，求前端技术解决方案

你的代码问题出在每次调用playAudio或pauseAudio时，都会创建一个全新的Audio实例——点击PAUSE按钮时，暂停的是刚新建的、根本没在播放的音频对象，自然控制不了之前正在播放的那个。

解决思路 #

要实现正确的播放/暂停控制，必须让play和pause操作指向同一个Audio实例。对于音频列表场景，可以用一个对象存储不同音频URL对应的实例，确保同一URL复用同一个对象。

方案一：保留原有两个按钮 #

// 用对象存储各音频的实例，key为音频URL
const audioInstances = {};

function playAudio(url) {
  let audio = audioInstances[url];
  // 如果没有对应实例，创建并存储
  if (!audio) {
    audio = new Audio(url);
    audioInstances[url] = audio;
  }
  // 仅当音频处于暂停状态时触发播放
  if (audio.paused) {
    audio.play();
  }
}

function pauseAudio(url) {
  const audio = audioInstances[url];
  // 确保实例存在且正在播放时才暂停
  if (audio && !audio.paused) {
    audio.pause();
  }
}

HTML部分无需修改：

<input type="button" value="PLAY" onclick="playAudio('https://cldup.com/qR72ozoaiQ.mp3')" />
<input type="button" value="PAUSE" onclick="pauseAudio('https://cldup.com/qR72ozoaiQ.mp3')" />

方案二：单个切换按钮（推荐） #

如果想让按钮自动切换文本（PLAY/PAUSE），可以改成切换逻辑：

const audioInstances = {};

function toggleAudio(url, button) {
  let audio = audioInstances[url];
  if (!audio) {
    audio = new Audio(url);
    audioInstances[url] = audio;
  }

  if (audio.paused) {
    audio.play();
    button.value = "PAUSE";
  } else {
    audio.pause();
    button.value = "PLAY";
  }
}

HTML调整为单个按钮：

<input type="button" value="PLAY" onclick="toggleAudio('https://cldup.com/qR72ozoaiQ.mp3', this)" />

关键说明 #

• 用audioInstances对象缓存实例，同一URL只会创建一次Audio对象，play/pause操作的是同一个实例，就能正确控制播放状态。
• 对于音频列表，每个音频项的URL作为key，就能独立控制每个音频的播放/暂停。

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