反應 - 在 iOS 設備上播放音頻 onClick 導致“未處理的拒絕（NotAllowedError）”？

Question

我的問題的沙盒演示： https://codesandbox.io/s/jolly-fermat-j23w9

我正在嘗試在我的 React 站點上實現一個功能，用戶單擊一個元素並播放音頻。

在桌面上，這工作正常。 但是在 iOS 設備上，我遇到了“未處理的拒絕（NotAllowedError）”。 此錯誤通常是由 iOS 設備上的自動播放媒體引起的。 但是，在這種情況下，用戶必須單擊該元素才能啟動音頻，因此不應發生此錯誤。

我的懷疑是，由於 state 上的組件重新呈現更改，React 不知道用戶必須與站點交互才能觸發音頻。

這是基本代碼：

// audio playing function, found on this stackoverflow question:
// https://stackoverflow.com/questions/47686345/playing-sound-in-reactjs
const useAudio = url => {
  const [audio] = useState(new Audio(url));
  const [playing, setPlaying] = useState(false);

  const toggle = () => setPlaying(!playing);

  useEffect(() => {
    playing ? audio.play() : audio.pause();
  }, [playing]);

  return [playing, toggle];
};

// url of audio is passed in as prop from App.js
const PlayAudio = ({ url }) => {
  const [playing, toggle] = useAudio(url);

  return (
    <>
      <PlayButton onClick={toggle}>{playing ? "Pause" : "Play"}</PlayButton>
    </>
  );
};

使用 Safari、Chrome 和 Firefox 瀏覽器在 iPhone 上測試。

同樣，可以在此處找到完整的工作演示，您需要檢查 iOS 設備以查看錯誤： https://codesandbox.io/s/jolly-fermat-j23w9

任何幫助表示贊賞。

Answer 1

使用您的代碼創建示例但另一種方法：

 <audio ref....> 

https://codesandbox.io/s/elegant-black-c0jr8

Answer 2

這應該工作： setTimeout(audio.play)