Add "save audio to file" function

src-tauri/Cargo.toml

@@ -17,7 +17,7 @@ tauri-build = { version = "1.2.1", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.2.4", features = ["app-all", "fs-all", "http-all", "shell-open", "updater", "window-all"] }
+tauri = { version = "1.2.4", features = ["app-all", "dialog-save", "fs-all", "http-all", "shell-open", "updater", "window-all"] }
 tauri-plugin-store = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "dev" }
 
 [features]

src-tauri/tauri.conf.json

@@ -13,6 +13,9 @@
     },
     "tauri": {
         "allowlist": {
+            "dialog": {
+                "save": true
+            },
             "shell": {
                 "open": true
             },

src/Block.tsx

@@ -27,6 +27,7 @@ import 'github-markdown-css/github-markdown-light.css'
 import mila from 'markdown-it-link-attributes';
 import { useTranslation, getI18n } from 'react-i18next';
 import { Message, OpenAIRoleEnum, OpenAIRoleEnumType } from './types';
+import { Say } from "./Say";
 
 // copy button html content
 // join at markdown-it parsed
@@ -79,17 +80,12 @@ export interface Props {
     copyMsg: () => void
     quoteMsg: () => void
 }
-
-let currentUtterance: SpeechSynthesisUtterance | null = null;
-let currentIndex: string = "-1";
 function _Block(props: Props) {
     const { t } = useTranslation()
     const { msg, setMsg } = props;
     const { speech } = props;
     const [isHovering, setIsHovering] = useState(false)
     const [isEditing, setIsEditing] = useState(false)
-    const [isSpeaking, setIsSpeaking] = useState(false)
-    const synth = window.speechSynthesis;
 
     // for debounce each render when 'props.msg' change
     const renderTimer = useRef<NodeJS.Timeout>();
@@ -122,43 +118,6 @@ function _Block(props: Props) {
         setAnchorEl(null);
     };
 
-    const handleSay = () => {
-        if (currentUtterance && currentIndex !== "-1") {
-            synth.cancel();
-            setIsSpeaking(false);
-            if (msg.id === currentIndex) {
-                currentUtterance = null;
-                currentIndex = "-1";
-                return;
-            }
-        }
-        const txt = msg.content?.trim() || ''
-        if (!txt) return;
-        const utterance = new SpeechSynthesisUtterance(txt);
-        const voices = speechSynthesis.getVoices();
-        // "speech_lang": "Microsoft Yaoyao - Chinese (Simplified, PRC)",
-        // "Microsoft Xiaoxiao Online (Natural) - Chinese (Mainland)"
-        let voice = voices.find(voice => voice.name === speech);
-        if (!voice) {
-            voice = voices.find(voice => voice.lang === 'zh-CN');
-        }
-        utterance.voice=voice?voice:null;
-        currentIndex = msg.id;
-        // utterance.lang = voice.lang;
-        // utterance.volume = 1;
-        // utterance.rate = 0.8;
-        // utterance.pitch = 1;
-        synth.speak(utterance);
-        setIsSpeaking(true);
-        currentUtterance = utterance;
-        currentIndex = msg.id;
-        utterance.onend = () => {
-            setIsSpeaking(false);
-            currentUtterance = null;
-            currentIndex = "-1";
-        }
-    };
-
     // stop action
     const onStop = useCallback(() => {
         msg?.cancel?.();
@@ -289,22 +248,7 @@ function _Block(props: Props) {
                                                     </IconButton>
                                                 )
                                         }
-                                        {
-                                            isSpeaking
-                                                ?(
-                                                    <IconButton onClick={()=>{
-                                                        handleSay()
-                                                    }} size='large' color='primary'>
-                                                        <VoiceOverOffIcon fontSize='small' />
-                                                    </IconButton>)
-                                                : (
-                                                    <IconButton onClick={()=>{
-                                                        handleSay()
-                                                    }} size='large' color='primary'>
-                                                        <RecordVoiceOverIcon fontSize='small' />
-                                                    </IconButton>
-                                                )
-                                        }
+                                        <Say {...props}/>
                                         <IconButton onClick={handleClick} size='large' color='primary'>
                                             <MoreVertIcon />
                                         </IconButton>

src/Say.tsx

@@ -0,0 +1,149 @@
+import {useState} from "react";
+import {Message} from "@/src/types";
+import { dialog,fs as taurifs } from '@tauri-apps/api';
+import {Props} from "@/src/Block";
+import {IconButton,Checkbox} from "@mui/material";
+
+import VoiceOverOffIcon from "@mui/icons-material/VoiceOverOff";
+import RecordVoiceOverIcon from "@mui/icons-material/RecordVoiceOver";
+import {useTranslation} from "react-i18next";
+
+let currentmediaRecorder : MediaRecorder | null = null;
+let currentUtterance: SpeechSynthesisUtterance | null = null;
+let currentIndex: string = "-1";
+const synth = window.speechSynthesis;
+
+function blobPartToArrayBuffer(blobParts:BlobPart[]) {
+    return new Promise ((resolve, reject) => {
+        const fileReader = new FileReader();
+        fileReader.onload = () => {
+            resolve(fileReader.result);
+        };
+        fileReader.onerror = () => {
+            reject(fileReader.error);
+        };
+        fileReader.readAsArrayBuffer(new Blob(blobParts));
+    });
+}
+export function Say(props: Props) {
+    const { t } = useTranslation()
+    const [isSpeaking, setIsSpeaking] = useState(false)
+    const [checked, setChecked] = useState(false);
+    const { msg } = props;
+    const { speech } = props;
+
+    const handleSay = (msg:Message,speech:String|null) => {
+        if (currentUtterance && currentIndex !== "-1") {
+            synth.cancel();
+            if(currentmediaRecorder)currentmediaRecorder.stop();
+            currentmediaRecorder=null;
+            setIsSpeaking(false);
+            if (msg.id === currentIndex) {
+                currentUtterance = null;
+                currentIndex = "-1";
+                return;
+            }
+        }
+        const txt = msg.content?.trim() || ''
+        if (!txt) return;
+        const utterance = new SpeechSynthesisUtterance(txt);
+        const voices = speechSynthesis.getVoices();
+        // "speech_lang": "Microsoft Yaoyao - Chinese (Simplified, PRC)",
+        // "Microsoft Xiaoxiao Online (Natural) - Chinese (Mainland)"
+        let voice = voices.find(voice => voice.name === speech);
+        if (!voice) {
+            voice = voices.find(voice => voice.lang === 'zh-CN');
+        }
+        utterance.voice=voice?voice:null;
+        currentIndex = msg.id;
+        // utterance.lang = voice.lang;
+        // utterance.volume = 1;
+        // utterance.rate = 0.8;
+        // utterance.pitch = 1;
+        if(checked) {
+            audioSave().then(() => {
+                synth.speak(utterance);
+                setIsSpeaking(true);
+                currentUtterance = utterance;
+                currentIndex = msg.id;
+            });
+        }else{
+            synth.speak(utterance);
+            setIsSpeaking(true);
+            currentUtterance = utterance;
+            currentIndex = msg.id;
+        }
+        utterance.onend = () => {
+            if(currentmediaRecorder)
+                currentmediaRecorder.stop();
+            currentmediaRecorder=null;
+            setIsSpeaking(false);
+            currentUtterance = null;
+            currentIndex = "-1";
+        }
+    };
+    const audioSave = async () => {
+        const options = {
+            defaultPath: 'audio.mp3',
+            filters: [{name: 'Audio Files', extensions: ['mp3']}]
+        };
+        let filename: string= options.defaultPath;
+        filename = await dialog.save(options) as string;
+        console.log('Selected file:', filename);
+        const constraints = {audio: true};
+        navigator.mediaDevices.getUserMedia(constraints)
+            .then(stream => {
+                const chunks: BlobPart[] | undefined = [];
+                const mediaRecorder = new MediaRecorder(stream);
+                currentmediaRecorder = mediaRecorder;
+                mediaRecorder.addEventListener('dataavailable', event => {
+                    chunks.push(event.data);
+                });
+
+                mediaRecorder.addEventListener('stop', () => {
+                    stream.getTracks().forEach(track => track.stop());
+                    if(filename!=null) {
+                        blobPartToArrayBuffer(chunks).then((data)=> {
+                            taurifs.writeBinaryFile(filename,
+                                data as ArrayBuffer);
+                        });
+                    }
+                });
+                mediaRecorder.start();
+                setTimeout(() => {
+                    mediaRecorder.stop();
+                    stream.getTracks().forEach(track => track.stop());
+                }, 1000*60*10);
+            })
+            .catch(error => {
+                console.error(error);
+            });
+    };
+
+    return (
+        isSpeaking
+        ?(
+            <IconButton onClick={()=> {
+                handleSay(msg,speech)
+            }} size='large' color='primary'>
+                <VoiceOverOffIcon fontSize='small' />
+            </IconButton>)
+        : (
+            <>
+                <IconButton onClick={()=>{
+                    handleSay(msg,speech)
+                }} size='large' color='primary'>
+                    <RecordVoiceOverIcon fontSize='small' />
+                </IconButton>
+                <Checkbox
+                    checked={checked}
+                    onChange={(event) => {
+                        setChecked(event.target.checked);
+                    }
+                }
+                    title={t('save audio to file') as string}
+                />
+            </>
+        )
+    );
+}

src/i18n/locales/en/translation.json

@@ -3,6 +3,7 @@
   "theme": "Theme",
   "openai api key": "OpenAI API Key",
   "speech language": "Speech Language",
+  "save audio to file": "save audio to file",
   "show word count": "Show word count",
   "show estimated token count": "Show estimated token count",
   "proxy": "Proxy",

src/i18n/locales/zh-Hans/translation.json

@@ -3,6 +3,7 @@
   "theme": "主题",
   "openai api key": "OpenAI API 密钥",
   "speech language": "语音语言",
+  "save audio to file": "保存声音文件",
   "show word count": "显示字数统计",
   "show estimated token count": "显示预估 Token 字数统计",
   "proxy": "代理",

src/i18n/locales/zh-Hant/translation.json

@@ -3,6 +3,7 @@
   "theme": "主題",
   "openai api key": "OpenAI API 金鑰",
   "speech language": "言語語言",
+  "save audio to file": "保存聲音檔案",
   "show word count": "顯示字數",
   "show estimated token count": "顯示預估 Token 數",
   "proxy": "代理",