@ant-design/icons#PauseCircleOutlined JavaScript Examples

AudioControls = ({ item, store }) => {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", marginTop: "1em" }}>
      <Button
        type="primary"
        onClick={() => {
          item._ws.playPause();
        }}
      >
        {item.playing && (
          <Fragment>
            <PauseCircleOutlined /> <span>Pause</span>
            {store.settings.enableTooltips && store.settings.enableHotkeys && item.hotkey && (
              <Hint>[{item.hotkey}]</Hint>
            )}
          </Fragment>
        )}
        {!item.playing && (
          <Fragment>
            <PlayCircleOutlined /> <span>Play</span>
            {store.settings.enableTooltips && store.settings.enableHotkeys && item.hotkey && (
              <Hint>[{item.hotkey}]</Hint>
            )}
          </Fragment>
        )}
      </Button>
    </div>
  );
}

Phrases = observer(({ item }) => {
  const cls = item.layoutClasses;
  const withAudio = !!item.audio;

  if (!item._value) return null;

  const val = item._value.map((v, idx) => {
    const style = item.layoutStyles(v);
    const classNames = [styles.phrase];
    const isContentVisible = item.isVisibleForAuthorFilter(v);

    if (withAudio) classNames.push(styles.withAudio);
    if (!isContentVisible) classNames.push(styles.collapsed);
    if (getRoot(item).settings.showLineNumbers) classNames.push(styles.numbered);

    return (
      <div key={`${item.name}-${idx}`} className={classNames.join(" ")} style={style.phrase}>
        {isContentVisible && withAudio && !isNaN(v.start) && (
          <Button
            type="text"
            className={styles.play}
            icon={item.playingId === idx ? <PauseCircleOutlined /> : <PlayCircleOutlined />}
            onClick={() => item.play(idx)}
          />
        )}
        <span className={cls.name}>{v[item.namekey]}</span>
        <span className={cls.text}>{v[item.textkey]}</span>
      </div>
    );
  });

  return val;
})

initPlayer(sessionId) {
        const RECORDING_URL = `${server}/sessions/${sessionId}/recording?X-Auth-Token=${getToken()}`;

        const display = document.getElementById('display');

        const tunnel = new Guacamole.StaticHTTPTunnel(RECORDING_URL);
        const recording = new Guacamole.SessionRecording(tunnel);

        const recordingDisplay = recording.getDisplay();

        /**
         * Converts the given number to a string, adding leading zeroes as necessary
         * to reach a specific minimum length.
         *
         * @param {Numer} num
         *     The number to convert to a string.
         *
         * @param {Number} minLength
         *     The minimum length of the resulting string, in characters.
         *
         * @returns {String}
         *     A string representation of the given number, with leading zeroes
         *     added as necessary to reach the specified minimum length.
         */
        const zeroPad = function zeroPad(num, minLength) {

            // Convert provided number to string
            var str = num.toString();

            // Add leading zeroes until string is long enough
            while (str.length < minLength)
                str = '0' + str;

            return str;

        };

        /**
         * Converts the given millisecond timestamp into a human-readable string in
         * MM:SS format.
         *
         * @param {Number} millis
         *     An arbitrary timestamp, in milliseconds.
         *
         * @returns {String}
         *     A human-readable string representation of the given timestamp, in
         *     MM:SS format.
         */
        const formatTime = function formatTime(millis) {

            // Calculate total number of whole seconds
            var totalSeconds = Math.floor(millis / 1000);

            // Split into seconds and minutes
            var seconds = totalSeconds % 60;
            var minutes = Math.floor(totalSeconds / 60);

            // Format seconds and minutes as MM:SS
            return zeroPad(minutes, 2) + ':' + zeroPad(seconds, 2);

        };

        // Add playback display to DOM
        display.appendChild(recordingDisplay.getElement());

        // Begin downloading the recording
        recording.connect();

        // If playing, the play/pause button should read "Pause"
        recording.onplay = () => {
            // 暂停
            this.setState({
                playPauseIcon: <PauseCircleOutlined/>,
                playPauseIconTitle: '暂停',
            })
        };

        // If paused, the play/pause button should read "Play"
        recording.onpause = () => {
            // 播放
            this.setState({
                playPauseIcon: <PlayCircleOutlined/>,
                playPauseIconTitle: '播放',
            })
        };

        // Toggle play/pause when display or button are clicked
        display.onclick = this.handlePlayPause;

        // Fit display within containing div
        recordingDisplay.onresize = function displayResized(width, height) {

            // Do not scale if display has no width
            if (!width)
                return;

            // Scale display to fit width of container
            recordingDisplay.scale(display.offsetWidth / width);
        };

        recording.onseek = (millis) => {
            this.setState({
                percent: millis,
                position: formatTime(millis)
            })
        };

        recording.onprogress = (millis) => {
            this.setState({
                max: millis,
                duration: formatTime(millis)
            })
        };

        this.setState({
            recording: recording
        }, () => {
            this.handlePlayPause();
        });
    }