diff --git a/vocodes/src/v2/view/tts/tts_result_view/TtsResultAudioPlayerFc.tsx b/vocodes/src/v2/view/tts/tts_result_view/TtsResultAudioPlayerFc.tsx index 821b3a541d..73c7775f45 100644 --- a/vocodes/src/v2/view/tts/tts_result_view/TtsResultAudioPlayerFc.tsx +++ b/vocodes/src/v2/view/tts/tts_result_view/TtsResultAudioPlayerFc.tsx @@ -8,6 +8,12 @@ import { PauseIcon } from '../../_icons/PauseIcon'; import { RepeatIcon } from '../../_icons/RepeatIcon'; import { ArrowRightIcon } from '../../_icons/ArrowRightIcon'; +enum PlaybackSpeed { + HALF, + NORMAL, + DOUBLE, +} + interface Props { ttsResult: TtsResult, } @@ -15,6 +21,7 @@ interface Props { function TtsResultAudioPlayerFc(props: Props) { let [isPlaying, setIsPlaying] = useState(false); let [isRepeating, setIsRepeating] = useState(false); + let [playbackSpeed, setPlaybackSpeed] = useState(PlaybackSpeed.NORMAL); let [waveSurfer, setWaveSurfer] = useState(null); useEffect(() => { @@ -41,7 +48,7 @@ function TtsResultAudioPlayerFc(props: Props) { useEffect(() => { if (waveSurfer) { - waveSurfer.unAll(); + waveSurfer.unAll(); // NB: Otherwise we keep reinstalling the hooks and cause chaos waveSurfer.on('pause', () => { setIsPlaying(false); }) @@ -64,6 +71,24 @@ function TtsResultAudioPlayerFc(props: Props) { setIsRepeating(!isRepeating) } + const togglePlaybackSpeed = () => { + let nextSpeed = PlaybackSpeed.NORMAL; + switch (playbackSpeed) { + case PlaybackSpeed.NORMAL: + nextSpeed = PlaybackSpeed.DOUBLE; + waveSurfer!.setPlaybackRate(1.5); // Okay, so a lie... + break; + case PlaybackSpeed.DOUBLE: + nextSpeed = PlaybackSpeed.HALF; + waveSurfer!.setPlaybackRate(0.5); + break; + case PlaybackSpeed.HALF: + nextSpeed = PlaybackSpeed.NORMAL; + waveSurfer!.setPlaybackRate(1.0); + break; + } + setPlaybackSpeed(nextSpeed); + } let playButtonText = <>; if (isPlaying) { @@ -72,6 +97,19 @@ function TtsResultAudioPlayerFc(props: Props) { let repeatButtonText = isRepeating ? : ; + let speedButtonText = '1x'; + switch (playbackSpeed) { + case PlaybackSpeed.NORMAL: + speedButtonText = '1x'; + break; + case PlaybackSpeed.DOUBLE: + speedButtonText = '2x'; + break; + case PlaybackSpeed.HALF: + speedButtonText = '1/2x'; + break; + } + return (
@@ -85,6 +123,10 @@ function TtsResultAudioPlayerFc(props: Props) { + +