@creativeorange/azure-text-to-speech 3.0.1 → 3.0.4

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

@@ -8738,6 +8738,24 @@ class SpeechToText {
     );
   }
 }
+const PUNCTUATION_MARKS = [
+  ".",
+  ",",
+  "!",
+  "?",
+  "*",
+  "(",
+  ")",
+  "&",
+  "\\",
+  "/",
+  "^",
+  "[",
+  "]",
+  "<",
+  ">",
+  ":"
+];
 class TextToSpeech {
   constructor(options) {
     __publicField(this, "region", "");
@@ -8753,8 +8771,6 @@ 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);
@@ -8768,6 +8784,8 @@ class TextToSpeech {
     __publicField(this, "playbackSegments", []);
     __publicField(this, "authorizationManager");
     __publicField(this, "stopPromise");
+    __publicField(this, "playbackSessionId", 0);
+    __publicField(this, "highlightInterval");
     var _a, _b, _c;
     if (!options || typeof options.voice !== "string" || options.voice.trim() === "") {
       throw new Error("A voice is required.");
@@ -8843,9 +8861,8 @@ class TextToSpeech {
   }
   async handleIdModifier(node, attr) {
     node.addEventListener("click", async (_) => {
-      var _a, _b, _c, _d, _e, _f;
+      var _a, _b, _c;
       await this.stopPlayer();
-      await this.createInterval();
       const referenceDiv = document.getElementById(attr.value);
       this.clickedNode = referenceDiv;
       if (!referenceDiv) {
@@ -8856,51 +8873,30 @@ class TextToSpeech {
       } else {
         this.textToRead = (_c = (_b = referenceDiv.innerText) != null ? _b : referenceDiv.textContent) != null ? _c : "";
       }
-      if (referenceDiv.hasAttribute("co-tts.highlight")) {
-        const highlightTarget = (_e = (_d = referenceDiv.attributes.getNamedItem("co-tts.highlight")) == null ? void 0 : _d.value) != null ? _e : "";
-        if (highlightTarget !== "") {
-          const newReferenceDiv = document.getElementById(highlightTarget);
-          this.highlightDiv = newReferenceDiv;
-          this.originalHighlightDivInnerHTML = (_f = newReferenceDiv == null ? void 0 : newReferenceDiv.innerHTML) != null ? _f : "";
-        } else {
-          this.highlightDiv = referenceDiv;
-          this.originalHighlightDivInnerHTML = referenceDiv.innerHTML;
-        }
-      }
+      this.setHighlightTargetFromNode(referenceDiv);
       await this.startSynthesizer(node, attr);
     });
   }
   async handleAjaxModifier(node, attr) {
     node.addEventListener("click", async (_) => {
       await this.stopPlayer();
-      await this.createInterval();
       this.clickedNode = node;
       const response = await fetch(attr.value, {
         method: `GET`
       });
       this.textToRead = await response.text();
+      this.setHighlightTargetFromNode(node);
       await this.startSynthesizer(node, attr);
     });
   }
   async handleDefault(node, attr) {
     node.addEventListener("click", async (_) => {
-      var _a, _b, _c, _d, _e;
+      var _a, _b;
       await this.stopPlayer();
-      await this.createInterval();
       this.clickedNode = node;
-      if (node.hasAttribute("co-tts.highlight")) {
-        const highlightTarget = (_b = (_a = node.attributes.getNamedItem("co-tts.highlight")) == null ? void 0 : _a.value) != null ? _b : "";
-        if (highlightTarget !== "") {
-          const newReferenceDiv = document.getElementById(highlightTarget);
-          this.highlightDiv = newReferenceDiv;
-          this.originalHighlightDivInnerHTML = (_c = newReferenceDiv == null ? void 0 : newReferenceDiv.innerHTML) != null ? _c : "";
-        } else {
-          this.highlightDiv = node;
-          this.originalHighlightDivInnerHTML = node.innerHTML;
-        }
-      }
+      this.setHighlightTargetFromNode(node);
       if (attr.value === "") {
-        this.textToRead = (_e = (_d = node.innerText) != null ? _d : node.textContent) != null ? _e : "";
+        this.textToRead = (_b = (_a = node.innerText) != null ? _a : node.textContent) != null ? _b : "";
       } else {
         this.textToRead = attr.value;
       }
@@ -8908,26 +8904,12 @@ class TextToSpeech {
     });
   }
   async handleWithoutClick(node, attr) {
-    var _a, _b, _c;
+    var _a, _b;
     await this.stopPlayer();
-    await this.createInterval();
     this.clickedNode = node;
-    if (node.hasAttribute("co-tts.highlight")) {
-      if (((_a = node.attributes.getNamedItem("co-tts.highlight")) == null ? void 0 : _a.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;
-      }
-    }
+    this.setHighlightTargetFromNode(node);
     if (attr.value === "") {
-      this.textToRead = (_c = (_b = node.innerText) != null ? _b : node.textContent) != null ? _c : "";
+      this.textToRead = (_b = (_a = node.innerText) != null ? _a : node.textContent) != null ? _b : "";
     } else {
       this.textToRead = attr.value;
     }
@@ -8944,7 +8926,7 @@ class TextToSpeech {
       if (!this.player || typeof this.player.pause !== "function") {
         return;
       }
-      await this.clearInterval();
+      this.stopHighlightingInterval();
       await this.player.pause();
       document.dispatchEvent(new CustomEvent("COAzureTTSPausedPlaying", {}));
     });
@@ -8954,7 +8936,9 @@ class TextToSpeech {
       if (!this.player) {
         return;
       }
-      await this.createInterval();
+      if (this.shouldHighlight()) {
+        this.startHighlightingInterval(this.playbackSessionId);
+      }
       if (typeof this.player.resume === "function") {
         await this.player.resume();
       } else if (typeof this.player.play === "function") {
@@ -8975,8 +8959,9 @@ class TextToSpeech {
     return this.stopPromise;
   }
   async performStopPlayer() {
-    await this.clearInterval();
-    if (this.highlightDiv !== void 0) {
+    this.invalidatePlaybackSession();
+    this.stopHighlightingInterval();
+    if (this.highlightDiv) {
       this.highlightDiv.innerHTML = this.originalHighlightDivInnerHTML;
     }
     this.resetPlaybackSegments();
@@ -8985,10 +8970,12 @@ class TextToSpeech {
     const synthesizer = this.synthesizer;
     this.textToRead = "";
     this.currentWord = "";
+    this.currentOffset = 0;
+    this.wordBoundaryOffset = 0;
     this.originalHighlightDivInnerHTML = "";
     this.wordBoundryList = [];
-    this.wordEncounters = [];
     this.playbackSegments = [];
+    this.previousWordBoundary = void 0;
     this.highlightDiv = void 0;
     this.prevTextOffset = 0;
     this.playbackTextOffsetBase = void 0;
@@ -9028,10 +9015,18 @@ class TextToSpeech {
   async startSynthesizer(_node, _attr) {
     try {
       this.speechConfig = await this.createSpeechConfig();
-      this.player = new SpeakerAudioDestination();
-      this.audioConfig = AudioConfig.fromSpeakerOutput(this.player);
-      this.synthesizer = new SpeechSynthesizer(this.speechConfig, this.audioConfig);
-      this.synthesizer.wordBoundary = (_s, e) => {
+      const sessionId = this.createPlaybackSession();
+      this.resetHighlightState();
+      const player = new SpeakerAudioDestination();
+      const audioConfig = AudioConfig.fromSpeakerOutput(player);
+      const synthesizer = new SpeechSynthesizer(this.speechConfig, audioConfig);
+      this.player = player;
+      this.audioConfig = audioConfig;
+      this.synthesizer = synthesizer;
+      synthesizer.wordBoundary = (_s, e) => {
+        if (!this.isActivePlaybackSession(sessionId)) {
+          return;
+        }
         this.wordBoundryList.push(e);
       };
       const playbackChain = this.collectPlaybackChain(this.clickedNode);
@@ -9041,8 +9036,11 @@ class TextToSpeech {
       } else {
         this.playbackSegments = [];
       }
-      this.player.onAudioEnd = async () => {
+      player.onAudioEnd = async () => {
         var _a;
+        if (!this.isActivePlaybackSession(sessionId)) {
+          return;
+        }
         const clickedNode = this.clickedNode;
         const wasChainedPlayback = this.playbackSegments.length > 0;
         const nextNodeId = ((_a = clickedNode == null ? void 0 : clickedNode.hasAttribute) == null ? void 0 : _a.call(clickedNode, "co-tts.next")) ? clickedNode.getAttribute("co-tts.next") : null;
@@ -9066,23 +9064,39 @@ class TextToSpeech {
           document.dispatchEvent(new CustomEvent("COAzureTTSFinishedPlaying", {}));
         }
       };
-      this.player.onAudioStart = async () => {
+      player.onAudioStart = async () => {
+        if (!this.isActivePlaybackSession(sessionId)) {
+          return;
+        }
         document.dispatchEvent(new CustomEvent("COAzureTTSStartedPlaying", {}));
       };
+      if (this.shouldHighlight()) {
+        this.startHighlightingInterval(sessionId);
+      }
       if (!isChainedPlayback) {
         void this.prefetchNextNode(this.clickedNode);
       }
-      this.synthesizer.speakSsmlAsync(
-        this.buildSSML(this.textToRead),
+      const ssml = this.buildSSML(this.textToRead);
+      synthesizer.speakSsmlAsync(
+        ssml,
         () => {
-          this.closeSynthesizer();
+          this.closeResource(synthesizer);
+          if (this.isActivePlaybackSession(sessionId) && this.synthesizer === synthesizer) {
+            this.synthesizer = void 0;
+          }
         },
         (error) => {
+          this.closeResource(synthesizer);
+          if (!this.isActivePlaybackSession(sessionId)) {
+            return;
+          }
+          if (this.synthesizer === synthesizer) {
+            this.synthesizer = void 0;
+          }
           if (isLikelyAuthorizationError(error)) {
             this.authorizationManager.clearAuthorization();
           }
           this.dispatchError(error, "SYNTHESIS_ERROR");
-          this.closeSynthesizer();
           void this.stopPlayer();
         }
       );
@@ -9129,23 +9143,16 @@ class TextToSpeech {
     this.textToRead = chain.map((segment) => segment.text).join(" ");
     this.highlightDiv = void 0;
     this.originalHighlightDivInnerHTML = "";
-    this.wordEncounters = [];
-    this.previousWordBoundary = void 0;
-    this.prevTextOffset = 0;
-    this.playbackTextOffsetBase = void 0;
-    this.currentWord = "";
-    this.currentOffset = 0;
-    this.wordBoundaryOffset = 0;
+    this.resetHighlightState();
   }
   getHighlightDivForNode(node) {
-    var _a;
-    if (!node.hasAttribute("co-tts.highlight")) {
+    var _a, _b, _c, _d;
+    if (!((_a = node == null ? void 0 : node.hasAttribute) == null ? void 0 : _a.call(node, "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
-      );
+    const highlightTarget = (_c = (_b = node.attributes.getNamedItem("co-tts.highlight")) == null ? void 0 : _b.value) != null ? _c : "";
+    if (highlightTarget !== "") {
+      return (_d = document.getElementById(highlightTarget)) != null ? _d : void 0;
     }
     return node;
   }
@@ -9158,16 +9165,14 @@ class TextToSpeech {
   }
   updateChainedHighlight(wordBoundary) {
     var _a, _b;
-    if (~[".", ",", "!", "?", "*", "(", ")", "&", "\\", "/", "^", "[", "]", "<", ">", ":"].indexOf(wordBoundary.text)) {
+    if (~PUNCTUATION_MARKS.indexOf(wordBoundary.text)) {
       wordBoundary = (_a = this.previousWordBoundary) != null ? _a : void 0;
     }
     if (!wordBoundary) {
       this.resetPlaybackSegments();
       return;
     }
-    if (this.playbackTextOffsetBase === void 0) {
-      this.playbackTextOffsetBase = wordBoundary.textOffset;
-    }
+    this.ensurePlaybackTextOffsetBase();
     const normalizedTextOffset = Math.max(
       0,
       wordBoundary.textOffset - ((_b = this.playbackTextOffsetBase) != null ? _b : 0)
@@ -9179,21 +9184,13 @@ class TextToSpeech {
       return;
     }
     const relativeTextOffset = normalizedTextOffset - segment.start;
-    const currentOffset = this.getPosition(
+    this.highlightTextRange(
+      segment.highlightDiv,
       segment.originalHighlightDivInnerHTML,
-      wordBoundary.text,
-      relativeTextOffset
+      relativeTextOffset,
+      wordBoundary.wordLength,
+      segment.text
     );
-    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) {
@@ -9300,7 +9297,7 @@ class TextToSpeech {
     this.prefetchPromises.set(key, prefetchPromise);
   }
   async playPrefetchedNode(node) {
-    var _a, _b, _c;
+    var _a, _b;
     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);
@@ -9309,39 +9306,28 @@ class TextToSpeech {
       return false;
     }
     this.prefetchedAudio.delete(key);
+    const sessionId = this.createPlaybackSession();
+    this.resetHighlightState();
     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();
+    this.playbackSegments = [];
+    this.setHighlightTargetFromNode(node);
     try {
       const audio = new Audio(prefetch.url);
       this.activePrefetchedAudioUrl = prefetch.url;
       this.player = audio;
       audio.addEventListener("play", () => {
+        if (!this.isActivePlaybackSession(sessionId)) {
+          return;
+        }
         document.dispatchEvent(new CustomEvent("COAzureTTSStartedPlaying", {}));
       }, { once: true });
       audio.addEventListener("ended", async () => {
         var _a2;
+        if (!this.isActivePlaybackSession(sessionId)) {
+          return;
+        }
         const clickedNode = this.clickedNode;
         const nextNodeId = ((_a2 = clickedNode == null ? void 0 : clickedNode.hasAttribute) == null ? void 0 : _a2.call(clickedNode, "co-tts.next")) ? clickedNode.getAttribute("co-tts.next") : null;
         await this.stopPlayer();
@@ -9361,101 +9347,253 @@ class TextToSpeech {
         }
       }, { once: true });
       audio.addEventListener("error", () => {
+        if (!this.isActivePlaybackSession(sessionId)) {
+          return;
+        }
         this.dispatchError(
           new Error("Prefetched audio resource closed unexpectedly."),
           "AUDIO_RESOURCE_ERROR"
         );
         void this.stopPlayer();
       }, { once: true });
+      if (this.shouldHighlight()) {
+        this.startHighlightingInterval(sessionId);
+      }
       void this.prefetchNextNode(node);
       await audio.play();
       return true;
     } catch (error) {
+      this.stopHighlightingInterval();
       this.dispatchError(error, "AUDIO_RESOURCE_ERROR");
       await this.stopPlayer();
       return false;
     }
   }
-  async clearInterval() {
-    clearInterval(this.interval);
+  createPlaybackSession() {
+    this.playbackSessionId += 1;
+    return this.playbackSessionId;
   }
-  async createInterval() {
-    this.interval = setInterval(() => {
-      var _a;
-      if (this.player !== void 0 && (this.highlightDiv || this.playbackSegments.length > 0)) {
-        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 (this.playbackSegments.length > 0) {
-            this.updateChainedHighlight(wordBoundary);
-            return;
-          }
-          if (~[".", ",", "!", "?", "*", "(", ")", "&", "\\", "/", "^", "[", "]", "<", ">", ":"].indexOf(wordBoundary.text)) {
-            wordBoundary = (_a = this.previousWordBoundary) != null ? _a : void 0;
-          }
-          if (wordBoundary === void 0 || this.prevTextOffset > wordBoundary.prevTextOffset) {
-            this.highlightDiv.innerHTML = this.originalHighlightDivInnerHTML;
-          } else {
-            if (!this.wordEncounters[wordBoundary.text]) {
-              this.wordEncounters[wordBoundary.text] = 0;
-            }
-            this.prevTextOffset = wordBoundary.prevTextOffset;
-            if (this.currentWord !== wordBoundary.text || this.wordBoundaryOffset !== wordBoundary.textOffset) {
-              this.currentOffset = this.getPosition(
-                this.originalHighlightDivInnerHTML,
-                wordBoundary.text,
-                wordBoundary.textOffset
-              );
-              this.wordEncounters[wordBoundary.text] = this.currentOffset + wordBoundary.wordLength;
-              this.currentWord = wordBoundary.text;
-              this.wordBoundaryOffset = wordBoundary.textOffset;
-            }
-            if (this.currentOffset === Number.MAX_SAFE_INTEGER) {
-              this.highlightDiv.innerHTML = this.originalHighlightDivInnerHTML;
-            } else {
-              this.previousWordBoundary = wordBoundary;
-              const startOfString = this.originalHighlightDivInnerHTML.substring(0, this.currentOffset);
-              const endOffset = this.currentOffset + wordBoundary.wordLength;
-              const endOfString = this.originalHighlightDivInnerHTML.substring(endOffset);
-              this.highlightDiv.innerHTML = `
-                                ${startOfString}<mark class='co-tts-highlight'>${wordBoundary.text}</mark>${endOfString}
-                            `;
-            }
-          }
-        } else if (this.playbackSegments.length > 0) {
-          this.resetPlaybackSegments();
-        } else {
-          this.highlightDiv.innerHTML = this.originalHighlightDivInnerHTML;
-        }
+  isActivePlaybackSession(sessionId) {
+    return sessionId === this.playbackSessionId;
+  }
+  invalidatePlaybackSession() {
+    this.playbackSessionId += 1;
+  }
+  stopHighlightingInterval() {
+    if (!this.highlightInterval) {
+      return;
+    }
+    clearInterval(this.highlightInterval);
+    this.highlightInterval = void 0;
+  }
+  startHighlightingInterval(sessionId) {
+    this.stopHighlightingInterval();
+    this.highlightInterval = setInterval(() => {
+      if (!this.isActivePlaybackSession(sessionId)) {
+        this.stopHighlightingInterval();
+        return;
       }
+      this.updateHighlightForCurrentTime(sessionId);
     }, 50);
   }
-  getPosition(string, subString, textOffset) {
-    let visibleOffset = 0;
-    let insideTag = false;
-    for (let htmlOffset = 0; htmlOffset < string.length; htmlOffset++) {
-      const character = string[htmlOffset];
-      if (character === "<") {
-        insideTag = true;
+  updateHighlightForCurrentTime(sessionId) {
+    var _a, _b;
+    if (!this.isActivePlaybackSession(sessionId) || this.player === void 0) {
+      return;
+    }
+    if (!this.shouldHighlight()) {
+      return;
+    }
+    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) {
+      this.resetCurrentHighlight();
+      return;
+    }
+    if (this.playbackSegments.length > 0) {
+      this.updateChainedHighlight(wordBoundary);
+      return;
+    }
+    if (~PUNCTUATION_MARKS.indexOf(wordBoundary.text)) {
+      wordBoundary = (_a = this.previousWordBoundary) != null ? _a : void 0;
+    }
+    if (wordBoundary === void 0 || this.prevTextOffset > wordBoundary.textOffset) {
+      this.resetCurrentHighlight();
+      return;
+    }
+    this.prevTextOffset = wordBoundary.textOffset;
+    this.ensurePlaybackTextOffsetBase();
+    const normalizedTextOffset = Math.max(
+      0,
+      wordBoundary.textOffset - ((_b = this.playbackTextOffsetBase) != null ? _b : 0)
+    );
+    this.highlightTextRange(
+      this.highlightDiv,
+      this.originalHighlightDivInnerHTML,
+      normalizedTextOffset,
+      wordBoundary.wordLength,
+      this.textToRead
+    );
+    this.previousWordBoundary = wordBoundary;
+    this.currentWord = wordBoundary.text;
+    this.wordBoundaryOffset = wordBoundary.textOffset;
+  }
+  highlightTextRange(target, originalHtml, textOffset, wordLength, spokenText) {
+    if (!target || wordLength <= 0 || textOffset < 0) {
+      return;
+    }
+    target.innerHTML = originalHtml;
+    const alignmentOffset = this.getSpokenTextDomOffset(target, spokenText);
+    const mappedOffset = textOffset + alignmentOffset;
+    const walker = document.createTreeWalker(
+      target,
+      NodeFilter.SHOW_TEXT
+    );
+    let currentOffset = 0;
+    let startNode;
+    let endNode;
+    let startOffset = 0;
+    let endOffset = 0;
+    const requestedEnd = mappedOffset + wordLength;
+    while (walker.nextNode()) {
+      const node = walker.currentNode;
+      const nodeLength = node.data.length;
+      const nodeStart = currentOffset;
+      const nodeEnd = currentOffset + nodeLength;
+      if (!startNode && mappedOffset >= nodeStart && mappedOffset < nodeEnd) {
+        startNode = node;
+        startOffset = mappedOffset - nodeStart;
+      }
+      if (requestedEnd > nodeStart && requestedEnd <= nodeEnd) {
+        endNode = node;
+        endOffset = requestedEnd - nodeStart;
+        break;
       }
-      if (!insideTag) {
-        if (visibleOffset === textOffset) {
-          return htmlOffset;
-        }
-        visibleOffset++;
+      currentOffset = nodeEnd;
+    }
+    if (!startNode || !endNode) {
+      return;
+    }
+    const range = document.createRange();
+    try {
+      range.setStart(startNode, startOffset);
+      range.setEnd(endNode, endOffset);
+      if (!this.isRangeVisuallyVisible(range, target)) {
+        return;
       }
-      if (character === ">") {
-        insideTag = false;
+      const mark = document.createElement("mark");
+      mark.className = "co-tts-highlight";
+      mark.appendChild(range.extractContents());
+      range.insertNode(mark);
+    } catch {
+      target.innerHTML = originalHtml;
+    }
+  }
+  getSpokenTextDomOffset(target, spokenText) {
+    var _a;
+    if (!spokenText) {
+      return 0;
+    }
+    const targetText = (_a = target.textContent) != null ? _a : "";
+    if (targetText === "" || targetText === spokenText) {
+      return 0;
+    }
+    const index = targetText.indexOf(spokenText);
+    return index >= 0 ? index : 0;
+  }
+  isRangeVisuallyVisible(range, target) {
+    if (typeof range.getClientRects !== "function") {
+      return true;
+    }
+    let rects;
+    try {
+      rects = Array.from(range.getClientRects()).filter(
+        (rect) => rect.width > 0 && rect.height > 0
+      );
+    } catch {
+      return true;
+    }
+    if (rects.length === 0) {
+      return true;
+    }
+    const clipRect = this.getClippingRect(target);
+    return rects.some((rect) => this.rectsOverlap(rect, clipRect));
+  }
+  getClippingRect(target) {
+    let clipElement = target;
+    while (clipElement) {
+      if (this.isClippingElement(clipElement)) {
+        return clipElement.getBoundingClientRect();
       }
+      clipElement = clipElement.parentElement;
+    }
+    return target.getBoundingClientRect();
+  }
+  isClippingElement(element) {
+    var _a;
+    const style = (_a = globalThis.getComputedStyle) == null ? void 0 : _a.call(globalThis, element);
+    if (!style) {
+      return false;
+    }
+    const overflowX = style.overflowX || style.overflow;
+    const overflowY = style.overflowY || style.overflow;
+    const clipsOverflow = this.isClippingOverflowValue(overflowX) || this.isClippingOverflowValue(overflowY);
+    if (clipsOverflow) {
+      return true;
+    }
+    const lineClamp = style.getPropertyValue("-webkit-line-clamp").trim();
+    return lineClamp !== "" && lineClamp !== "none";
+  }
+  isClippingOverflowValue(value) {
+    return value === "hidden" || value === "auto" || value === "scroll" || value === "clip";
+  }
+  rectsOverlap(a, b) {
+    return a.right > b.left && a.left < b.right && a.bottom > b.top && a.top < b.bottom;
+  }
+  setHighlightTargetFromNode(node) {
+    var _a;
+    const highlightDiv = this.getHighlightDivForNode(node);
+    this.highlightDiv = highlightDiv;
+    this.originalHighlightDivInnerHTML = (_a = highlightDiv == null ? void 0 : highlightDiv.innerHTML) != null ? _a : "";
+  }
+  shouldHighlight() {
+    if (this.highlightDiv) {
+      return true;
+    }
+    return this.playbackSegments.some((segment) => Boolean(segment.highlightDiv));
+  }
+  resetHighlightState() {
+    this.prevTextOffset = 0;
+    this.previousWordBoundary = void 0;
+    this.currentWord = "";
+    this.currentOffset = 0;
+    this.wordBoundaryOffset = 0;
+    this.playbackTextOffsetBase = void 0;
+  }
+  ensurePlaybackTextOffsetBase() {
+    if (this.playbackTextOffsetBase !== void 0 || this.wordBoundryList.length === 0) {
+      return;
+    }
+    this.playbackTextOffsetBase = this.wordBoundryList.reduce(
+      (minimum, boundary) => Math.min(minimum, boundary.textOffset),
+      this.wordBoundryList[0].textOffset
+    );
+  }
+  resetCurrentHighlight() {
+    if (this.playbackSegments.length > 0) {
+      this.resetPlaybackSegments();
+      return;
+    }
+    if (this.highlightDiv) {
+      this.highlightDiv.innerHTML = this.originalHighlightDivInnerHTML;
     }
-    return string.indexOf(subString);
   }
   buildSSML(text) {
     let ssml = `<speak xmlns="http://www.w3.org/2001/10/synthesis" 
@@ -9477,10 +9615,6 @@ class TextToSpeech {
     p.textContent = input;
     return p.innerHTML;
   }
-  closeSynthesizer() {
-    this.closeResource(this.synthesizer);
-    this.synthesizer = void 0;
-  }
   closeResource(resource) {
     if (!resource || typeof resource.close !== "function") {
       return;