@lobehub/ui 1.111.2 → 1.112.0

package/es/useTTS/hooks/useAzureSpeech.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="node" />
 /// <reference types="react" />
-import { AzureSpeechEnv } from '../services/postAzureSpeech';
-import { SsmlOptions } from '../utils/genSSML';
-export declare const useAzureSpeech: (defaultText: string, options: SsmlOptions, env: AzureSpeechEnv) => {
-    data: Buffer | undefined;
+import { AzureSpeechOptions } from '../services/postAzureSpeech';
+export declare const useAzureSpeech: (defaultText: string, options: AzureSpeechOptions) => {
+    data: AudioBufferSourceNode | undefined;
     isLoading: boolean;
+    isPlaying: boolean;
     setText: import("react").Dispatch<import("react").SetStateAction<string>>;
     start: () => void;
     stop: () => void;

package/es/useTTS/hooks/useAzureSpeech.js

@@ -2,37 +2,62 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { useState } from 'react';
 import useSWR from 'swr';
 import { postAzureSpeech } from "../services/postAzureSpeech";
-export var useAzureSpeech = function useAzureSpeech(defaultText, options, env) {
-  var _useState = useState(defaultText),
+export var useAzureSpeech = function useAzureSpeech(defaultText, options) {
+  var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
-    text = _useState2[0],
-    setText = _useState2[1];
-  var _useState3 = useState(false),
+    data = _useState2[0],
+    setDate = _useState2[1];
+  var _useState3 = useState(defaultText),
     _useState4 = _slicedToArray(_useState3, 2),
-    shouldFetch = _useState4[0],
-    setShouldFetch = _useState4[1];
+    text = _useState4[0],
+    setText = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    shouldFetch = _useState6[0],
+    setShouldFetch = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isPlaying = _useState8[0],
+    setIsPlaying = _useState8[1];
   var _useSWR = useSWR(shouldFetch ? [options.name, text].join('-') : null, function () {
-      return postAzureSpeech(text, options, env);
+      return postAzureSpeech(text, options);
     }, {
-      onError: function onError(error) {
-        setShouldFetch(false);
-        console.error(error);
+      onError: function onError() {
+        return setShouldFetch(false);
       },
-      onSuccess: function onSuccess() {
+      onSuccess: function onSuccess(audioBufferSource) {
         setShouldFetch(false);
+        setIsPlaying(true);
+        setDate(audioBufferSource);
+        audioBufferSource.start();
+        audioBufferSource.addEventListener('ended', function () {
+          setShouldFetch(false);
+          setIsPlaying(false);
+        });
       }
     }),
-    isLoading = _useSWR.isLoading,
-    data = _useSWR.data;
+    isLoading = _useSWR.isLoading;
   return {
     data: data,
     isLoading: isLoading,
+    isPlaying: isPlaying,
     setText: setText,
     start: function start() {
+      if (isPlaying || shouldFetch) return;
       setShouldFetch(true);
+      if (!data) return;
+      try {
+        setIsPlaying(true);
+        data === null || data === void 0 || data.start();
+      } catch (_unused) {}
     },
     stop: function stop() {
+      if (!isPlaying) return;
       setShouldFetch(false);
+      setIsPlaying(false);
+      try {
+        data === null || data === void 0 || data.stop();
+      } catch (_unused2) {}
     }
   };
 };

package/es/useTTS/hooks/useMicrosoftSpeech.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
-import { SsmlOptions } from '../utils/genSSML';
-export declare const useMicrosoftSpeech: (defaultText: string, options: SsmlOptions) => {
-    data: ArrayBuffer | undefined;
+import { type MicrosoftSpeechOptions } from '../services/postMicrosoftSpeech';
+export declare const useMicrosoftSpeech: (defaultText: string, options: MicrosoftSpeechOptions) => {
+    data: AudioBufferSourceNode | undefined;
     isLoading: boolean;
+    isPlaying: boolean;
     setText: import("react").Dispatch<import("react").SetStateAction<string>>;
     start: () => void;
     stop: () => void;

package/es/useTTS/hooks/useMicrosoftSpeech.js

@@ -3,36 +3,61 @@ import { useState } from 'react';
 import useSWR from 'swr';
 import { postMicrosoftSpeech } from "../services/postMicrosoftSpeech";
 export var useMicrosoftSpeech = function useMicrosoftSpeech(defaultText, options) {
-  var _useState = useState(defaultText),
+  var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
-    text = _useState2[0],
-    setText = _useState2[1];
-  var _useState3 = useState(false),
+    data = _useState2[0],
+    setDate = _useState2[1];
+  var _useState3 = useState(defaultText),
     _useState4 = _slicedToArray(_useState3, 2),
-    shouldFetch = _useState4[0],
-    setShouldFetch = _useState4[1];
+    text = _useState4[0],
+    setText = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    shouldFetch = _useState6[0],
+    setShouldFetch = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isPlaying = _useState8[0],
+    setIsPlaying = _useState8[1];
   var _useSWR = useSWR(shouldFetch ? [options.name, text].join('-') : null, function () {
       return postMicrosoftSpeech(text, options);
     }, {
-      onError: function onError(error) {
-        setShouldFetch(false);
-        console.error(error);
+      onError: function onError() {
+        return setShouldFetch(false);
       },
-      onSuccess: function onSuccess() {
+      onSuccess: function onSuccess(audioBufferSource) {
         setShouldFetch(false);
+        setIsPlaying(true);
+        setDate(audioBufferSource);
+        audioBufferSource.start();
+        audioBufferSource.addEventListener('ended', function () {
+          setShouldFetch(false);
+          setIsPlaying(false);
+        });
       }
     }),
-    isLoading = _useSWR.isLoading,
-    data = _useSWR.data;
+    isLoading = _useSWR.isLoading;
   return {
     data: data,
     isLoading: isLoading,
+    isPlaying: isPlaying,
     setText: setText,
     start: function start() {
+      if (isPlaying || shouldFetch) return;
       setShouldFetch(true);
+      if (!data) return;
+      try {
+        setIsPlaying(true);
+        data === null || data === void 0 || data.start();
+      } catch (_unused) {}
     },
     stop: function stop() {
+      if (!isPlaying) return;
       setShouldFetch(false);
+      setIsPlaying(false);
+      try {
+        data === null || data === void 0 || data.stop();
+      } catch (_unused2) {}
     }
   };
 };

package/es/useTTS/hooks/usePressSpeechRecognition.d.ts

@@ -0,0 +1,6 @@
+export declare const usePressSpeechRecognition: (locale: string) => {
+    isLoading: boolean;
+    start: () => void;
+    stop: () => void;
+    text: string;
+};

package/es/useTTS/hooks/usePressSpeechRecognition.js

@@ -0,0 +1,39 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useEffect, useState } from 'react';
+import { useSpeechRecognition } from "./useSpeechRecognition";
+export var usePressSpeechRecognition = function usePressSpeechRecognition(locale) {
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    texts = _useState2[0],
+    setTexts = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isGLobalLoading = _useState4[0],
+    setIsGlobalLoading = _useState4[1];
+  var _useSpeechRecognition = useSpeechRecognition(locale),
+    text = _useSpeechRecognition.text,
+    _stop = _useSpeechRecognition.stop,
+    _start = _useSpeechRecognition.start,
+    isLoading = _useSpeechRecognition.isLoading;
+  useEffect(function () {
+    if (!isLoading && text && texts.at(-1) !== text) {
+      setTexts([].concat(_toConsumableArray(texts), [text]));
+      _stop();
+      _start();
+    }
+  }, [isLoading, texts, text]);
+  return {
+    isLoading: isGLobalLoading,
+    start: function start() {
+      setTexts([]);
+      setIsGlobalLoading(true);
+      _start();
+    },
+    stop: function stop() {
+      _stop();
+      setIsGlobalLoading(false);
+    },
+    text: [].concat(_toConsumableArray(texts), [text]).filter(Boolean).join(',')
+  };
+};

package/es/useTTS/hooks/useSpeechSynthes.js

@@ -18,8 +18,8 @@ export var useSpeechSynthes = function useSpeechSynthes(defaultText, options) {
     utterance.voice = voiceList.find(function (item) {
       return item.name === options.name;
     });
-    if (options.pitch) utterance.pitch = options.pitch;
-    if (options.rate) utterance.rate = options.rate;
+    if (options.pitch) utterance.pitch = options.pitch * 10;
+    if (options.rate) utterance.rate = options.rate * 10;
     return utterance;
   }, [text, voiceList, options]);
   speechSynthesis.onvoiceschanged = function () {

package/es/useTTS/index.d.ts

@@ -1,6 +1,7 @@
 export { useAzureSpeech } from './hooks/useAzureSpeech';
 export { useEdgeSpeech } from './hooks/useEdgeSpeech';
 export { useMicrosoftSpeech } from './hooks/useMicrosoftSpeech';
+export { usePressSpeechRecognition } from './hooks/usePressSpeechRecognition';
 export { useSpeechRecognition } from './hooks/useSpeechRecognition';
 export { useSpeechSynthes } from './hooks/useSpeechSynthes';
 export { getAzureVoiceList, getEdgeVoiceList, getSpeechSynthesVoiceList, } from './utils/getVoiceList';

package/es/useTTS/index.js

@@ -1,6 +1,7 @@
 export { useAzureSpeech } from "./hooks/useAzureSpeech";
 export { useEdgeSpeech } from "./hooks/useEdgeSpeech";
 export { useMicrosoftSpeech } from "./hooks/useMicrosoftSpeech";
+export { usePressSpeechRecognition } from "./hooks/usePressSpeechRecognition";
 export { useSpeechRecognition } from "./hooks/useSpeechRecognition";
 export { useSpeechSynthes } from "./hooks/useSpeechSynthes";
 export { getAzureVoiceList, getEdgeVoiceList, getSpeechSynthesVoiceList } from "./utils/getVoiceList";

package/es/useTTS/services/postAzureSpeech.d.ts

@@ -1,7 +1,8 @@
-/// <reference types="node" />
 import { type SsmlOptions } from '../utils/genSSML';
-export interface AzureSpeechEnv {
-    SPEECH_KEY: string;
-    SPEECH_REGION: string;
+export interface AzureSpeechOptions extends SsmlOptions {
+    api: {
+        key: string;
+        region: string;
+    };
 }
-export declare const postAzureSpeech: (text: string, options: SsmlOptions, env: AzureSpeechEnv) => Promise<Buffer>;
+export declare const postAzureSpeech: (text: string, { api, ...options }: AzureSpeechOptions) => Promise<AudioBufferSourceNode>;

package/es/useTTS/services/postAzureSpeech.js

@@ -1,45 +1,73 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+var _excluded = ["api"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { AudioConfig, PropertyId, ResultReason, SpeechConfig, SpeechSynthesisOutputFormat, SpeechSynthesizer } from 'microsoft-cognitiveservices-speech-sdk';
 import { genSSML } from "../utils/genSSML";
 // 纯文本生成语音
 export var postAzureSpeech = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(text, options, env) {
-    var speechConfig, audioConfig, synthesizer, completeCb, errCb;
-    return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
+  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(text, _ref) {
+    var api, options, key, region, speechConfig, audioConfig, synthesizer, completeCb, errCb;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
         case 0:
-          speechConfig = SpeechConfig.fromSubscription(env.SPEECH_KEY, env.SPEECH_REGION);
+          api = _ref.api, options = _objectWithoutProperties(_ref, _excluded);
+          key = api.key || process.env.AZURE_SPEECH_KEY || '';
+          region = api.key || process.env.AZURE_SPEECH_REGION || '';
+          speechConfig = SpeechConfig.fromSubscription(key, region);
           speechConfig.setProperty(PropertyId.SpeechServiceResponse_RequestSentenceBoundary, 'true');
           speechConfig.speechSynthesisOutputFormat = SpeechSynthesisOutputFormat.Webm24Khz16BitMonoOpus;
           audioConfig = AudioConfig.fromDefaultSpeakerOutput();
           synthesizer = new SpeechSynthesizer(speechConfig, audioConfig);
-          completeCb = function completeCb(result, resolve, reject) {
-            if (result.reason === ResultReason.SynthesizingAudioCompleted) {
-              resolve(Buffer.from(result.audioData));
-            } else {
-              reject(result);
-            }
-            synthesizer.close();
-          };
+          completeCb = /*#__PURE__*/function () {
+            var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(result, resolve) {
+              var audioData, audioContext, audioBufferSource;
+              return _regeneratorRuntime.wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    if (!(result.reason === ResultReason.SynthesizingAudioCompleted)) {
+                      _context.next = 9;
+                      break;
+                    }
+                    audioData = result.audioData;
+                    audioContext = new AudioContext();
+                    audioBufferSource = audioContext.createBufferSource();
+                    _context.next = 6;
+                    return audioContext.decodeAudioData(audioData);
+                  case 6:
+                    audioBufferSource.buffer = _context.sent;
+                    audioBufferSource.connect(audioContext.destination);
+                    resolve(audioBufferSource);
+                  case 9:
+                    synthesizer.close();
+                  case 10:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee);
+            }));
+            return function completeCb(_x3, _x4) {
+              return _ref3.apply(this, arguments);
+            };
+          }();
           errCb = function errCb(err, reject) {
             reject(err);
             synthesizer.close();
           };
-          return _context.abrupt("return", new Promise(function (resolve, reject) {
+          return _context2.abrupt("return", new Promise(function (resolve, reject) {
             synthesizer.speakSsmlAsync(genSSML(text, options), function (result) {
-              return completeCb(result, resolve, reject);
+              return completeCb(result, resolve);
             }, function (err) {
               return errCb(err, reject);
             });
           }));
-        case 8:
+        case 11:
         case "end":
-          return _context.stop();
+          return _context2.stop();
       }
-    }, _callee);
+    }, _callee2);
   }));
-  return function postAzureSpeech(_x, _x2, _x3) {
-    return _ref.apply(this, arguments);
+  return function postAzureSpeech(_x, _x2) {
+    return _ref2.apply(this, arguments);
   };
 }();

package/es/useTTS/services/postMicrosoftSpeech.d.ts

@@ -1,2 +1,5 @@
 import { type SsmlOptions } from '../utils/genSSML';
-export declare const postMicrosoftSpeech: (text: string, options: SsmlOptions) => Promise<ArrayBuffer>;
+export interface MicrosoftSpeechOptions extends SsmlOptions {
+    api?: string;
+}
+export declare const postMicrosoftSpeech: (text: string, { api, ...options }: MicrosoftSpeechOptions) => Promise<AudioBufferSourceNode>;

package/es/useTTS/services/postMicrosoftSpeech.js

@@ -1,64 +1,46 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+var _excluded = ["api"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { v4 as uuidv4 } from 'uuid';
-import { genSSML } from "../utils/genSSML";
-var API = 'https://southeastasia.api.speech.microsoft.com/accfreetrial/texttospeech/acc/v3.0-beta1/vcg/speak';
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import qs from 'query-string';
 export var postMicrosoftSpeech = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(text, options) {
-    var data, DEFAULT_HEADERS, response;
+  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(text, _ref) {
+    var api, options, response, audioData, audioContext, audioBufferSource;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          data = JSON.stringify({
-            offsetInPlainText: 0,
-            properties: {
-              SpeakTriggerSource: 'AccTuningPagePlayButton'
-            },
-            ssml: genSSML(text, options),
-            ttsAudioFormat: 'audio-24khz-160kbitrate-mono-mp3'
-          });
-          DEFAULT_HEADERS = {
-            'accept': '*/*',
-            'accept-language': 'zh-CN,zh;q=0.9',
-            'authority': 'southeastasia.api.speech.microsoft.com',
-            'content-type': 'application/json',
-            'customvoiceconnectionid': uuidv4(),
-            'origin': 'https://speech.microsoft.com',
-            'sec-ch-ua': '"Google Chrome";v="111", "Not(A:Brand";v="8", "Chromium";v="111"',
-            'sec-ch-ua-mobile': '?0',
-            'sec-ch-ua-platform': '"Windows"',
-            'sec-fetch-dest': 'empty',
-            'sec-fetch-mode': 'cors',
-            'sec-fetch-site': 'same-site',
-            'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36'
-          };
-          _context.prev = 2;
-          _context.next = 5;
-          return fetch(API, {
-            body: data,
-            headers: DEFAULT_HEADERS,
-            method: 'POST',
-            // @ts-ignore
-            responseType: 'arraybuffer'
-          });
-        case 5:
+          api = _ref.api, options = _objectWithoutProperties(_ref, _excluded);
+          _context.next = 3;
+          return fetch(qs.stringifyUrl({
+            query: _objectSpread({
+              text: text
+            }, options),
+            url: api || process.env.MICROSOFT_SPEECH_PROXY_URL || ''
+          }));
+        case 3:
           response = _context.sent;
-          _context.next = 8;
+          _context.next = 6;
           return response.arrayBuffer();
-        case 8:
-          return _context.abrupt("return", _context.sent);
+        case 6:
+          audioData = _context.sent;
+          audioContext = new AudioContext();
+          audioBufferSource = audioContext.createBufferSource();
+          _context.next = 11;
+          return audioContext.decodeAudioData(audioData);
         case 11:
-          _context.prev = 11;
-          _context.t0 = _context["catch"](2);
-          console.error(_context.t0);
-          throw _context.t0;
-        case 15:
+          audioBufferSource.buffer = _context.sent;
+          audioBufferSource.connect(audioContext.destination);
+          return _context.abrupt("return", audioBufferSource);
+        case 14:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[2, 11]]);
+    }, _callee);
   }));
   return function postMicrosoftSpeech(_x, _x2) {
-    return _ref.apply(this, arguments);
+    return _ref2.apply(this, arguments);
   };
 }();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.111.2",
+  "version": "1.112.0",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",