如何在React中维护页面刷新时的音频自动播放功能？

Question

问题：

我正在开发一个 React 应用程序，当计时器超过特定限制时，我需要播放通知声音。每次满足条件时都应该播放声音，即使在页面刷新后也是如此。但是，由于浏览器自动播放限制，我遇到了刷新页面后声音无法按预期播放的问题

我有一个 TimerProvider 组件，用于管理计时器并处理通知声音。只要时间超过完成任务的总时间，就会播放声音。

useEffect(() => {
  if (currentStartedTask.start_time && isRunning) {
    const timeToCompleteInSeconds = localStorage.getItem('started_task_time_to_complete') * 60;
    if (time >= timeToCompleteInSeconds) {
      if (time === timeToCompleteInSeconds || (time - timeToCompleteInSeconds) % 10 === 0) {
        showWarningToast("Time exceeded, add some more time");
        // playAudio();
        console.log(userHasInteracted)
        // play();
        playNotification()
      }
    }
  }
}, [time, currentStartedTask, userHasInteracted, playNotification]);

Answer 1

可以具体说明一下吗？正如您所说，如果浏览器有自动播放限制，并且用户启用了该设置，则它可能无法工作，因为它侵犯了用户的隐私。

尝试使用

1.用户交互

• 使用它，以便它要求用户授予自动播放权限。

2.保持交互状态（推荐）

• 将用户的交互数据存储在本地存储中，以便进行页面刷新。

(“如果您需要有关代码的任何澄清或解释，请随时询问。”)