-
Notifications
You must be signed in to change notification settings - Fork 11
/
index.html
82 lines (77 loc) · 2.93 KB
/
index.html
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>aeiou</title>
</head>
<body>
<h2>Check out the project <a href="https://github.com/calzoneman/aeiou" target="_blank" rel="noopener noreferer">on GitHub</a>.</h2>
<h2>Try it:</h2>
<noscript>
This interactive demo requires JavaScript (but only the inline script on this page).
</noscript>
<form action="javascript:tts()">
<label for="input-text">Enter text:</label>
<br>
<textarea maxlength="1024" id="input-text" cols="60" rows="10">aeiou</textarea>
<br>
<button type="submit">Play</button>
<button onclick="javascript:stopPlayback()" type="button">Stop</button>
<a id="tts-download" href="/tts?text=aeiou">Download</a>
</form>
<p><strong id="error-output" style="color: red"></strong></p>
<p><strong>Note:</strong> this TTS engine only supports US-ASCII; attempts to submit Unicode will probably result in very garbled output and may time out.</p>
<audio id="result-audio">
Your browser does not support the HTML5 audio element.
</audio>
<script type="text/javascript">
let lastText = null;
let audio = document.getElementById('result-audio');
let playing = false;
audio.addEventListener('error', error => {
playing = false;
lastText = null;
// TODO: the web endpoint does return an error message, the question is how to best
// preserve that when we passed the original URL to an audio constructor instead of
// fetching it ourselves.
document.getElementById('error-output').innerText = 'There was an error processing your request';
});
audio.addEventListener('playing', () => {
playing = true;
});
audio.addEventListener('ended', () => {
playing = false;
});
function tts() {
let text = document.getElementById('input-text').value;
document.getElementById('error-output').innerText = '';
if (text !== lastText) {
audio.src = `/tts?text=${encodeURIComponent(text)}`;
audio.addEventListener('playing', () => {
lastText = text;
}, { once: true });
}
if (audio.readyState >= 2) {
audio.play();
} else {
audio.addEventListener('canplay', () => {
audio.play();
}, { once: true });
}
}
function stopPlayback() {
audio.pause();
audio.currentTime = 0;
playing = false;
}
document.getElementById('input-text').oninput = ev => {
let text = document.getElementById('input-text').value;
let downloadLink = document.getElementById('tts-download');
downloadLink.href = `/tts?text=${encodeURIComponent(text)}`;
};
document.getElementById('input-text').onkeydown = ev => {
if (ev.key === 'Enter' && ev.ctrlKey && !playing) tts();
};
</script>
</body>
</html>