tts-engine/test.html at master · RonenR/tts-engine · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="build/bundle.js"></script>
</head>
<body>
    <script>
        let tts = wsGlobals.TtsEngine;
        let shouldSpeak = false;
        let currentEl;

        console.log(tts);
        tts.init({
            onInit: (voices) => {
                console.log('init tts with voices: ', voices);
                let ul = document.querySelector('ul');
                if (ul) {
                    for (const voice of voices) {
                        let el = document.createElement("li");
                        el.innerHTML = voice.name + ", " + voice.lang + ", " + voice.voiceURI;
                        ul.append(el);
                    }
                }
            },

            onStart: () => {
                console.log('tts started');
                currentEl.scrollIntoView();
            },

            onDone: () => {
                console.log('tts done');
                if (shouldSpeak) {
                    caretProgress();
                    tts.speakOut(currentEl.innerHTML);
                }
            }
        });

        function speak() {
            shouldSpeak = true;
            if (!currentEl) {
                caretProgress();
            }
            tts.speakOut(currentEl.innerHTML);
        }

        function stop() {
            shouldSpeak = false;
            tts.stop();
        }

        function toggleSpeak() {
            if (shouldSpeak) {
                stop();
            } else {
                speak();
            }
        }

        function caretProgress() {
            if (!currentEl) {
                currentEl = document.querySelector('main');
                currentEl = currentEl.firstElementChild;
            } else {
                if (currentEl instanceof Element)
                currentEl = currentEl.nextElementSibling;
            }
        }
    </script>
    <div style="position: fixed;top: 0;">
        <button onclick="toggleSpeak()">Speak</button>
    </div>
    <br/><br/>
    <ul id="voicesList"></ul>
    <main>
        <p>1. Some text to read</p>
        <p>2. Hello!</p>
        <p>3. Ronen</p>
        <p>4. Some more text to read</p>
        <p>5. Some text to read</p>
        <p>6. Some text to read</p>
        <p>7. Some text to read</p>
        <p>8. Some text to read</p>
        <p>9. Some text to read</p>
        <p>10. Some text to read</p>
    </main>
</body>
</html>