planed.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

<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>
      const logmax = 18;
      const timemax = 5000;
      const div = document.getElementById("log");
      let ws = new WebSocket("ws://plane.4574.co.uk:80");
      let loglen = 0;
      let voices = [];
      speechSynthesis.onvoiceschanged = function() {
        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[Math.floor(Math.random() * voices.length)];
        utter.rate = 1.3;
        utter.lang = 'en-GB';
        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>