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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@creativeorange/azure-text-to-speech",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "main": "dist/co-azure-tts.umd.js",
   "browser": "dist/co-azure-tts.es.js",
   "scripts": {

package/src/TextToSpeech.ts

@@ -39,6 +39,7 @@ export class TextToSpeech {
     prefetchedAudio: Map<string, any> = new Map();
     prefetchPromises: Map<string, Promise<any>> = new Map();
     activePrefetchedAudioUrl: string = '';
+    playbackSegments: any[] = [];
 
     constructor(key: string, region: string, voice: string, rate: number = 0, pitch: number = 0, url: string = '') {
         this.key = key;
@@ -240,6 +241,8 @@ export class TextToSpeech {
         this.originalHighlightDivInnerHTML = '';
         this.wordBoundryList = [];
         this.wordEncounters = [];
+        this.resetPlaybackSegments();
+        this.playbackSegments = [];
         if (this.player !== undefined) {
             this.player.pause();
         }
@@ -267,9 +270,25 @@ export class TextToSpeech {
             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'));
 
@@ -291,7 +310,9 @@ export class TextToSpeech {
             document.dispatchEvent(new CustomEvent('COAzureTTSStartedPlaying', {}));
         };
 
-        this.prefetchNextNode(this.clickedNode);
+        if (!isChainedPlayback) {
+            this.prefetchNextNode(this.clickedNode);
+        }
 
         this.synthesizer.speakSsmlAsync(this.buildSSML(this.textToRead),
             () => {
@@ -304,6 +325,120 @@ export class TextToSpeech {
             });
     }
 
+    collectPlaybackChain(node: any) {
+        const chain = [];
+        const seenNodeIds = new Set<string>();
+        let currentNode = node;
+        let offset = 0;
+
+        while (currentNode && !seenNodeIds.has(currentNode.id)) {
+            seenNodeIds.add(currentNode.id);
+
+            const attr = currentNode.attributes.getNamedItem('co-tts.text') ?? 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: highlightDiv?.innerHTML ?? '',
+            });
+
+            offset += text.length + 2;
+
+            if (!currentNode.hasAttribute('co-tts.next')) {
+                break;
+            }
+
+            currentNode = document.getElementById(currentNode.getAttribute('co-tts.next'));
+        }
+
+        return chain;
+    }
+
+    preparePlaybackChain(chain: any[]) {
+        this.playbackSegments = chain;
+        this.textToRead = chain.map((segment) => segment.text).join('. ');
+        this.highlightDiv = undefined;
+        this.originalHighlightDivInnerHTML = '';
+        this.wordEncounters = [];
+        this.previousWordBoundary = undefined;
+        this.prevTextOffset = 0;
+        this.currentWord = '';
+        this.currentOffset = 0;
+        this.wordBoundaryOffset = 0;
+    }
+
+    getHighlightDivForNode(node: any) {
+        if (!node.hasAttribute('co-tts.highlight')) {
+            return undefined;
+        }
+
+        if (node.attributes.getNamedItem('co-tts.highlight')?.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: any) {
+        if (~['.', ',', '!', '?', '*', '(', ')', '&', '\\', '/', '^', '[', ']', '<', '>', ':'].indexOf(wordBoundary.text)) {
+            wordBoundary = this.previousWordBoundary ?? undefined;
+        }
+
+        if (!wordBoundary) {
+            this.resetPlaybackSegments();
+
+            return;
+        }
+
+        const segment = this.playbackSegments.find((candidate) => (
+            wordBoundary.textOffset >= candidate.start && wordBoundary.textOffset < candidate.end
+        ));
+
+        this.resetPlaybackSegments();
+
+        if (!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: any, attr?: Attr | null) {
         if (attr && attr.value !== '') {
             return attr.value;
@@ -497,6 +632,12 @@ export class TextToSpeech {
                 }
 
                 if (wordBoundary !== undefined) {
+                    if (this.playbackSegments.length > 0) {
+                        this.updateChainedHighlight(wordBoundary);
+
+                        return;
+                    }
+
                     if (~['.', ',', '!', '?', '*', '(', ')', '&', '\\', '/', '^', '[', ']', '<', '>', ':']
                         .indexOf(wordBoundary.text)) {
                         wordBoundary = this.previousWordBoundary ?? undefined;