ttsreader/test_google_voice_bug.html at master · RonenR/ttsreader · 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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>Test Google Voices Bug</title>
</head>
<body>
    <select id="voice_selector"></select>
    <div>
        <button id="toggle_speech_btn" 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>

    <script>
        function populateVoices(voices) {
            console.log('init tts with voices: ', voices);
            let el = document.querySelector('#voice_selector');
            if (el) {
                for (const voice of voices) {
                    let option = document.createElement("option");
                    option.innerHTML = voice.name + ", " + voice.lang + ", " + voice.voiceURI;
                    option.value = voice.voiceURI;
                    el.append(option);
                }
            }
            document.getElementById('voice_selector').value = "Google UK English Female";
        }

        function onStart (ev) {
            console.log('tts started, with ev = ', ev);
            currentEl.scrollIntoView();
        }

        function onEnd(ev) {
            console.log('tts done, with ev = ', ev);
            if (shouldSpeak) {
                caretProgress();
                if (currentEl) {
                    speakOutText(currentEl.textContent);
                } else {
                    speak(); // ie start from beginning
                }
            }
        }

        function speakOutText(txt) {
            let utter = new SpeechSynthesisUtterance(txt);
            let selectedVoiceURI = document.getElementById('voice_selector').value;
            utter.voice = speechSynthesis.getVoices().filter((voice)=>{
                if (voice.voiceURI==selectedVoiceURI) {
                    return voice;
                }
            })[0];
            utter.onstart = onStart;
            utter.onend = onEnd;
            speechSynthesis.speak(utter);
        }

        let voices = speechSynthesis.getVoices();
        if (voices && voices.length>0) {
            populateVoices(voices);
        }
        speechSynthesis.onvoiceschanged = () => {
            voices = speechSynthesis.getVoices();
            populateVoices(voices);
        }

        let shouldSpeak = false;
        let currentEl;

        function speak() {
            shouldSpeak = true;
            if (!currentEl) {
                caretProgress();
            }

            document.getElementById('toggle_speech_btn').innerHTML = "Stop";
            speakOutText(currentEl.textContent);
        }

        function stop() {
            shouldSpeak = false;
            document.getElementById('toggle_speech_btn').innerHTML = "Speak";
        }

        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>
</body>
</html>