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

package/package.json

@@ -1,21 +1,23 @@
 {
   "name": "@creativeorange/azure-text-to-speech",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "main": "dist/co-azure-tts.umd.js",
   "browser": "dist/co-azure-tts.es.js",
   "scripts": {
-    "serve-vite": "vite",
-    "build-vite": "vite build --watch",
-    "preview-vite": "vite preview"
+    "build": "vite build --watch"
   },
   "license": "MIT",
   "author": "Edsardio",
   "devDependencies": {
+    "@originjs/vite-plugin-commonjs": "^1.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.33.0",
     "build-esm": "^4.2.2",
+    "eslint": "^8.21.0",
+    "eslint-config-google": "^0.14.0",
     "microsoft-cognitiveservices-speech-sdk": "^1.22.0",
     "typescript": "^4.7.4",
-    "vite-plugin-env-compatible": "^1.1.1",
     "vite": "^2.7.2",
-    "@originjs/vite-plugin-commonjs": "^1.0.1"
+    "vite-plugin-env-compatible": "^1.1.1",
+    "vite-plugin-eslint": "^1.7.0"
   }
-}
+}

package/src/main.ts

@@ -1,7 +1,12 @@
-import { SpeakerAudioDestination, AudioConfig, OutputFormat, Recognizer, SpeechConfig, SpeechRecognizer, SpeechSynthesizer } from 'microsoft-cognitiveservices-speech-sdk';
+import {
+    SpeakerAudioDestination,
+    AudioConfig,
+    SpeechConfig,
+    SpeechSynthesizer,
+    SpeechSynthesisOutputFormat,
+} from 'microsoft-cognitiveservices-speech-sdk';
 
 export default class TextToSpeech {
-
     key: string;
     region: string;
     voice: string;
@@ -20,55 +25,32 @@ export default class TextToSpeech {
 
     previousWordBoundary: any;
 
+    interval: any;
+
+    wordEncounters: number[] = [];
+    originalHighlightDivInnerHTML: string = '';
+    currentWord: string = '';
+    currentOffset: number = 0;
+
 
-    constructor(key: string, region: string, voice: string = 'male') {
+    constructor(key: string, region: string, voice: string) {
         this.key = key;
         this.region = region;
         this.voice = voice;
     }
 
     async start() {
-        setInterval(() => {
-          if (this.player !== undefined && this.highlightDiv) {
-            const currentTime = this.player.currentTime;
-            let wordBoundary;
-            for (const e of this.wordBoundryList) {
-              if (currentTime * 1000 > e.audioOffset / 10000) {
-                wordBoundary = e;
-              } else {
-                break;
-              }
-            }
-            if (~['.', ',', '!', '?'].indexOf(wordBoundary.text)) {
-                wordBoundary = this.previousWordBoundary ?? undefined;
-            }
-
-            if (wordBoundary !== undefined) {
-                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: any) {
-        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')) {
@@ -95,8 +77,9 @@ export default class TextToSpeech {
     async handleIdModifier(node: any, attr: Attr) {
         node.addEventListener('click', async (_: any) => {
             this.stopPlayer();
+            await this.createInterval();
             this.clickedNode = node;
-            let referenceDiv = document.getElementById(attr.value);
+            const referenceDiv = document.getElementById(attr.value);
 
             if (!referenceDiv) {
                 return;
@@ -105,11 +88,12 @@ export default class TextToSpeech {
             if (referenceDiv.hasAttribute('co-tts.text') && referenceDiv.getAttribute('co-tts.text') !== '') {
                 this.textToRead = referenceDiv.getAttribute('co-tts.text') ?? '';
             } 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);
@@ -119,26 +103,29 @@ export default class TextToSpeech {
     async handleAjaxModifier(node: any, attr: Attr) {
         node.addEventListener('click', async (_: any) => {
             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();
 
             this.startSynthesizer(node, attr);
-        })
+        });
     }
 
     async handleDefault(node: any, attr: Attr) {
         node.addEventListener('click', async (_: any) => {
             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;
+            if (attr.value === '') {
+                this.textToRead = node.innerHTML;
             } else {
                 this.textToRead = attr.value;
             }
@@ -147,31 +134,57 @@ export default class TextToSpeech {
         });
     }
 
+    async handleWithoutClick(node: any, attr: 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: any, attr: Attr) {
         node.addEventListener('click', async (_: any) => {
             await this.stopPlayer();
+            document.dispatchEvent(new CustomEvent('COAzureTTSStoppedPlaying', {}));
         });
     }
 
     async handlePauseModifier(node: any, attr: Attr) {
         node.addEventListener('click', async (_: any) => {
+            await this.clearInterval();
             await this.player.pause();
+            document.dispatchEvent(new CustomEvent('COAzureTTSPausedPlaying', {}));
         });
     }
 
     async handleResumeModifier(node: any, attr: Attr) {
         node.addEventListener('click', async (_: any) => {
+            await this.createInterval();
             await this.player.resume();
+            document.dispatchEvent(new CustomEvent('COAzureTTSResumedPlaying', {}));
         });
     }
 
     async stopPlayer() {
+        await this.clearInterval();
         if (this.highlightDiv !== undefined) {
-            this.highlightDiv.innerHTML = this.textToRead;
+            this.highlightDiv.innerHTML = this.originalHighlightDivInnerHTML;
         }
-        
+
         this.textToRead = '';
+        this.currentWord = '';
+        this.originalHighlightDivInnerHTML = '';
         this.wordBoundryList = [];
+        this.wordEncounters = [];
         if (this.player !== undefined) {
             this.player.pause();
         }
@@ -179,15 +192,11 @@ export default class TextToSpeech {
         this.highlightDiv = undefined;
     }
 
-    async startSynthesizer (node: any, attr: Attr) {
+    async startSynthesizer(node: any, attr: 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();
 
@@ -198,17 +207,25 @@ export default class TextToSpeech {
             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,
             () => {
                 this.synthesizer.close();
@@ -220,4 +237,61 @@ export default class TextToSpeech {
             });
     }
 
-}
+    async clearInterval() {
+        clearInterval(this.interval);
+    }
+
+    async createInterval() {
+        this.interval = setInterval(() => {
+            if (this.player !== undefined && this.highlightDiv) {
+                const currentTime = this.player.currentTime;
+                let wordBoundary;
+                for (const e of this.wordBoundryList) {
+                    if (currentTime * 1000 > e.audioOffset / 10000) {
+                        wordBoundary = e;
+                    } else {
+                        break;
+                    }
+                }
+
+                if (wordBoundary !== undefined) {
+                    if (~['.', ',', '!', '?'].indexOf(wordBoundary.text)) {
+                        wordBoundary = this.previousWordBoundary ?? undefined;
+                    }
+
+                    if (wordBoundary === undefined) {
+                        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: string, subString: string, index: number) {
+        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;
+    }
+}

package/test.xml

@@ -0,0 +1,9 @@
+<speak version='1.0' xml:lang='nl-NL'>
+    <voice xml:lang='nl-NL' name='nl-NL-ColetteNeural'>
+        Tijdens deze opdracht
+    <lexeme>
+        <grapheme>Scotland MV</grapheme>
+        <alias>Scotland Media Wave</alias>
+  </lexeme>
+    </voice>
+</speak>

package/vite.config.ts

@@ -1,8 +1,14 @@
 import { defineConfig } from 'vite';
 import path from 'path';
+import eslint from 'vite-plugin-eslint';
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  plugins: [
+    eslint({
+      fix: true
+    })
+  ],
   build: {
     lib: {
       entry: './src/main.ts',