feat: add azure api

Author: ElmTran

electron/main/index.ts

@@ -3,7 +3,7 @@ import { release } from "os";
 import { join } from "path";
 import api from "../utils/api";
 import edgeApi from "../utils/edge-api";
-
+import azureApi from "../utils/azure-api";
 import logger from "../utils/log";
 
 // Disable GPU Acceleration for Windows 7
@@ -183,6 +183,11 @@ ipcMain.handle("edgeApi", async (event, ssml) => {
   return res;
 });
 
+ipcMain.handle("azureApi", async (event, ssml, key, region) => {
+    const res = azureApi(ssml, key, region)
+    return res;
+});
+
 ipcMain.handle("openFolderSelector", async (event) => {
   const path = dialog.showOpenDialogSync(win, {
     defaultPath: app.getPath("desktop"),

electron/utils/azure-api.ts

@@ -0,0 +1,33 @@
+import logger from "../utils/log";
+
+const azureApi = (ssml: string, key: string, region: string) => {
+    var sdk = require("microsoft-cognitiveservices-speech-sdk");
+    const speechConfig = sdk.SpeechConfig.fromSubscription(key, region);
+    speechConfig.setProperty(sdk.PropertyId.SpeechServiceResponse_RequestSentenceBoundary, "true");
+    var audio_config = sdk.AudioConfig.fromDefaultSpeakerOutput();
+    var speechSynthesizer = new sdk.SpeechSynthesizer(speechConfig, audio_config);
+    return new Promise((resolve, reject) => {
+        speechSynthesizer.speakSsmlAsync(
+            ssml,
+            (result: any) => {
+                if (result.reason === sdk.ResultReason.SynthesizingAudioCompleted) {
+                    logger.info(`Speech synthesized to speaker for text [${ssml}]`);
+                    resolve(Buffer.from(result.audioData));
+                } else {
+                    logger.info("Speech synthesis canceled, " + result.errorDetails + "\nDid you update the subscription info?");
+                    reject(result);
+                }
+                speechSynthesizer.close();
+                speechSynthesizer = null;
+            },
+            (err: any) => {
+                logger.info("Error synthesizing. " + err);
+                speechSynthesizer.close();
+                speechSynthesizer = null;
+            }
+        );
+    }
+    );
+}
+
+export default azureApi;

src/components/configpage/ConfigPage.vue

@@ -14,6 +14,23 @@
             </template>
           </el-input>
         </el-form-item>
+        <el-form-item label="SpeechKey">
+            <el-input
+              v-model="config.speechKey"
+              size="small"
+              class="input-path"
+              @change="setSpeechKey"
+              password
+              />
+        </el-form-item>
+        <el-form-item label="ServiceRegion">
+            <el-input
+              v-model="config.serviceRegion"
+              size="small"
+              class="input-path"
+              @change="setServiceRegion"
+              />
+        </el-form-item>
         <el-form-item label="自动播放(仅单文本模式)">
           <el-switch
             v-model="config.autoplay"
@@ -206,6 +223,24 @@ const updateTitleStyle = () => {
     duration: 2000,
   });
 };
+
+const setSpeechKey = () => {
+  ttsStore.setSpeechKey();
+  ElMessage({
+    message: "保存成功，请点击“刷新配置”立即应用。。",
+    type: "success",
+    duration: 2000,
+  });
+};
+
+const setServiceRegion = () => {
+  ttsStore.setServiceRegion();
+  ElMessage({
+    message: "保存成功，请点击“刷新配置”立即应用。。",
+    type: "success",
+    duration: 2000,
+  });
+};
 </script>
 
 <style scoped>
@@ -226,8 +261,9 @@ const updateTitleStyle = () => {
 .el-form {
   margin-top: 7px;
   border-right: 1px solid #dcdfe6;
-  width: calc(100% - 410px);
+  width: calc(100% - 395px);
   padding-left: 10px;
+  overflow-x: scroll;
 }
 :deep(.input-path .el-input-group__append) {
   display: inline-flex;
@@ -265,7 +301,7 @@ const updateTitleStyle = () => {
 .btns {
   width: 100%;
   box-sizing: border-box;
-  padding-right: 10px;
+  padding-right: 2px;
 }
 :deep(.btns .el-form-item__content) {
   justify-content: space-between;

src/components/main/MainOptions.vue

@@ -2,16 +2,18 @@
   <div class="options">
     <el-form :model="formConfig" label-width="120px" label-position="top">
       <el-form-item label="接口">
-        <el-switch
-          style="display: block"
+        <el-select
           v-model="formConfig.api"
-          active-color="#13ce66"
-          inactive-color="#ff4949"
-          active-text="微软TTS"
-          inactive-text="Edge朗读"
+          placeholder="选择接口"
           @change="apiChange"
-          :disabled="apiDisable">
-        </el-switch>
+          >
+          <el-option
+            v-for="item in oc.apiSelect"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+            />
+        </el-select>
       </el-form-item>
       <el-form-item label="语言">
         <el-select-v2
@@ -55,7 +57,7 @@
         <el-select
           v-model="formConfig.voiceStyleSelect"
           placeholder="选择说话风格"
-          :disabled="!formConfig.api"
+          :disabled="apiEdge"
         >
           <el-option
             v-for="item in voiceStyleSelectList"
@@ -73,7 +75,7 @@
         </el-select>
       </el-form-item>
       <el-form-item label="角色扮演">
-        <el-select v-model="formConfig.role" placeholder="选择角色" :disabled="!formConfig.api">
+        <el-select v-model="formConfig.role" placeholder="选择角色" :disabled="apiEdge">
           <el-option
             v-for="item in rolePlayList"
             :key="item"
@@ -161,19 +163,31 @@ const {
 const Store = require("electron-store");
 const store = new Store();
 
-if (!formConfig.value.hasOwnProperty("api")) {
-  formConfig.value.api = true;
-}
+// if (!formConfig.value.hasOwnProperty("api")) {
+//   formConfig.value.api = true;
+// }
+
+const apiEdge = ref(false);
 
-const apiChange = (res:boolean) => {
-  if (!res) {
+const apiChange = (res:number) => {
+  if (res === 2) {
+    apiEdge.value = true;
     ElMessage({
       message: `edge接口不支持自动切片，最长支持文本长度未知。请根据自身需求手动预处理文本。`,
       type: "warning",
       duration: 4000,
     });
+  } else {
+    if (res === 3 && (config.value.speechKey === "" || config.value.serviceRegion === "")) {
+      ElMessage({
+        message: `请先配置Azure的Speech服务密钥和区域。`,
+        type: "warning",
+        duration: 4000,
+      });
+        return;
+    }
+    apiEdge.value = false;
   }
-  
 }
 
 const audition = (value: string) => {

src/components/main/options-config.ts

@@ -207,8 +207,24 @@ const findVoicesByLocaleName = (localeName: any) => {
   return voices;
 };
 
+const apiSelect = [
+    {
+        value: 1,
+        label: "Microsoft Speech API",
+    },
+    {
+        value: 2,
+        label: "Edge Speech API",
+    },
+    {
+        value: 3,
+        label: "Azure Speech API",
+    },
+];
+
 export const optionsConfig = {
   voicesList,
   languageSelect,
   findVoicesByLocaleName,
+  apiSelect,
 };

src/global/initLocalStore.ts

@@ -21,6 +21,9 @@ export default async function initStore() {
     role: "",
     speed: 1.0,
     pitch: 1.0,
+    api: 1,
+    specchKey: "",
+    serviceRegion: "",
   });
 
   if (!store.has("savePath")) {

src/store/play.ts

@@ -9,10 +9,12 @@ async function getTTSData(
   role: string,
   rate = 0,
   pitch = 0,
-  api = true
+  api: number,
+  key: string,
+  region: string
 ) {
   let SSML = "";
-  if (inps.activeIndex == "1" && api) {
+  if (inps.activeIndex == "1" && (api == 1 || api == 3)) {
     SSML = `
     <speak xmlns="http://www.w3.org/2001/10/synthesis" xmlns:mstts="http://www.w3.org/2001/mstts" xmlns:emo="http://www.w3.org/2009/10/emotionml" version="1.0" xml:lang="en-US">
         <voice name="${voice}">
@@ -27,7 +29,7 @@ async function getTTSData(
     </speak>
     `;
   }
-  else if(inps.activeIndex == "1" && !api) {
+  else if (inps.activeIndex == "1" && api == 2) {
     SSML = `
     <speak xmlns="http://www.w3.org/2001/10/synthesis" xmlns:mstts="http://www.w3.org/2001/mstts" xmlns:emo="http://www.w3.org/2009/10/emotionml" version="1.0" xml:lang="en-US">
         <voice name="${voice}">
@@ -43,12 +45,15 @@ async function getTTSData(
   }
   ipcRenderer.send("log.info", SSML);
   console.log(SSML);
-  if (api) {
+  if (api == 1) {
     const result = await ipcRenderer.invoke("speech", SSML);
     return result;
-  } else {
+  } else if (api == 2) {
     const result = await ipcRenderer.invoke("edgeApi", SSML);
     return result;
+  } else {
+    const result = await ipcRenderer.invoke("azureApi", SSML, key, region);
+    return result;
   }
 }
 export default getTTSData;

src/store/store.ts

@@ -35,6 +35,9 @@ export const useTtsStore = defineStore("ttsStore", {
         autoplay: store.get("autoplay"),
         updateNotification: store.get("updateNotification"),
         titleStyle: store.get("titleStyle"),
+        api: store.get("api"),
+        speechKey: store.get("speechKey"),
+        serviceRegion: store.get("serviceRegion"),
       },
       isLoading: false,
       currMp3Buffer: Buffer.alloc(0),
@@ -90,6 +93,12 @@ export const useTtsStore = defineStore("ttsStore", {
     setAutoPlay() {
       store.set("autoplay", this.config.autoplay);
     },
+    setSpeechKey() {
+        store.set("speechKey", this.config.speechKey);
+    },
+    setServiceRegion() {
+        store.set("serviceRegion", this.config.serviceRegion);
+    },
     addFormConfig() {
       this.config.formConfigJson[this.currConfigName] = this.formConfig;
       this.genFormConfig();
@@ -124,7 +133,7 @@ export const useTtsStore = defineStore("ttsStore", {
               ? this.inputs.inputValue
               : this.inputs.ssmlValue,
         };
-        if (this.page.tabIndex == "1" && this.formConfig.api && this.inputs.inputValue.length > 400) {
+        if (this.page.tabIndex == "1" && this.formConfig.api == 1 && this.inputs.inputValue.length > 400) {
           const delimiters = "，。？,.?".split("");
           const maxSize = 300;
           ipcRenderer.send("log.info", "字数过多，正在对文本切片。。。");
@@ -165,7 +174,9 @@ export const useTtsStore = defineStore("ttsStore", {
                 this.formConfig.role,
                 (this.formConfig.speed - 1) * 100,
                 (this.formConfig.pitch - 1) * 50,
-                this.formConfig.api
+                this.formConfig.api,
+                this.config.speechKey,
+                this.config.serviceRegion
               );
               this.currMp3Buffer = Buffer.concat([this.currMp3Buffer, buffers]);
               ipcRenderer.send(
@@ -206,7 +217,9 @@ export const useTtsStore = defineStore("ttsStore", {
             this.formConfig.role,
             (this.formConfig.speed - 1) * 100,
             (this.formConfig.pitch - 1) * 50,
-            this.formConfig.api
+            this.formConfig.api,
+            this.config.speechKey,
+            this.config.serviceRegion
           )
             .then((mp3buffer: any) => {
               this.currMp3Buffer = mp3buffer;
@@ -261,7 +274,7 @@ export const useTtsStore = defineStore("ttsStore", {
               inps.inputValue = datastr;
               let buffer = Buffer.alloc(0);
 
-              if (datastr.length > 400 && this.formConfig.api) {
+              if (datastr.length > 400 && this.formConfig.api == 1) {
                 const delimiters = "，。？,.? ".split("");
                 const maxSize = 300;
                 ipcRenderer.send("log.info", "字数过多，正在对文本切片。。。");
@@ -302,7 +315,9 @@ export const useTtsStore = defineStore("ttsStore", {
                       this.formConfig.role,
                       (this.formConfig.speed - 1) * 100,
                       (this.formConfig.pitch - 1) * 50,
-                      this.formConfig.api
+                      this.formConfig.api,
+                      this.config.speechKey,
+                      this.config.serviceRegion
                     );
                     buffer = Buffer.concat([buffer, buffers]);
                     ipcRenderer.send(
@@ -347,7 +362,9 @@ export const useTtsStore = defineStore("ttsStore", {
                   this.formConfig.role,
                   (this.formConfig.speed - 1) * 100,
                   (this.formConfig.pitch - 1) * 50,
-                  this.formConfig.api
+                  this.formConfig.api,
+                  this.config.speechKey,
+                  this.config.serviceRegion
                 )
                   .then((mp3buffer: any) => {
                     fs.writeFileSync(filePath, mp3buffer);
@@ -410,7 +427,9 @@ export const useTtsStore = defineStore("ttsStore", {
         this.formConfig.role,
         (this.formConfig.speed - 1) * 100,
         (this.formConfig.pitch - 1) * 50,
-        this.formConfig.api
+        this.formConfig.api,
+        this.config.speechKey,
+        this.config.serviceRegion
       )
         .then((mp3buffer: any) => {
           this.currMp3Buffer = mp3buffer;