craqpter.github.io/index.html at main · craqpter/craqpter.github.io · 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
120
121
122
123
124
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Text-to-Speech Reader</title>
    <style>
        /* CSS styles for the page */
        textarea {
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        button {
            background-color: #4caf50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #45a049;
        }

        div {
            border-radius: 5px;
            background-color: #f2f2f2;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div id="view">
        <h3>Text-to-Speech Reader</h3>
        <!-- Input textarea -->
        <textarea id="text" rows="15" cols="80" maxlength="500" placeholder="Enter text here..."></textarea>
        <br />
        <!-- Audio player -->
        <audio id="audio" controls="">
            <source id="source" type="audio/wav" />
        </audio>
        <br />
        <!-- Play button -->
        <button type="button" id="playButton">TTS</button>
        <!-- Download button -->
        <button type="button" id="downloadButton">DOWNLOAD</button>
        <br />
        <!-- Character count -->
        Number of Characters: <span id="message">0</span>
        <br />
        <br />
        <hr />
        <br />
        <!-- Image -->
        <img src="img/1.jpg" alt="1" style="width: 650px; height: 250px" />
        <br />

        <script>
            let audioBlob = null;

            // Function to handle text-to-speech conversion
            async function submit() {
                let text = document.getElementById('text').value;

                if (text === '') {
                    alert('You must enter some text...');
                    return;
                }

                // Fetch the text-to-speech audio
                let speak = await fetch('https://api.streamelements.com/kappa/v2/speech?voice=Brian&text=' + encodeURIComponent(text.trim()));

                if (speak.status != 200) {
                    alert(await speak.text());
                    return;
                }

                audioBlob = await speak.blob();

                let blobUrl = URL.createObjectURL(audioBlob);
                document.getElementById('source').setAttribute('src', blobUrl);
                let audio = document.getElementById('audio');
                audio.pause();
                audio.load();
            }

            // Update character count as user types
            document.getElementById('text').oninput = function () {
                document.getElementById('message').innerHTML = document.getElementById('text').value.length;
            };

            // Handle text submission on Enter key press
            document.getElementById('text').onkeydown = function (e) {
                if ((event.keyCode == 10 || event.keyCode == 13) && event.ctrlKey) {
                    submit();
                }
            };

            // Trigger text-to-speech on "PLAY" button click
            document.getElementById('playButton').onclick = submit;

            // Download audio when the "DOWNLOAD" button is clicked
            document.getElementById('downloadButton').onclick = function () {
                if (audioBlob) {
                    let blob = new Blob([audioBlob], { type: 'audio/wav' });
                    let url = URL.createObjectURL(blob);
                    let a = document.createElement('a');
                    a.href = url;
                    a.download = 'audio.wav';
                    a.click();
                } else {
                    alert('No audio available to download.');
                }
            };
        </script>
    </div>
</body>
</html>