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

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

@@ -8457,6 +8457,10 @@ 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", "");
+    __publicField(this, "playbackSegments", []);
     this.key = key;
     this.region = region;
     this.voice = voice;
@@ -8469,14 +8473,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) {
@@ -8624,9 +8631,15 @@ class TextToSpeech {
     this.originalHighlightDivInnerHTML = "";
     this.wordBoundryList = [];
     this.wordEncounters = [];
+    this.resetPlaybackSegments();
+    this.playbackSegments = [];
     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;
@@ -8641,10 +8654,25 @@ class TextToSpeech {
     this.synthesizer.wordBoundary = (s, e) => {
       this.wordBoundryList.push(e);
     };
+    const playbackChain = this.collectPlaybackChain(this.clickedNode);
+    const isChainedPlayback = playbackChain.length > 1;
+    if (isChainedPlayback) {
+      this.preparePlaybackChain(playbackChain);
+    } else {
+      this.playbackSegments = [];
+    }
     this.player.onAudioEnd = async () => {
+      const wasChainedPlayback = this.playbackSegments.length > 0;
       this.stopPlayer();
+      if (wasChainedPlayback) {
+        document.dispatchEvent(new CustomEvent("COAzureTTSFinishedPlaying", {}));
+        return;
+      }
       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 +8685,9 @@ class TextToSpeech {
     this.player.onAudioStart = async () => {
       document.dispatchEvent(new CustomEvent("COAzureTTSStartedPlaying", {}));
     };
+    if (!isChainedPlayback) {
+      this.prefetchNextNode(this.clickedNode);
+    }
     this.synthesizer.speakSsmlAsync(
       this.buildSSML(this.textToRead),
       () => {
@@ -8669,6 +8700,238 @@ class TextToSpeech {
       }
     );
   }
+  collectPlaybackChain(node) {
+    var _a, _b;
+    const chain = [];
+    const seenNodeIds = /* @__PURE__ */ new Set();
+    let currentNode = node;
+    let offset = 0;
+    while (currentNode && !seenNodeIds.has(currentNode.id)) {
+      seenNodeIds.add(currentNode.id);
+      const attr = (_a = currentNode.attributes.getNamedItem("co-tts.text")) != null ? _a : currentNode.attributes.getNamedItem("co-tts");
+      const text = this.getNodeText(currentNode, attr);
+      if (text === "") {
+        break;
+      }
+      const highlightDiv = this.getHighlightDivForNode(currentNode);
+      chain.push({
+        node: currentNode,
+        text,
+        start: offset,
+        end: offset + text.length,
+        highlightDiv,
+        originalHighlightDivInnerHTML: (_b = highlightDiv == null ? void 0 : highlightDiv.innerHTML) != null ? _b : ""
+      });
+      offset += text.length + 2;
+      if (!currentNode.hasAttribute("co-tts.next")) {
+        break;
+      }
+      currentNode = document.getElementById(currentNode.getAttribute("co-tts.next"));
+    }
+    return chain;
+  }
+  preparePlaybackChain(chain) {
+    this.playbackSegments = chain;
+    this.textToRead = chain.map((segment) => segment.text).join(". ");
+    this.highlightDiv = void 0;
+    this.originalHighlightDivInnerHTML = "";
+    this.wordEncounters = [];
+    this.previousWordBoundary = void 0;
+    this.prevTextOffset = 0;
+    this.currentWord = "";
+    this.currentOffset = 0;
+    this.wordBoundaryOffset = 0;
+  }
+  getHighlightDivForNode(node) {
+    var _a;
+    if (!node.hasAttribute("co-tts.highlight")) {
+      return void 0;
+    }
+    if (((_a = node.attributes.getNamedItem("co-tts.highlight")) == null ? void 0 : _a.value) !== "") {
+      return document.getElementById(node.attributes.getNamedItem("co-tts.highlight").value);
+    }
+    return node;
+  }
+  resetPlaybackSegments() {
+    this.playbackSegments.forEach((segment) => {
+      if (segment.highlightDiv) {
+        segment.highlightDiv.innerHTML = segment.originalHighlightDivInnerHTML;
+      }
+    });
+  }
+  updateChainedHighlight(wordBoundary) {
+    var _a;
+    if (~[".", ",", "!", "?", "*", "(", ")", "&", "\\", "/", "^", "[", "]", "<", ">", ":"].indexOf(wordBoundary.text)) {
+      wordBoundary = (_a = this.previousWordBoundary) != null ? _a : void 0;
+    }
+    if (!wordBoundary) {
+      this.resetPlaybackSegments();
+      return;
+    }
+    const segment = this.playbackSegments.find((candidate) => wordBoundary.textOffset >= candidate.start && wordBoundary.textOffset < candidate.end);
+    this.resetPlaybackSegments();
+    if (!(segment == null ? void 0 : segment.highlightDiv)) {
+      this.previousWordBoundary = wordBoundary;
+      return;
+    }
+    const relativeTextOffset = wordBoundary.textOffset - segment.start;
+    const currentOffset = this.getPosition(segment.originalHighlightDivInnerHTML, wordBoundary.text, relativeTextOffset);
+    if (currentOffset === Number.MAX_SAFE_INTEGER) {
+      this.previousWordBoundary = wordBoundary;
+      return;
+    }
+    const startOfString = segment.originalHighlightDivInnerHTML.substring(0, currentOffset);
+    const endOffset = currentOffset + wordBoundary.wordLength;
+    const endOfString = segment.originalHighlightDivInnerHTML.substring(endOffset);
+    segment.highlightDiv.innerHTML = `
+            ${startOfString}<mark class='co-tts-highlight'>${wordBoundary.text}</mark>${endOfString}
+        `;
+    this.previousWordBoundary = wordBoundary;
+  }
+  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);
   }
@@ -8686,6 +8949,10 @@ class TextToSpeech {
           }
         }
         if (wordBoundary !== void 0) {
+          if (this.playbackSegments.length > 0) {
+            this.updateChainedHighlight(wordBoundary);
+            return;
+          }
           if (~[".", ",", "!", "?", "*", "(", ")", "&", "\\", "/", "^", "[", "]", "<", ">", ":"].indexOf(wordBoundary.text)) {
             wordBoundary = (_a = this.previousWordBoundary) != null ? _a : void 0;
           }