chore: speech to text

src/components/audio-player/index.less

@@ -0,0 +1,53 @@
+.player-wrap {
+  width: 100%;
+  display: flex;
+  background-color: var(--ant-color-fill-quaternary);
+  border-radius: 36px;
+
+  .player-ui {
+    padding: 5px 10px;
+    flex: 1;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .play-content {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex: 1;
+  }
+
+  .time {
+    &.current {
+      margin-left: 6px;
+    }
+  }
+
+  .progress-bar {
+    margin-inline: 10px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    .slider {
+      width: 100%;
+    }
+
+    .file-name {
+      line-height: 20px;
+      height: 20px;
+    }
+
+    .ant-slider-horizontal {
+      margin-block: 2px;
+    }
+  }
+
+  .speaker {
+    margin-left: 10px;
+  }
+}

src/components/audio-player/index.tsx

@@ -0,0 +1,191 @@
+import { formatTime } from '@/utils/index';
+import { PauseCircleFilled, PlayCircleFilled } from '@ant-design/icons';
+import { Button, Slider } from 'antd';
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle
+} from 'react';
+import IconFont from '../icon-font';
+import './index.less';
+
+interface AudioPlayerProps {
+  autoplay?: boolean;
+  url: string;
+  speed?: number;
+  ref?: any;
+  name: string;
+  height?: number;
+  width?: number;
+  duration?: number;
+}
+
+const AudioPlayer: React.FC<AudioPlayerProps> = forwardRef((props, ref) => {
+  const { autoplay = false, speed: defaultSpeed = 1 } = props;
+  const audioRef = React.useRef<HTMLAudioElement>(null);
+  const [audioState, setAudioState] = React.useState<{
+    currentTime: number;
+    duration: number;
+  }>({
+    currentTime: 0,
+    duration: 0
+  });
+  const [playOn, setPlayOn] = React.useState<boolean>(false);
+  const [speakerOn, setSpeakerOn] = React.useState<boolean>(false);
+  const [volume, setVolume] = React.useState<number>(0.5);
+  const [speed, setSpeed] = React.useState<number>(defaultSpeed);
+  const timer = React.useRef<any>(null);
+
+  useImperativeHandle(ref, () => ({
+    play: () => {
+      audioRef.current?.play();
+    },
+    pause: () => {
+      audioRef.current?.pause();
+    }
+  }));
+
+  const handleAudioOnPlay = useCallback(() => {
+    timer.current = setInterval(() => {
+      setAudioState((prestate) => {
+        return {
+          currentTime: Math.ceil(audioRef.current?.currentTime || 0),
+          duration:
+            prestate.duration || Math.ceil(audioRef.current?.duration || 0)
+        };
+      });
+
+      if (audioRef.current?.paused || audioRef.current?.ended) {
+        clearInterval(timer.current);
+        setPlayOn(false);
+        setAudioState((prestate: any) => {
+          return {
+            currentTime: 0,
+            duration: prestate.duration
+          };
+        });
+      }
+    }, 500);
+  }, []);
+
+  const handlePlay = useCallback(() => {
+    if (playOn) {
+      audioRef.current?.pause();
+    } else {
+      audioRef.current?.play();
+    }
+    setPlayOn(!playOn);
+  }, [playOn]);
+
+  const initPlayerConfig = useCallback(() => {
+    // set volume
+    audioRef.current!.volume = volume;
+    // set playback rate
+    audioRef.current!.playbackRate = speed;
+  }, []);
+
+  const handleLoadedMetadata = useCallback(
+    (data: any) => {
+      const duration = Math.ceil(audioRef.current?.duration || 0);
+      setAudioState({
+        currentTime: 0,
+        duration:
+          duration && duration !== Infinity ? duration : props.duration || 0
+      });
+      setPlayOn(autoplay);
+    },
+    [autoplay, props.duration]
+  );
+
+  const handleCurrentChange = useCallback((val: number) => {
+    audioRef.current!.currentTime = val;
+    setAudioState((prestate) => {
+      return {
+        currentTime: val,
+        duration: prestate.duration
+      };
+    });
+  }, []);
+
+  useEffect(() => {
+    if (audioRef.current) {
+      initPlayerConfig();
+    }
+  }, [audioRef.current]);
+
+  useEffect(() => {
+    return () => {
+      clearInterval(timer.current);
+    };
+  }, []);
+
+  return (
+    <div className="player-wrap" style={{ width: props.width || '100%' }}>
+      <div className="player-ui">
+        <span className="play-btn">
+          <Button
+            size="middle"
+            type="text"
+            onClick={handlePlay}
+            icon={
+              !playOn ? (
+                <PlayCircleFilled
+                  style={{ fontSize: '22px' }}
+                ></PlayCircleFilled>
+              ) : (
+                <PauseCircleFilled
+                  style={{ fontSize: '22px' }}
+                ></PauseCircleFilled>
+              )
+            }
+          ></Button>
+        </span>
+        <div className="play-content">
+          <span className="time current">
+            {' '}
+            {formatTime(audioState.currentTime)}
+          </span>
+          <div className="progress-bar">
+            <span className="file-name">{props.name}</span>
+            <div className="slider">
+              <Slider
+                tooltip={{ open: false }}
+                min={0}
+                max={audioState.duration}
+                value={audioState.currentTime}
+                onChange={handleCurrentChange}
+              />
+            </div>
+            <span>{props.speed ? `${props.speed}x` : '1x'}</span>
+          </div>
+          <span className="time">{formatTime(audioState.duration)}</span>
+        </div>
+        <span className="speaker">
+          <Button
+            size="middle"
+            type="text"
+            icon={
+              <IconFont
+                type="icon-SpeakerHigh"
+                style={{ fontSize: '22px' }}
+              ></IconFont>
+            }
+          ></Button>
+        </span>
+      </div>
+      <audio
+        controls
+        autoPlay={autoplay}
+        src={props.url}
+        ref={audioRef}
+        preload="metadata"
+        style={{ display: 'none' }}
+        onPlay={handleAudioOnPlay}
+        onLoadedMetadata={handleLoadedMetadata}
+      ></audio>
+    </div>
+  );
+});
+
+export default React.memo(AudioPlayer);