React中实现点击新音频时自动暂停上一个音频的问题咨询

你好呀！我看到你遇到了React里多音频播放冲突的小问题——点击不同的PlayCircleFilled图标时，多个音频会同时播放，想要实现每次只播放最后点击的那一个对吧？咱们一起来梳理下问题，然后搞定它～

先分析下你现有代码的问题点 #

从你给出的代码片段来看，你已经想到用audioRef和audioUrl状态来管理音频，但大概率是因为每个播放图标都对应了一个独立的<audio>元素，导致audioRef只能拿到最后一个创建的音频实例，之前的音频没法被暂停，所以会出现多音频同时播放的情况。

解决方案：复用全局单一音频实例 #

核心思路是：整个组件只维护一个<audio>元素，所有播放操作都复用这个实例，点击新的播放图标时，直接切换这个实例的音频URL并播放，同时自动停止之前的播放。

步骤1：调整组件结构，只保留一个全局音频元素

在组件的JSX末尾添加唯一的<audio>元素，用audioRef绑定它：

const Client = (props) => {
  const { sentence, typeConversation } = props;
  const audioRef = useRef(null);
  // 新增状态跟踪当前播放的URL和播放状态（可选，用于更新图标样式）
  const [currentPlayingUrl, setCurrentPlayingUrl] = useState(null);
  const [isPlaying, setIsPlaying] = useState(false);

  // ...其他逻辑

  return (
    <div>
      {/* 你的其他组件内容 */}
      {renderTextWithAudioPlayer(sentence.text)}
      
      {/* 全局唯一的音频元素 */}
      <audio
        ref={audioRef}
        onEnded={handleAudioEnded}
      />
    </div>
  );
};

步骤2：修改音频播放逻辑，复用全局实例

更新handleAudioPlay函数，直接操作全局音频实例，切换URL并控制播放：

const handleAudioPlay = (url) => {
  // 如果点击的是当前正在播放的音频，实现播放/暂停切换
  if (currentPlayingUrl === url) {
    if (isPlaying) {
      audioRef.current.pause();
      setIsPlaying(false);
    } else {
      audioRef.current.play();
      setIsPlaying(true);
    }
    return;
  }

  // 暂停当前正在播放的音频
  if (audioRef.current) {
    audioRef.current.pause();
    audioRef.current.currentTime = 0;
  }

  // 切换到新音频并播放
  audioRef.current.src = url;
  audioRef.current.play()
    .then(() => {
      setCurrentPlayingUrl(url);
      setIsPlaying(true);
    })
    .catch(err => console.error("音频播放失败:", err));
};

// 音频播放结束后重置状态
const handleAudioEnded = () => {
  setCurrentPlayingUrl(null);
  setIsPlaying(false);
};

步骤3：更新播放图标渲染，同步播放状态

在renderTextWithAudioPlayer里，根据当前播放状态调整图标样式（比如播放时高亮）：

const renderTextWithAudioPlayer = (text) => {
  const combinedRegex = /(https?:\/\/[^\s]+)|(\[Audio\])/g;
  const parts = text.split(combinedRegex).filter(part => part);

  return parts.map((part, index) => {
    if (part === "[Audio]") {
      // 这里替换成你实际获取对应音频URL的逻辑
      const targetAudioUrl = sentence.audioUrl; 
      return (
        <PlayCircleFilled
          key={index}
          onClick={() => handleAudioPlay(targetAudioUrl)}
          style={{
            color: currentPlayingUrl === targetAudioUrl && isPlaying ? '#1890ff' : '#666',
            cursor: 'pointer',
            margin: '0 4px'
          }}
        />
      );
    }

    // 处理文本中的链接
    if (part.startsWith('http')) {
      return (
        <a
          key={index}
          href={part}
          target="_blank"
          rel="noopener noreferrer"
          style={{ color: '#1890ff' }}
        >
          {part}
        </a>
      );
    }

    // 普通文本
    return <span key={index}>{part}</span>;
  });
};

为什么这样能解决问题？ #

通过复用单一音频实例，所有播放请求都指向同一个<audio>元素，切换URL时浏览器会自动停止当前播放的音频并加载新的音频，从根本上避免了多个音频同时播放的情况，同时还能方便地跟踪播放状态，更新UI反馈。

备注：内容来源于stack exchange，提问作者Francisco.js