@creativeorange/azure-text-to-speech 3.0.0 → 3.0.2

package/src/TextToSpeech.ts

@@ -1,846 +0,0 @@
-import {
-    SpeakerAudioDestination,
-    AudioConfig,
-    SpeechConfig,
-    SpeechSynthesizer,
-    SpeechSynthesisOutputFormat,
-} from 'microsoft-cognitiveservices-speech-sdk';
-import {
-    SpeechAuthenticationOptions,
-    SpeechAuthorizationManager,
-    toSafeErrorDetail,
-} from './authentication';
-
-export type TextToSpeechOptions = SpeechAuthenticationOptions & {
-    region?: string;
-    voice: string;
-    rate?: number;
-    pitch?: number;
-    url?: string;
-};
-
-export class TextToSpeech {
-    region: string;
-    voice: string;
-    rate: number;
-    pitch: number;
-
-    textToRead: string = '';
-
-    wordBoundryList: any[] = [];
-
-    clickedNode: any;
-    highlightDiv: any;
-
-    speechConfig: any;
-    audioConfig: any;
-    player: any;
-    synthesizer: any;
-
-    previousWordBoundary: any;
-
-    interval: any;
-
-    wordEncounters: number[] = [];
-    originalHighlightDivInnerHTML: string = '';
-    currentWord: string = '';
-    currentOffset: number = 0;
-    wordBoundaryOffset: number = 0;
-    playbackTextOffsetBase: number | undefined;
-    prevTextOffset: number = 0;
-    url: string = '';
-    prefetchedAudio: Map<string, any> = new Map();
-    prefetchPromises: Map<string, Promise<any>> = new Map();
-    activePrefetchedAudioUrl: string = '';
-    playbackSegments: any[] = [];
-
-    private readonly authorizationManager: SpeechAuthorizationManager;
-
-    constructor(options: TextToSpeechOptions) {
-        if (!options || typeof options.voice !== 'string' || options.voice.trim() === '') {
-            throw new Error('A voice is required.');
-        }
-
-        this.authorizationManager = new SpeechAuthorizationManager(options);
-        this.region = options.region?.trim() ?? '';
-        this.voice = options.voice;
-        this.rate = options.rate ?? 0;
-        this.pitch = options.pitch ?? 0;
-        this.url = options.url ?? '';
-    }
-
-    async start() {
-        await this.registerBindings(document);
-    }
-
-    setVoice(voice: string) {
-        this.voice = voice;
-        this.clearPrefetchedAudio();
-
-        return this;
-    }
-
-    setRate(rate: number) {
-        this.rate = rate;
-        this.clearPrefetchedAudio();
-
-        return this;
-    }
-
-    setPitch(pitch: number) {
-        this.pitch = pitch;
-        this.clearPrefetchedAudio();
-
-        return this;
-    }
-
-    async registerBindings(node: any) {
-        const nodes = node.childNodes;
-        for (let i = 0; i < nodes.length; i++) {
-            if (!nodes[i]) {
-                continue;
-            }
-
-            const currentNode = nodes[i];
-
-            if (currentNode.attributes) {
-                if (currentNode.attributes.getNamedItem('co-tts.id')) {
-                    await this.handleIdModifier(currentNode, currentNode.attributes.getNamedItem('co-tts.id'));
-                } else if (currentNode.attributes.getNamedItem('co-tts.ajax')) {
-                    await this.handleAjaxModifier(currentNode, currentNode.attributes.getNamedItem('co-tts.ajax'));
-                } else if (currentNode.attributes.getNamedItem('co-tts')) {
-                    await this.handleDefault(currentNode, currentNode.attributes.getNamedItem('co-tts'));
-                } else if (currentNode.attributes.getNamedItem('co-tts.stop')) {
-                    await this.handleStopModifier(currentNode, currentNode.attributes.getNamedItem('co-tts.stop'));
-                } else if (currentNode.attributes.getNamedItem('co-tts.resume')) {
-                    await this.handleResumeModifier(currentNode, currentNode.attributes.getNamedItem('co-tts.resume'));
-                } else if (currentNode.attributes.getNamedItem('co-tts.pause')) {
-                    await this.handlePauseModifier(currentNode, currentNode.attributes.getNamedItem('co-tts.pause'));
-                }
-            }
-
-            if (currentNode.childNodes.length > 0) {
-                await this.registerBindings(currentNode);
-            }
-        }
-    }
-
-    async handleIdModifier(node: any, attr: Attr) {
-        node.addEventListener('click', async (_: any) => {
-            this.stopPlayer();
-            await this.createInterval();
-            const referenceDiv = document.getElementById(attr.value);
-            this.clickedNode = referenceDiv;
-
-            if (!referenceDiv) {
-                return;
-            }
-
-            if (referenceDiv.hasAttribute('co-tts.text') && referenceDiv.getAttribute('co-tts.text') !== '') {
-                this.textToRead = referenceDiv.getAttribute('co-tts.text') ?? '';
-            } else {
-                this.textToRead = referenceDiv.innerText ?? referenceDiv.textContent ?? '';
-            }
-
-            if (referenceDiv.hasAttribute('co-tts.highlight')) {
-                if (referenceDiv.attributes.getNamedItem('co-tts.highlight')?.value !== '') {
-                    const newReferenceDiv =
-                        document.getElementById(referenceDiv.attributes.getNamedItem('co-tts.highlight').value);
-
-                    this.highlightDiv = newReferenceDiv;
-                    this.originalHighlightDivInnerHTML = newReferenceDiv.innerHTML;
-                } else {
-                    this.highlightDiv = referenceDiv;
-                    this.originalHighlightDivInnerHTML = referenceDiv.innerHTML;
-                }
-            }
-
-            await this.startSynthesizer(node, attr);
-        });
-    }
-
-    async handleAjaxModifier(node: any, attr: Attr) {
-        node.addEventListener('click', async (_: any) => {
-            this.stopPlayer();
-            await this.createInterval();
-            this.clickedNode = node;
-            const response = await fetch(attr.value, {
-                method: `GET`,
-            });
-
-            this.textToRead = await response.text();
-
-            await 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')) {
-                if (node.attributes.getNamedItem('co-tts.highlight')?.value !== '') {
-                    const newReferenceDiv = document.getElementById(node.attributes.getNamedItem('co-tts.highlight').value);
-
-                    this.highlightDiv = newReferenceDiv;
-                    this.originalHighlightDivInnerHTML = newReferenceDiv.innerHTML;
-                } else {
-                    this.highlightDiv = node;
-                    this.originalHighlightDivInnerHTML = node.innerHTML;
-                }
-            }
-            if (attr.value === '') {
-                this.textToRead = node.innerText ?? node.textContent ?? '';
-            } else {
-                this.textToRead = attr.value;
-            }
-
-            await this.startSynthesizer(node, attr);
-        });
-    }
-
-    async handleWithoutClick(node: any, attr: Attr) {
-        this.stopPlayer();
-        await this.createInterval();
-        this.clickedNode = node;
-        if (node.hasAttribute('co-tts.highlight')) {
-            if (node.attributes.getNamedItem('co-tts.highlight')?.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;
-            }
-        }
-        if (attr.value === '') {
-            this.textToRead = node.innerText ?? node.textContent ?? '';
-        } else {
-            this.textToRead = attr.value;
-        }
-
-        await 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.originalHighlightDivInnerHTML;
-        }
-
-        this.textToRead = '';
-        this.currentWord = '';
-        this.originalHighlightDivInnerHTML = '';
-        this.wordBoundryList = [];
-        this.wordEncounters = [];
-        this.resetPlaybackSegments();
-        this.playbackSegments = [];
-        if (this.player !== undefined) {
-            this.player.pause();
-        }
-        if (this.activePrefetchedAudioUrl !== '') {
-            URL.revokeObjectURL(this.activePrefetchedAudioUrl);
-            this.activePrefetchedAudioUrl = '';
-        }
-        this.closeSynthesizer();
-        this.player = undefined;
-        this.audioConfig = undefined;
-        this.speechConfig = undefined;
-        this.highlightDiv = undefined;
-        this.prevTextOffset = 0;
-        this.playbackTextOffsetBase = undefined;
-    }
-
-    private async createSpeechConfig(): Promise<SpeechConfig> {
-        const authorization =
-            await this.authorizationManager.getAuthorization();
-
-        const speechConfig = SpeechConfig.fromAuthorizationToken(
-            authorization.token,
-            authorization.region,
-        );
-
-        speechConfig.speechSynthesisVoiceName =
-            `Microsoft Server Speech Text to Speech Voice (${this.voice})`;
-
-        speechConfig.speechSynthesisOutputFormat =
-            SpeechSynthesisOutputFormat.Audio24Khz160KBitRateMonoMp3;
-
-        this.region = authorization.region;
-
-        return speechConfig;
-    }
-
-    async startSynthesizer(node: any, attr: 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: any, e: any) => {
-                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) {
-                        nextNode.dispatchEvent(new Event('click'));
-                    }
-                } else {
-                    document.dispatchEvent(new CustomEvent('COAzureTTSFinishedPlaying', {}));
-                }
-            };
-
-            this.player.onAudioStart = async () => {
-                document.dispatchEvent(new CustomEvent('COAzureTTSStartedPlaying', {}));
-            };
-
-            if (!isChainedPlayback) {
-                this.prefetchNextNode(this.clickedNode);
-            }
-
-            this.synthesizer.speakSsmlAsync(this.buildSSML(this.textToRead),
-                () => {
-                    this.closeSynthesizer();
-                },
-                (error: unknown) => {
-                    this.dispatchError(error, 'SYNTHESIS_ERROR');
-                    this.closeSynthesizer();
-                    this.stopPlayer();
-                });
-        } catch (error) {
-            this.dispatchError(error);
-            await this.stopPlayer();
-        }
-    }
-
-    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 + 1;
-
-            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.playbackTextOffsetBase = undefined;
-        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;
-        }
-
-        if (this.playbackTextOffsetBase === undefined) {
-            this.playbackTextOffsetBase = wordBoundary.textOffset;
-        }
-
-        const normalizedTextOffset = Math.max(0, wordBoundary.textOffset - this.playbackTextOffsetBase);
-        const segment = this.playbackSegments.find((candidate) => (
-            normalizedTextOffset >= candidate.start && normalizedTextOffset < candidate.end
-        ));
-
-        this.resetPlaybackSegments();
-
-        if (!segment?.highlightDiv) {
-            this.previousWordBoundary = wordBoundary;
-
-            return;
-        }
-
-        const relativeTextOffset = normalizedTextOffset - 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;
-        }
-
-        if (node.hasAttribute('co-tts.text') && node.getAttribute('co-tts.text') !== '') {
-            return node.getAttribute('co-tts.text') ?? '';
-        }
-
-        return node.innerText ?? node.textContent ?? '';
-    }
-
-    getPrefetchKey(node: any, text: string) {
-        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: any) {
-        if (!node || !node.hasAttribute('co-tts.next')) {
-            return;
-        }
-
-        const nextNode = document.getElementById(node.getAttribute('co-tts.next'));
-
-        if (!nextNode) {
-            return;
-        }
-
-        const attr = nextNode.attributes.getNamedItem('co-tts.text') ?? 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;
-        }
-
-        let synthesizer: SpeechSynthesizer | undefined;
-
-        const prefetchPromise = (async () => {
-            try {
-                const speechConfig = await this.createSpeechConfig();
-                synthesizer = new SpeechSynthesizer(speechConfig, null);
-                const wordBoundryList: any[] = [];
-
-                synthesizer.wordBoundary = (s: any, e: any) => {
-                    wordBoundryList.push(e);
-                };
-
-                return await new Promise((resolve) => {
-                    synthesizer?.speakSsmlAsync(this.buildSSML(text),
-                        (result: any) => {
-                            this.closeResource(synthesizer);
-                            synthesizer = undefined;
-
-                            if (!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);
-                        },
-                        (error: unknown) => {
-                            this.closeResource(synthesizer);
-                            synthesizer = undefined;
-                            this.dispatchError(error, 'PREFETCH_ERROR');
-                            resolve(null);
-                        });
-                });
-            } catch (error) {
-                this.closeResource(synthesizer);
-                synthesizer = undefined;
-                this.dispatchError(error);
-                return null;
-            }
-        })().finally(() => {
-            this.prefetchPromises.delete(key);
-        });
-
-        this.prefetchPromises.set(key, prefetchPromise);
-    }
-
-    async playPrefetchedNode(node: any) {
-        const attr = node.attributes.getNamedItem('co-tts.text') ?? node.attributes.getNamedItem('co-tts');
-        const text = this.getNodeText(node, attr);
-        const key = this.getPrefetchKey(node, text);
-        const prefetch = this.prefetchedAudio.get(key) ?? 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 = undefined;
-        this.prevTextOffset = 0;
-        this.currentWord = '';
-        this.currentOffset = 0;
-        this.wordBoundaryOffset = 0;
-
-        if (node.hasAttribute('co-tts.highlight')) {
-            if (node.attributes.getNamedItem('co-tts.highlight')?.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();
-
-        try {
-            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});
-
-            audio.addEventListener('error', () => {
-                this.dispatchError(
-                    new Error('Prefetched audio resource closed unexpectedly.'),
-                    'AUDIO_RESOURCE_ERROR',
-                );
-                this.stopPlayer();
-            }, {once: true});
-
-            this.prefetchNextNode(node);
-            await audio.play();
-
-            return true;
-        } catch (error) {
-            this.dispatchError(error, 'AUDIO_RESOURCE_ERROR');
-            await this.stopPlayer();
-
-            return false;
-        }
-    }
-
-    async clearInterval() {
-        clearInterval(this.interval);
-    }
-
-    async createInterval() {
-        this.interval = setInterval(() => {
-            if (this.player !== undefined && (this.highlightDiv || this.playbackSegments.length > 0)) {
-                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 (this.playbackSegments.length > 0) {
-                        this.updateChainedHighlight(wordBoundary);
-
-                        return;
-                    }
-
-                    if (~['.', ',', '!', '?', '*', '(', ')', '&', '\\', '/', '^', '[', ']', '<', '>', ':']
-                        .indexOf(wordBoundary.text)) {
-                        wordBoundary = this.previousWordBoundary ?? undefined;
-                    }
-
-                    if (wordBoundary === undefined || 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;
-                }
-            }
-        }, 50);
-    }
-
-    getPosition(string: string, subString: string, textOffset: number) {
-        let visibleOffset = 0;
-        let insideTag = false;
-
-        for (let htmlOffset = 0; htmlOffset < string.length; htmlOffset++) {
-            const character = string[htmlOffset];
-
-            if (character === '<') {
-                insideTag = true;
-            }
-
-            if (!insideTag) {
-                if (visibleOffset === textOffset) {
-                    return htmlOffset;
-                }
-
-                visibleOffset++;
-            }
-
-            if (character === '>') {
-                insideTag = false;
-            }
-        }
-
-        return string.indexOf(subString);
-    }
-
-    buildSSML(text: string) {
-        let ssml = `<speak xmlns="http://www.w3.org/2001/10/synthesis" 
-            xmlns:mstts="http://www.w3.org/2001/mstts" 
-            xmlns:emo="http://www.w3.org/2009/10/emotionml" 
-            version="1.0" 
-            xml:lang="en-US">
-            <voice name="${this.voice}">`;
-
-        if (this.url !== '') {
-            ssml += `<lexicon uri="${this.url}"/>`;
-        }
-
-        ssml += `<prosody rate="${this.rate}%" pitch="${this.pitch}%">
-            ${this.convertHtmlEntities(text)}
-        </prosody></voice></speak>`;
-        return ssml;
-    }
-
-    convertHtmlEntities(input: string) {
-        const p = document.createElement(`p`);
-        p.textContent = input;
-
-        return p.innerHTML;
-    }
-
-    private closeSynthesizer() {
-        this.closeResource(this.synthesizer);
-        this.synthesizer = undefined;
-    }
-
-    private closeResource(resource: {close?: () => void} | undefined) {
-        if (!resource || typeof resource.close !== 'function') {
-            return;
-        }
-
-        try {
-            resource.close();
-        } catch {
-            // Resource may already be closed.
-        }
-    }
-
-    private dispatchError(error: unknown, code?: string) {
-        const detail = toSafeErrorDetail(error);
-        if (code && !detail.code) {
-            detail.code = code;
-        }
-
-        document.dispatchEvent(
-            new CustomEvent('COAzureTTSError', {
-                detail: {
-                    error: detail,
-                },
-            }),
-        );
-    }
-}