feat: playback rate

client/src/components/Chat/Input/StreamAudio.tsx

@@ -21,6 +21,8 @@ export default function StreamAudio({ index = 0 }) {
   const [isFetching, setIsFetching] = useState(false);
 
   const cacheTTS = useRecoilValue(store.cacheTTS);
+  const playbackRate = useRecoilValue(store.playbackRate);
+
   const activeRunId = useRecoilValue(store.activeRunFamily(index));
   const isSubmitting = useRecoilValue(store.isSubmittingFamily(index));
   const latestMessage = useRecoilValue(store.latestMessageFamily(index));
@@ -156,6 +158,17 @@ export default function StreamAudio({ index = 0 }) {
     audioRef,
   ]);
 
+  useEffect(() => {
+    if (
+      playbackRate &&
+      globalAudioURL &&
+      audioRef.current &&
+      audioRef.current.playbackRate !== playbackRate
+    ) {
+      audioRef.current.playbackRate = playbackRate;
+    }
+  }, [audioRef, globalAudioURL, playbackRate]);
+
   return (
     <audio
       ref={audioRef}

client/src/components/Nav/SettingsTabs/Speech/ConversationModeSwitch.tsx

@@ -35,7 +35,7 @@ export default function ConversationModeSwitch({
       </div>
       <div className="flex items-center justify-between">
         <label
-          className="flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal transition-colors hover:bg-gray-100 hover:text-green-700 dark:bg-transparent dark:text-white dark:hover:bg-gray-600 dark:hover:text-green-500"
+          className="flex h-auto cursor-pointer items-center rounded border border-gray-500/70 bg-transparent px-2 py-1 text-xs font-medium font-normal transition-colors hover:border-gray-500/95 hover:bg-gray-100 hover:text-green-700 dark:bg-transparent dark:text-white dark:hover:bg-gray-600 dark:hover:text-green-500"
           onClick={() => setAdvancedMode(!advancedMode)}
         >
           <span>{advancedMode ? 'Advanced Mode' : 'Simple Mode'}</span>

client/src/components/Nav/SettingsTabs/Speech/STT/DecibelSelector.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import { Slider, InputNumber } from '~/components/ui';
 import { useLocalize } from '~/hooks';
 import store from '~/store';
 import { cn, defaultTextProps, optionText } from '~/utils/';
 
 export default function DecibelSelector() {
   const localize = useLocalize();
+  const speechToText = useRecoilValue(store.SpeechToText);
   const [decibelValue, setDecibelValue] = useRecoilState(store.decibelValue);
-  const [speechToText] = useRecoilState<boolean>(store.SpeechToText);
 
   return (
     <div className="flex items-center justify-between">

client/src/components/Nav/SettingsTabs/Speech/Speech.tsx

@@ -5,13 +5,19 @@ import { useRecoilState } from 'recoil';
 import { useOnClickOutside } from '~/hooks';
 import store from '~/store';
 import ConversationModeSwitch from './ConversationModeSwitch';
-import { TextToSpeechSwitch, EngineTTSDropdown, CacheTTSSwitch, VoiceDropdown } from './TTS';
 import {
+  TextToSpeechSwitch,
+  EngineTTSDropdown,
+  CacheTTSSwitch,
+  VoiceDropdown,
+  PlaybackRate,
+} from './TTS';
+import {
+  DecibelSelector,
+  EngineSTTDropdown,
   SpeechToTextSwitch,
   AutoSendTextSwitch,
   AutoTranscribeAudioSwitch,
-  DecibelSelector,
-  EngineSTTDropdown,
 } from './STT';
 
 function Speech() {
@@ -26,7 +32,7 @@ function Speech() {
     <Tabs.Content
       value={SettingsTabValues.SPEECH}
       role="tabpanel"
-      className="w-full md:min-h-[300px]"
+      className="w-full px-4 md:min-h-[300px]"
       ref={contentRef}
     >
       <div className="flex flex-col gap-3 text-sm text-gray-600 dark:text-gray-50">
@@ -65,6 +71,9 @@ function Speech() {
         <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
           <VoiceDropdown />
         </div>
+        <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
+          <PlaybackRate />
+        </div>
         {advancedMode && (
           <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
             <CacheTTSSwitch />

client/src/components/Nav/SettingsTabs/Speech/TTS/PlaybackRate.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { Slider, InputNumber } from '~/components/ui';
+import { useLocalize } from '~/hooks';
+import store from '~/store';
+import { cn, defaultTextProps, optionText } from '~/utils/';
+
+export default function DecibelSelector() {
+  const localize = useLocalize();
+  const textToSpeech = useRecoilValue(store.TextToSpeech);
+  const [playbackRate, setPlaybackRate] = useRecoilState(store.playbackRate);
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center justify-between">
+        <div>{localize('com_nav_playback_rate')}</div>
+        <div className="w-2" />
+        <small className="opacity-40">({localize('com_endpoint_default_with_num', '1')})</small>
+      </div>
+      <div className="flex items-center justify-between">
+        <Slider
+          value={[playbackRate ?? 1]}
+          onValueChange={(value) => setPlaybackRate(value[0])}
+          doubleClickHandler={() => setPlaybackRate(null)}
+          min={-0.1}
+          max={2}
+          step={0.1}
+          className="ml-4 flex h-4 w-24"
+          disabled={!textToSpeech}
+        />
+        <div className="w-2" />
+        <InputNumber
+          value={playbackRate ?? 1}
+          disabled={!textToSpeech}
+          onChange={(value) => setPlaybackRate(value ? value[0] : 0)}
+          min={-0.1}
+          max={2}
+          className={cn(
+            defaultTextProps,
+            cn(
+              optionText,
+              'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
+            ),
+          )}
+        />
+      </div>
+    </div>
+  );
+}

client/src/components/Nav/SettingsTabs/Speech/TTS/index.ts

@@ -1,4 +1,5 @@
 export { default as CacheTTSSwitch } from './CacheTTSSwitch';
 export { default as EngineTTSDropdown } from './EngineTTSDropdown';
+export { default as PlaybackRate } from './PlaybackRate';
 export { default as TextToSpeechSwitch } from './TextToSpeechSwitch';
 export { default as VoiceDropdown } from './VoiceDropdown';

client/src/hooks/Input/useTextToSpeechExternal.ts

@@ -1,4 +1,4 @@
-import { useRecoilState } from 'recoil';
+import { useRecoilValue } from 'recoil';
 import { useCallback, useEffect, useState } from 'react';
 import { useTextToSpeechMutation } from '~/data-provider';
 import { useToastContext } from '~/Providers';
@@ -13,8 +13,9 @@ const createFormData = (text: string, voice: string) => {
 
 function useTextToSpeechExternal() {
   const { showToast } = useToastContext();
-  const [voice] = useRecoilState<string>(store.voice);
-  const [cacheTTS] = useRecoilState<boolean>(store.cacheTTS);
+  const voice = useRecoilValue(store.voice);
+  const cacheTTS = useRecoilValue(store.cacheTTS);
+  const playbackRate = useRecoilValue(store.playbackRate);
 
   const [isSpeaking, setIsSpeaking] = useState(false);
   const [text, setText] = useState<string | null>(null);
@@ -24,6 +25,9 @@ function useTextToSpeechExternal() {
 
   const playAudio = (blobUrl: string) => {
     const newAudio = new Audio(blobUrl);
+    if (playbackRate && playbackRate !== 1) {
+      newAudio.playbackRate = playbackRate;
+    }
 
     newAudio
       .play()

client/src/localization/languages/Eng.ts

@@ -548,6 +548,7 @@ export default {
   com_nav_auto_send_text: 'Auto send text (after 3 sec)',
   com_nav_auto_transcribe_audio: 'Auto transcribe audio',
   com_nav_db_sensitivity: 'Decibel sensitivity',
+  com_nav_playback_rate: 'Audio Playback Rate',
   com_nav_engine: 'Engine',
   com_nav_browser: 'Browser',
   com_nav_external: 'External',

client/src/store/settings.ts

@@ -62,6 +62,7 @@ const localStorageAtoms = {
   forkSetting: atomWithLocalStorage('forkSetting', ''),
   splitAtTarget: atomWithLocalStorage('splitAtTarget', false),
   rememberForkOption: atomWithLocalStorage('rememberForkOption', true),
+  playbackRate: atomWithLocalStorage<number | null>('playbackRate', null),
 };
 
 export default { ...staticAtoms, ...localStorageAtoms };