@creativeorange/azure-text-to-speech 2.1.1 → 2.2.0

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

@@ -8457,6 +8457,9 @@ class TextToSpeech {
     __publicField(this, "wordBoundaryOffset", 0);
     __publicField(this, "prevTextOffset", 0);
     __publicField(this, "url", "");
+    __publicField(this, "prefetchedAudio", /* @__PURE__ */ new Map());
+    __publicField(this, "prefetchPromises", /* @__PURE__ */ new Map());
+    __publicField(this, "activePrefetchedAudioUrl", "");
     this.key = key;
     this.region = region;
     this.voice = voice;
@@ -8469,14 +8472,17 @@ class TextToSpeech {
   }
   setVoice(voice) {
     this.voice = voice;
+    this.clearPrefetchedAudio();
     return this;
   }
   setRate(rate) {
     this.rate = rate;
+    this.clearPrefetchedAudio();
     return this;
   }
   setPitch(pitch) {
     this.pitch = pitch;
+    this.clearPrefetchedAudio();
     return this;
   }
   async registerBindings(node) {
@@ -8627,6 +8633,10 @@ class TextToSpeech {
     if (this.player !== void 0) {
       this.player.pause();
     }
+    if (this.activePrefetchedAudioUrl !== "") {
+      URL.revokeObjectURL(this.activePrefetchedAudioUrl);
+      this.activePrefetchedAudioUrl = "";
+    }
     this.player = void 0;
     this.highlightDiv = void 0;
     this.prevTextOffset = 0;
@@ -8645,6 +8655,9 @@ class TextToSpeech {
       this.stopPlayer();
       if (this.clickedNode.hasAttribute("co-tts.next")) {
         const nextNode = document.getElementById(this.clickedNode.getAttribute("co-tts.next"));
+        if (nextNode && await this.playPrefetchedNode(nextNode)) {
+          return;
+        }
         if (nextNode && nextNode.attributes.getNamedItem("co-tts.text")) {
           this.handleWithoutClick(nextNode, nextNode.attributes.getNamedItem("co-tts.text"));
         } else if (nextNode) {
@@ -8657,6 +8670,7 @@ class TextToSpeech {
     this.player.onAudioStart = async () => {
       document.dispatchEvent(new CustomEvent("COAzureTTSStartedPlaying", {}));
     };
+    this.prefetchNextNode(this.clickedNode);
     this.synthesizer.speakSsmlAsync(
       this.buildSSML(this.textToRead),
       () => {
@@ -8669,6 +8683,150 @@ class TextToSpeech {
       }
     );
   }
+  getNodeText(node, attr) {
+    var _a;
+    if (attr && attr.value !== "") {
+      return attr.value;
+    }
+    if (node.hasAttribute("co-tts.text") && node.getAttribute("co-tts.text") !== "") {
+      return (_a = node.getAttribute("co-tts.text")) != null ? _a : "";
+    }
+    return node.innerText;
+  }
+  getPrefetchKey(node, text) {
+    return [
+      node.id,
+      text,
+      this.voice,
+      this.rate,
+      this.pitch,
+      this.url
+    ].join("|");
+  }
+  clearPrefetchedAudio() {
+    this.prefetchedAudio.forEach((prefetch) => {
+      if (prefetch.url) {
+        URL.revokeObjectURL(prefetch.url);
+      }
+    });
+    this.prefetchedAudio.clear();
+    this.prefetchPromises.clear();
+  }
+  async prefetchNextNode(node) {
+    var _a;
+    if (!node || !node.hasAttribute("co-tts.next")) {
+      return;
+    }
+    const nextNode = document.getElementById(node.getAttribute("co-tts.next"));
+    if (!nextNode) {
+      return;
+    }
+    const attr = (_a = nextNode.attributes.getNamedItem("co-tts.text")) != null ? _a : nextNode.attributes.getNamedItem("co-tts");
+    const text = this.getNodeText(nextNode, attr);
+    if (text === "") {
+      return;
+    }
+    const key = this.getPrefetchKey(nextNode, text);
+    if (this.prefetchedAudio.has(key) || this.prefetchPromises.has(key)) {
+      return;
+    }
+    const speechConfig = SpeechConfig.fromSubscription(this.key, this.region);
+    speechConfig.speechSynthesisVoiceName = `Microsoft Server Speech Text to Speech Voice (${this.voice})`;
+    speechConfig.speechSynthesisOutputFormat = SpeechSynthesisOutputFormat.Audio24Khz160KBitRateMonoMp3;
+    const synthesizer = new SpeechSynthesizer(speechConfig, null);
+    const wordBoundryList = [];
+    synthesizer.wordBoundary = (s, e) => {
+      wordBoundryList.push(e);
+    };
+    const prefetchPromise = new Promise((resolve) => {
+      synthesizer.speakSsmlAsync(
+        this.buildSSML(text),
+        (result) => {
+          synthesizer.close();
+          if (!(result == null ? void 0 : result.audioData)) {
+            resolve(null);
+            return;
+          }
+          const blob = new Blob([result.audioData], { type: "audio/mpeg" });
+          const url = URL.createObjectURL(blob);
+          const prefetch = {
+            key,
+            nodeId: nextNode.id,
+            text,
+            url,
+            wordBoundryList
+          };
+          this.prefetchedAudio.set(key, prefetch);
+          resolve(prefetch);
+        },
+        () => {
+          synthesizer.close();
+          resolve(null);
+        }
+      );
+    }).finally(() => {
+      this.prefetchPromises.delete(key);
+    });
+    this.prefetchPromises.set(key, prefetchPromise);
+  }
+  async playPrefetchedNode(node) {
+    var _a, _b, _c;
+    const attr = (_a = node.attributes.getNamedItem("co-tts.text")) != null ? _a : node.attributes.getNamedItem("co-tts");
+    const text = this.getNodeText(node, attr);
+    const key = this.getPrefetchKey(node, text);
+    const prefetch = (_b = this.prefetchedAudio.get(key)) != null ? _b : await this.prefetchPromises.get(key);
+    if (!prefetch) {
+      return false;
+    }
+    this.prefetchedAudio.delete(key);
+    this.clickedNode = node;
+    this.textToRead = prefetch.text;
+    this.wordBoundryList = prefetch.wordBoundryList;
+    this.wordEncounters = [];
+    this.previousWordBoundary = void 0;
+    this.prevTextOffset = 0;
+    this.currentWord = "";
+    this.currentOffset = 0;
+    this.wordBoundaryOffset = 0;
+    if (node.hasAttribute("co-tts.highlight")) {
+      if (((_c = node.attributes.getNamedItem("co-tts.highlight")) == null ? void 0 : _c.value) !== "") {
+        const newReferenceDiv = document.getElementById(node.attributes.getNamedItem("co-tts.highlight").value);
+        this.highlightDiv = newReferenceDiv;
+        if (newReferenceDiv !== null) {
+          this.originalHighlightDivInnerHTML = newReferenceDiv.innerHTML;
+        }
+      } else {
+        this.highlightDiv = node;
+        this.originalHighlightDivInnerHTML = node.innerHTML;
+      }
+    }
+    await this.createInterval();
+    const audio = new Audio(prefetch.url);
+    this.activePrefetchedAudioUrl = prefetch.url;
+    this.player = audio;
+    audio.addEventListener("play", () => {
+      document.dispatchEvent(new CustomEvent("COAzureTTSStartedPlaying", {}));
+    }, { once: true });
+    audio.addEventListener("ended", async () => {
+      this.stopPlayer();
+      if (this.clickedNode.hasAttribute("co-tts.next")) {
+        const nextNode = document.getElementById(this.clickedNode.getAttribute("co-tts.next"));
+        if (nextNode && await this.playPrefetchedNode(nextNode)) {
+          return;
+        }
+        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", {}));
+      }
+    }, { once: true });
+    this.prefetchNextNode(node);
+    await audio.play();
+    return true;
+  }
   async clearInterval() {
     clearInterval(this.interval);
   }