@ant-design/icons#AudioMutedOutlined JavaScript Examples

export default function AudioPlayer({ url, connectType, onMicphoneChange }) {
  const audioEl = useRef(null);
  const [enabled, setEnabled] = useState(
    // window.MediaSource
    //   ? store.get("audio-enabled") === undefined
    //     ? true
    //     : false
    //   : false
    false
  );
  const [src, setSrc] = useState(null);

  useDebounceEffect(
    () => {
      if (connectType === "ws") {
        if (!audioEl.current || !enabled) return;
        if (!window.MediaSource) {
          message.warn("移动版的 safari 浏览器暂不支持收听声音 ?");
          setTimeout(() => {
            setEnabled(false);
          }, 1000);
          return;
        }
        const mediaSource = new MediaSource();
        let ws;
        let buffer = [];
        function sourceopen() {
          var sourceBuffer = mediaSource.addSourceBuffer(
            // "audio/webm"
            "audio/mpeg"
          );
          setInterval(() => {
            if (buffer.length && !sourceBuffer.updating) {
              sourceBuffer.appendBuffer(buffer.shift());
            }
          }, 10);

          function onAudioLoaded({ data }) {
            buffer.push(data);
            if (audioEl.current.buffered.length) {
              const bufferTime =
                audioEl.current.buffered.end(0) - audioEl.current.currentTime;
              const playbackRate = 1 + (bufferTime - 0.8) * 1.2;
              if (playbackRate < 0) {
                audioEl.current.playbackRate = 0.5;
              } else if (playbackRate > 3) {
                audioEl.current.playbackRate = 3;
              } else {
                audioEl.current.playbackRate = playbackRate;
              }
            }
          }

          ws = new WebSocket(url);
          ws.binaryType = "arraybuffer";
          ws.addEventListener("message", onAudioLoaded);

          ws.addEventListener("open", () => {
            setEnabled(true);
          });
          ws.addEventListener("close", () => {
            setEnabled(false);
          });
        }

        mediaSource.addEventListener("sourceopen", sourceopen);
        setSrc(URL.createObjectURL(mediaSource));

        return function () {
          ws && ws.close();
          mediaSource.removeEventListener("sourceopen", sourceopen);
        };
      } else {
        onMicphoneChange(enabled);
      }
    },
    [audioEl, enabled, url, connectType, onMicphoneChange],
    { wait: 500 }
  );

  return (
    <div>
      <audio ref={audioEl} src={src} autoPlay></audio>
      <Switch
        checked={enabled}
        onChange={(v) => {
          setEnabled(v);
          store.set("audio-enabled", v);
        }}
        checkedChildren={
          <>
            <CarOutlined /> <AudioOutlined />
          </>
        }
        unCheckedChildren={
          <>
            <CarOutlined /> <AudioMutedOutlined />
          </>
        }
      />
    </div>
  );
}

export default function Status({
  statusInfo,
  piPowerOff,
  wsConnected,
  delay = 0,
  isFullscreen,
  setting,
  isLogin,
  session,
  changeEditabled,
  channelStatus,
  changeChannel,
  serverConfig,
  version,
  connectType,
  onCarMicphoneChange,
  locked,
  onControllerMicphoneChange = () => {},
  enabledControllerMicphone = true,
}) {
  const isWebRTC = connectType === "webrtc";
  const { sharedEndTime } = serverConfig;

  const gamepadPress = ({ detail: { index, value } }) => {
    if (index === 3 && value > 0.5) {
      onControllerMicphoneChange(!enabledControllerMicphone);
    }
  };

  useKeyPress(
    "t",
    () => onControllerMicphoneChange(!enabledControllerMicphone),
    {
      events: ["keyup"],
    }
  );

  useEventListener("gamepadpress", gamepadPress);

  return (
    <Form layout="inline" className="app-status" size="small">
      <Form.Item>
        <Link to={`${process.env.PUBLIC_URL}/controller`}>
          <img className="logo" src="/logo-256.png" alt="N-RC" />
        </Link>
        <span>N RC</span>
      </Form.Item>
      <Form.Item>
        <Tag
          style={{
            width: "7em",
          }}
          icon={
            locked ? (
              <StopOutlined />
            ) : wsConnected ? (
              <LinkOutlined />
            ) : (
              <DisconnectOutlined />
            )
          }
          color={locked || delay > 80 || !wsConnected ? "red" : "green"}
          size="xs"
        >
          {isWebRTC ? "直连" : "中转"}:{delay.toFixed(0)}
        </Tag>
      </Form.Item>
      {(serverConfig.channelList || [])
        .filter(({ enabled, type }) => enabled && type === "switch")
        .map(({ pin, name }) => (
          <Form.Item key={pin}>
            <Switch
              checked={channelStatus[pin] || false}
              checkedChildren={name}
              unCheckedChildren={name}
              onChange={(value) => changeChannel({ pin, value })}
            />
          </Form.Item>
        ))}

      {isLogin && isWebRTC && (
        <Form.Item>
          <Switch
            checked={enabledControllerMicphone}
            onChange={onControllerMicphoneChange}
            checkedChildren={
              <>
                <DesktopOutlined /> <AudioOutlined />
              </>
            }
            unCheckedChildren={
              <>
                <DesktopOutlined /> <AudioMutedOutlined />
              </>
            }
          />
        </Form.Item>
      )}

      {isLogin && (
        <Form.Item>
          <AudioPlayer
            session={session}
            connectType={connectType}
            onMicphoneChange={onCarMicphoneChange}
            url={`${
              window.location.protocol === "https:" ? "wss://" : "ws://"
            }${setting.host}/microphone`}
          />
        </Form.Item>
      )}

      <Form.Item>
        <Switch
          checkedChildren={<FormOutlined />}
          unCheckedChildren={<FormOutlined />}
          onChange={changeEditabled}
        ></Switch>
      </Form.Item>

      <Form.Item>
        <Link to={`${process.env.PUBLIC_URL}/setting`}>
          <Button
            size="small"
            icon={<SettingOutlined />}
            shape="circle"
          ></Button>
        </Link>
      </Form.Item>

      {document.body.requestFullscreen && (
        <Form.Item>
          <Button
            type="primary"
            shape="circle"
            icon={
              isFullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />
            }
            onClick={() => {
              if (isFullscreen) {
                document.exitFullscreen();
              } else {
                document.body.requestFullscreen();
              }
            }}
          ></Button>
        </Form.Item>
      )}

      {wsConnected && isLogin && (
        <Form.Item>
          <Button
            type="danger"
            shape="circle"
            icon={<PoweroffOutlined />}
            onClick={piPowerOff}
          ></Button>
        </Form.Item>
      )}

      {wsConnected &&
        isLogin &&
        Object.keys(statusInfo).map((key) => {
          const { color, label, value } = statusInfo[key];
          return !["gps"].includes(label) ? (
            <Form.Item key={key}>
              <Tag color={color}>
                {label}:{value}
              </Tag>
            </Form.Item>
          ) : undefined;
        })}

      {wsConnected && sharedEndTime && (
        <Form.Item>
          <Tag
            icon={<HourglassOutlined />}
            color={session && session.endTime && "orange"}
          >
            {((sharedEndTime - new Date().getTime()) / 1000).toFixed(0)}s
          </Tag>
        </Form.Item>
      )}

      {version && (
        <Form.Item>
          <Tag>v{version}</Tag>
        </Form.Item>
      )}
    </Form>
  );
}