blob: 09f32e5ee84826844d0bb3d07a6535ebbb450864 (
plain)
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
|
<html>
<head>
<title>
Plane
</title>
<style>
body {
background-color: #111;
}
div#overlay {
background-image: linear-gradient(0deg, #000 75%, #666 25%);
background-size: 1em 1em;
opacity: 0.1;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
div.msg {
margin-bottom: 0.5em;
color: #0D0;
font-family: monospace;
font-size: 2em;
font-weight: bold;
}
</style>
</head>
<body>
<div id="overlay"></div>
<div id="log"></div>
<script>
Array.prototype.sample = function(){
return this[Math.floor(Math.random()*this.length)];
}
let ws = new WebSocket("ws://plane.4574.co.uk:80");
let div = document.getElementById("log");
let loglen = 0;
const logmax = 18;
const timemax = 5000;
const voices = speechSynthesis.getVoices();
ws.onmessage = function(ev) {
loglen += 1;
div.innerHTML += "<div class=\"msg\" id=\"msg" + loglen + "\">" + ev.data + "</div>";
if (loglen > logmax)
document.getElementById("msg" + (loglen - logmax)).remove();
let utter = new SpeechSynthesisUtterance(ev.data);
utter.voice = voices.sample();
utter.rate = 1.2;
speechSynthesis.speak(utter);
};
function rantime() {
return Math.random() * timemax + 1000;
}
function msgloop() {
ws.send("any");
setTimeout(msgloop, rantime());
}
ws.onopen = function(ev) {
setTimeout(msgloop, rantime());
}
</script>
</body>
</html>
|