React 中点击当前音频按钮时如何暂停先前播放的音频？

如何在 React 中通过点击当前音频按钮暂停先前播放的音频

问题

在 React 应用程序中，当您点击当前正在播放的音频按钮时，它可能会同时播放多个音频，导致音频体验混乱。这是因为每个音频元素都有自己的播放状态，并且没有机制可以协调它们。

解决方法

为了解决这个问题，我们可以使用 React 的 useRef 钩子来跟踪正在播放的音频，并在点击当前音频按钮时将其暂停。

实现

以下是一个使用 useRef 钩子的更新代码示例：

import React, { useState, useRef } from 'react';

const PlayAudio = ({ content }) => {
  const [isPlaying, setIsPlaying] = useState(false);
  const [previous, setPrevious] = useState({});
  const audioRef = useRef(null);
  const previousRef = useRef(null);

  const togglePlay = () => {
    if (!isPlaying) {
      if (previousRef.current) {
        previousRef.current.pause();
      }
      audioRef.current.play();
      setPrevious(audioRef.current);
    } else {
      audioRef.current.pause();
    }
    setIsPlaying(!isPlaying);
  };

  return (
    <div>
      {content.audio && (
        <audio ref={audioRef} src={content.audio}></audio>
      )}
      {content.audio && (
        <img
          src="play.svg"
          alt=""
          onClick={togglePlay}
          className="cursor-pointer"
        />
      )}
    </div>
  );
};

export default PlayAudio;

在 togglePlay 函数中，我们首先检查 previousRef.current 是否不为 null。如果是，则表示有先前正在播放的音频，因此我们将其暂停。然后，我们使用 setPrevious 将当前音频元素存储在 previous 状态中，以便以后可以暂停它。

总结

通过使用 useRef 钩子和一些额外的状态管理，我们能够解决问题并实现所需的功能。现在，单击当前音频按钮时，它将暂停先前正在播放的音频，从而提供更流畅的音频体验。

常见问题解答

1. 为什么我们需要使用 useRef 钩子？

useRef 钩子允许我们在函数组件中创建可变引用。它使我们能够存储对 DOM 元素的引用，在这种情况下，它允许我们跟踪正在播放的音频元素。

2. 如何使用 previousRef？

previousRef 用于跟踪先前正在播放的音频元素。当当前音频开始播放时，我们将其存储在 previous 状态中。这使我们能够在单击当前音频按钮时暂停它。

3. 为什么我们使用 setPrevious 来存储当前音频元素？

我们使用 setPrevious 来存储当前音频元素，以便稍后可以暂停它。通过将当前音频元素存储在状态中，我们能够在不同的函数调用之间访问它。

4. 还有其他方法可以解决这个问题吗？

有其他方法可以解决这个问题，例如使用全局状态管理库，如 Redux 或 Zustand。但是，useRef 钩子提供了一种简单的解决方案，并且在大多数情况下已足够。

5. 这个解决方案有什么限制？

这个解决方案的限制是它仅适用于单页面应用程序。如果您的应用程序有多个页面，您需要使用不同的方法来管理音频播放。