@creativeorange/azure-text-to-speech 1.0.0 → 1.1.0

package/.eslintrc.js

@@ -0,0 +1,29 @@
+module.exports = {
+    'env': {
+        'browser': true,
+        'es6': true
+    },
+    'extends': [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/eslint-recommended',
+        'google'
+    ],
+    'rules': {
+        'max-len': ['error', {'code': 125}],
+        'indent': ['error', 4],
+        'require-jsdoc': ['error', {
+            'require': {
+                'FunctionDeclaration': false,
+                'MethodDefinition': false,
+                'ClassDeclaration': false,
+                'ArrowFunctionExpression': false,
+                'FunctionExpression': false
+            }
+        }],
+    },
+    'parserOptions': {
+        'sourceType': 'module',
+    },
+    'parser': '@typescript-eslint/parser',
+    "ignorePatterns": ["**/*.html", "**/*.scss"],
+}

package/dist/co-azure-tts.es.js

@@ -5842,7 +5842,7 @@ class RestMessageAdapter {
   }
 }
 class TextToSpeech {
-  constructor(key, region, voice = "male") {
+  constructor(key, region, voice) {
     __publicField(this, "key");
     __publicField(this, "region");
     __publicField(this, "voice");
@@ -5855,45 +5855,25 @@ class TextToSpeech {
     __publicField(this, "player");
     __publicField(this, "synthesizer");
     __publicField(this, "previousWordBoundary");
+    __publicField(this, "interval");
+    __publicField(this, "wordEncounters", []);
+    __publicField(this, "originalHighlightDivInnerHTML", "");
+    __publicField(this, "currentWord", "");
+    __publicField(this, "currentOffset", 0);
     this.key = key;
     this.region = region;
     this.voice = voice;
   }
   async start() {
-    setInterval(() => {
-      var _a;
-      if (this.player !== void 0 && this.highlightDiv) {
-        const currentTime = this.player.currentTime;
-        let wordBoundary;
-        for (const e of this.wordBoundryList) {
-          if (currentTime * 1e3 > e.audioOffset / 1e4) {
-            wordBoundary = e;
-          } else {
-            break;
-          }
-        }
-        if (~[".", ",", "!", "?"].indexOf(wordBoundary.text)) {
-          wordBoundary = (_a = this.previousWordBoundary) != null ? _a : void 0;
-        }
-        if (wordBoundary !== void 0) {
-          this.previousWordBoundary = wordBoundary;
-          this.highlightDiv.innerHTML = this.textToRead.substr(0, wordBoundary.textOffset) + "<span class='co-tts-highlight'>" + wordBoundary.text + "</span>" + this.textToRead.substr(wordBoundary.textOffset + wordBoundary.wordLength);
-        } else {
-          this.highlightDiv.innerHTML = this.textToRead;
-        }
-      }
-    }, 50);
     await this.registerBindings(document);
   }
-  async synthesis() {
-  }
   async registerBindings(node) {
-    let nodes = node.childNodes;
+    const nodes = node.childNodes;
     for (let i = 0; i < nodes.length; i++) {
       if (!nodes[i]) {
         continue;
       }
-      let currentNode = nodes[i];
+      const currentNode = nodes[i];
       if (currentNode.attributes) {
         if (currentNode.attributes.getNamedItem("co-tts.id")) {
           await this.handleIdModifier(currentNode, currentNode.attributes.getNamedItem("co-tts.id"));
@@ -5918,18 +5898,20 @@ class TextToSpeech {
     node.addEventListener("click", async (_) => {
       var _a;
       this.stopPlayer();
+      await this.createInterval();
       this.clickedNode = node;
-      let referenceDiv = document.getElementById(attr.value);
+      const referenceDiv = document.getElementById(attr.value);
       if (!referenceDiv) {
         return;
       }
       if (referenceDiv.hasAttribute("co-tts.text") && referenceDiv.getAttribute("co-tts.text") !== "") {
         this.textToRead = (_a = referenceDiv.getAttribute("co-tts.text")) != null ? _a : "";
       } else {
-        this.textToRead = referenceDiv.innerText;
+        this.textToRead = referenceDiv.innerHTML;
       }
       if (referenceDiv.hasAttribute("co-tts.highlight")) {
         this.highlightDiv = referenceDiv;
+        this.originalHighlightDivInnerHTML = referenceDiv.innerHTML;
       }
       this.startSynthesizer(node, attr);
     });
@@ -5937,8 +5919,9 @@ class TextToSpeech {
   async handleAjaxModifier(node, attr) {
     node.addEventListener("click", async (_) => {
       this.stopPlayer();
+      await this.createInterval();
       this.clickedNode = node;
-      let response = await fetch(attr.value, {
+      const response = await fetch(attr.value, {
         method: `GET`
       });
       this.textToRead = await response.text();
@@ -5948,39 +5931,65 @@ class TextToSpeech {
   async handleDefault(node, attr) {
     node.addEventListener("click", async (_) => {
       this.stopPlayer();
+      await this.createInterval();
       this.clickedNode = node;
       if (node.hasAttribute("co-tts.highlight")) {
         this.highlightDiv = node;
+        this.originalHighlightDivInnerHTML = node.innerHTML;
       }
       if (attr.value === "") {
-        this.textToRead = node.innerText;
+        this.textToRead = node.innerHTML;
       } else {
         this.textToRead = attr.value;
       }
       this.startSynthesizer(node, attr);
     });
   }
+  async handleWithoutClick(node, attr) {
+    this.stopPlayer();
+    await this.createInterval();
+    this.clickedNode = node;
+    if (node.hasAttribute("co-tts.highlight")) {
+      this.highlightDiv = node;
+      this.originalHighlightDivInnerHTML = node.innerHTML;
+    }
+    if (attr.value === "") {
+      this.textToRead = node.innerHTML;
+    } else {
+      this.textToRead = attr.value;
+    }
+    this.startSynthesizer(node, attr);
+  }
   async handleStopModifier(node, attr) {
     node.addEventListener("click", async (_) => {
       await this.stopPlayer();
+      document.dispatchEvent(new CustomEvent("COAzureTTSStoppedPlaying", {}));
     });
   }
   async handlePauseModifier(node, attr) {
     node.addEventListener("click", async (_) => {
+      await this.clearInterval();
       await this.player.pause();
+      document.dispatchEvent(new CustomEvent("COAzureTTSPausedPlaying", {}));
     });
   }
   async handleResumeModifier(node, attr) {
     node.addEventListener("click", async (_) => {
+      await this.createInterval();
       await this.player.resume();
+      document.dispatchEvent(new CustomEvent("COAzureTTSResumedPlaying", {}));
     });
   }
   async stopPlayer() {
+    await this.clearInterval();
     if (this.highlightDiv !== void 0) {
-      this.highlightDiv.innerHTML = this.textToRead;
+      this.highlightDiv.innerHTML = this.originalHighlightDivInnerHTML;
     }
     this.textToRead = "";
+    this.currentWord = "";
+    this.originalHighlightDivInnerHTML = "";
     this.wordBoundryList = [];
+    this.wordEncounters = [];
     if (this.player !== void 0) {
       this.player.pause();
     }
@@ -5989,27 +5998,30 @@ class TextToSpeech {
   }
   async startSynthesizer(node, attr) {
     this.speechConfig = SpeechConfig.fromSubscription(this.key, this.region);
-    if (this.voice === "female") {
-      this.speechConfig.speechSynthesisVoiceName = "Microsoft Server Speech Text to Speech Voice (nl-NL, ColetteNeural)";
-    } else {
-      this.speechConfig.speechSynthesisVoiceName = "Microsoft Server Speech Text to Speech Voice (nl-NL, MaartenNeural)";
-    }
-    this.speechConfig.speechSynthesisOutputFormat = 8;
+    this.speechConfig.speechSynthesisVoiceName = `Microsoft Server Speech Text to Speech Voice (${this.voice})`;
+    this.speechConfig.speechSynthesisOutputFormat = SpeechSynthesisOutputFormat.Audio24Khz160KBitRateMonoMp3;
     this.player = new SpeakerAudioDestination();
     this.audioConfig = AudioConfig.fromSpeakerOutput(this.player);
     this.synthesizer = new SpeechSynthesizer(this.speechConfig, this.audioConfig);
     this.synthesizer.wordBoundary = (s, e) => {
       this.wordBoundryList.push(e);
     };
-    this.player.onAudioEnd = () => {
+    this.player.onAudioEnd = async () => {
       this.stopPlayer();
       if (this.clickedNode.hasAttribute("co-tts.next")) {
-        let nextNode = document.getElementById(this.clickedNode.getAttribute("co-tts.next"));
-        if (nextNode) {
+        const nextNode = document.getElementById(this.clickedNode.getAttribute("co-tts.next"));
+        if (nextNode && nextNode.attributes.getNamedItem("co-tts.text")) {
+          this.handleWithoutClick(nextNode, nextNode.attributes.getNamedItem("co-tts.text"));
+        } else if (nextNode) {
           nextNode.dispatchEvent(new Event("click"));
         }
+      } else {
+        document.dispatchEvent(new CustomEvent("COAzureTTSFinishedPlaying", {}));
       }
     };
+    this.player.onAudioStart = async () => {
+      document.dispatchEvent(new CustomEvent("COAzureTTSStartedPlaying", {}));
+    };
     this.synthesizer.speakTextAsync(
       this.textToRead,
       () => {
@@ -6022,5 +6034,55 @@ class TextToSpeech {
       }
     );
   }
+  async clearInterval() {
+    clearInterval(this.interval);
+  }
+  async createInterval() {
+    this.interval = setInterval(() => {
+      var _a;
+      if (this.player !== void 0 && this.highlightDiv) {
+        const currentTime = this.player.currentTime;
+        let wordBoundary;
+        for (const e of this.wordBoundryList) {
+          if (currentTime * 1e3 > e.audioOffset / 1e4) {
+            wordBoundary = e;
+          } else {
+            break;
+          }
+        }
+        if (wordBoundary !== void 0) {
+          if (~[".", ",", "!", "?"].indexOf(wordBoundary.text)) {
+            wordBoundary = (_a = this.previousWordBoundary) != null ? _a : void 0;
+          }
+          if (wordBoundary === void 0) {
+            this.highlightDiv.innerHTML = this.originalHighlightDivInnerHTML;
+          } else {
+            if (!this.wordEncounters[wordBoundary.text]) {
+              this.wordEncounters[wordBoundary.text] = 0;
+            }
+            if (this.currentWord !== wordBoundary.text) {
+              this.wordEncounters[wordBoundary.text]++;
+              console.log(this.wordEncounters);
+              this.currentOffset = this.getPosition(
+                this.originalHighlightDivInnerHTML,
+                wordBoundary.text,
+                this.wordEncounters[wordBoundary.text]
+              );
+              this.currentWord = wordBoundary.text;
+            }
+            this.previousWordBoundary = wordBoundary;
+            this.highlightDiv.innerHTML = this.originalHighlightDivInnerHTML.substring(0, this.currentOffset) + "<mark class='co-tts-highlight'>" + wordBoundary.text + "</mark>" + this.originalHighlightDivInnerHTML.substring(this.currentOffset + wordBoundary.wordLength);
+          }
+        } else {
+          this.highlightDiv.innerHTML = this.originalHighlightDivInnerHTML;
+        }
+      }
+    }, 50);
+  }
+  getPosition(string, subString, index) {
+    const regex = new RegExp(`\\b${subString}\\b`, "g");
+    console.log(string.split(regex, index).join(subString), regex, index);
+    return string.split(regex, index).join(subString).length;
+  }
 }
 export { TextToSpeech as default };