iOS 移动设备上 React App 的静音功能

Question

我最近在我的应用程序中添加了一个复选框，用作我创建的静音功能的切换开关。它在所有桌面浏览器（Chrome、Safari、Mozilla 和 Edge）和 Android 设备上运行良好，但由于某些原因，它无法在移动 iOS 设备上运行（iPhone 12 iOS v14.1，和 iPad iOS v14.1).

这是我的代码，为了可读性减去了多余部分。

const Header = () => {
  
  ...
  
  const [mute, setMute] = useState(false);
  const location = useLocation();

  ...
  
  const toggleMute = (check: boolean) => {
    setMute(check);
    if (check) audioFiles[`${location.pathname.substr(1)}_${gender}`].volume = 0;
    else audioFiles[`${location.pathname.substr(1)}_${gender}`].volume = 1;
  };
  
  return (
    <div>
      <AppBar position="fixed">

        ...

        <div>
          <input
            type="checkbox"
            name="mute"
            id="mute"
            onClick={(event) => toggleMute(event.currentTarget.checked)}
            checked={mute}
            disabled={location.pathname.endsWith('home')}
          />{' '}
          Mute
        </div>

        ...

      </AppBar>
    </div>
  );
}

我可以点击复选框，它会显示为已选中，但似乎不会触发静音切换。

我尝试同时使用 onChange 而不是 onClick 以及与 onClick 一起使用，但我看不出有什么不同。

注意：音频文件保存在一个数组中，可在整个应用程序中访问，并根据用户选择的位置和性别命名。

为什么这在其他地方都有效，但在移动设备上却无效iOS？

如果需要，我可以提供更多代码。

注意：我遇到了类似的问题 iOS 根本不允许我的音频播放，因为它没有使用控件来播放。我通过将音频合并到一个文件中解决了这个问题。

Answer 1

我自己解决了这个问题。

没有使用音频文件的音量属性，而是有一个我不知道存在的静音属性。

这解决了问题。

仅供参考：在移动 iOS 上调整音量属性每次单击复选框时都会重置回原始设置。

iOS 移动设备上 React App 的静音功能

Mute Function for React App on iOS Mobile Devices

checkbox

ios

reactjs