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

package/src/TextToSpeech.ts

@@ -1,745 +0,0 @@
-import {
-    SpeakerAudioDestination,
-    AudioConfig,
-    SpeechConfig,
-    SpeechSynthesizer,
-    SpeechSynthesisOutputFormat,
-} from 'microsoft-cognitiveservices-speech-sdk';
-
-export class TextToSpeech {
-    key: string;
-    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[] = [];
-
-    constructor(key: string, region: string, voice: string, rate: number = 0, pitch: number = 0, url: string = '') {
-        this.key = key;
-        this.region = region;
-        this.voice = voice;
-        this.rate = rate;
-        this.pitch = pitch;
-        this.url = 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;
-            }
-
-            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;
-                }
-            }
-
-            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();
-
-            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;
-            } else {
-                this.textToRead = attr.value;
-            }
-
-            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;
-        } 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.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.player = undefined;
-        this.highlightDiv = undefined;
-        this.prevTextOffset = 0;
-        this.playbackTextOffsetBase = undefined;
-    }
-
-    async startSynthesizer(node: any, attr: Attr) {
-        this.speechConfig = SpeechConfig.fromSubscription(this.key, this.region);
-
-        this.speechConfig.speechSynthesisVoiceName = `Microsoft Server Speech Text to Speech Voice (${this.voice})`;
-        this.speechConfig.speechSynthesisOutputFormat = SpeechSynthesisOutputFormat.Audio24Khz160KBitRateMonoMp3;
-
-        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.synthesizer.close();
-                this.synthesizer = undefined;
-            },
-            () => {
-                this.synthesizer.close();
-                this.synthesizer = undefined;
-            });
-    }
-
-    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;
-    }
-
-    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;
-        }
-
-        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: any[] = [];
-
-        synthesizer.wordBoundary = (s: any, e: any) => {
-            wordBoundryList.push(e);
-        };
-
-        const prefetchPromise = new Promise((resolve) => {
-            synthesizer.speakSsmlAsync(this.buildSSML(text),
-                (result: any) => {
-                    synthesizer.close();
-
-                    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);
-                },
-                () => {
-                    synthesizer.close();
-                    resolve(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();
-
-        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);
-    }
-
-    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;
-    }
-}