@ant-design/icons#AudioOutlined JavaScript Examples

The following examples show how to use @ant-design/icons#AudioOutlined. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: search-input.jsx    From virtuoso-design-system with MIT License 5 votes vote down vote up
suffix = (
  <AudioOutlined
    style={{
      fontSize: 16,
      color: '#1890ff',
    }}
  />
)
Example #2
Source File: AudioPlayer.js    From network-rc with Apache License 2.0 4 votes vote down vote up
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>
  );
}
Example #3
Source File: Microphone.js    From network-rc with Apache License 2.0 4 votes vote down vote up
export default function Microphone({ url }) {
  const [recordAudio, setRecordAudio] = useState(undefined);
  const [enabled, setEnabled] = useState(undefined);
  const [ws, setWs] = useState(undefined);
  const [recording, setRecording] = useState(false);

  useEffect(() => {
    if (!url) return;
    const ws = new WebSocket(url);
    const open = () => setEnabled(true);
    const close = () => setEnabled(false);
    ws.addEventListener("open", open);
    ws.addEventListener("close", close);

    setWs(ws);

    return function () {
      if (ws) {
        ws.close();
        ws.removeEventListener("open", open);
        ws.removeEventListener("close", close);
      }
      setWs(undefined);
    };
  }, [url]);

  const startRecording = () => {
    if (recording) return;
    navigator.mediaDevices
      .getUserMedia({
        audio: true,
      })
      .then(function (audioStream) {
        setRecording(true);
        const record = new RecordRTC(audioStream, {
          type: "audio",

          //6)
          mimeType: "audio/wav",
          sampleRate: 16000,
          // used by StereoAudioRecorder
          // the range 22050 to 96000.
          // let us force 16khz recording:
          desiredSampRate: 16000,

          bufferSize: 256,

          // MediaStreamRecorder, StereoAudioRecorder, WebAssemblyRecorder
          // CanvasRecorder, GifRecorder, WhammyRecorder
          recorderType: StereoAudioRecorder,

          // Dialogflow / STT requires mono audio
          numberOfAudioChannels: 1,
        });

        record.startRecording();

        setRecordAudio(record);
      })
      .catch(function (e) {
        console.error(e);
        message.error(e.message);
      });
  };

  const endRecording = () => {
    if (!recording) return;
    setRecording(false);
    if (!recordAudio || !ws) return;
    recordAudio.stopRecording(function () {
      let blob = recordAudio.getBlob();
      ws.send(blob);
      message.success("发送语音");
    });
  };

  const gamepadPress = ({ detail: { index, value } }) => {
    if (index === 2) {
      if (value > 0.5) {
        startRecording();
      } else {
        endRecording();
      }
    }
  };

  useKeyPress("space", startRecording);
  useKeyPress("space", endRecording, { events: ["keyup"] });

  useEventListener("gamepadpress", gamepadPress);

  return (
    <Popover
      visible={recording}
      placement="leftBottom"
      content={
        <img className="select-disabled recording-img" src={gif} alt="录音中" />
      }
    >
      <Button
        className="record-button"
        size="large"
        disabled={!enabled}
        shape="circle"
        onTouchStart={startRecording}
        onTouchEnd={endRecording}
        icon={<AudioOutlined />}
      />
    </Popover>
  );
}
Example #4
Source File: Status.js    From network-rc with Apache License 2.0 4 votes vote down vote up
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>
  );
}