listen

src/public/index.html

@@ -4,6 +4,7 @@
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width" />
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
         <script>  
             window.addEventListener("load", function(evt) {
                 var output = document.getElementById("output");
@@ -11,40 +12,76 @@
                 var ws;
             
                 var print = function(message) {
-                    var d = document.createElement("div");
+                    var before = output.innerHTML.split("<br>");
-                    d.textContent = message;
+                    before.unshift(`${new Date().toLocaleTimeString()} | ${message}`);
-                    output.appendChild(d);
+                    if (before.length > 20) {
-                    output.scroll(0, output.scrollHeight);
+                        before = before.slice(0, 20);
+                    }
+                    var after = before.join("<br>");
+                    output.innerHTML = after;
+                    output.scroll(0, 0);
                 };
+
+                const synth = window.speechSynthesis;
+                const voices = synth.getVoices().sort(function (a, b) {
+                    const aname = a.name.toUpperCase();
+                    const bname = b.name.toUpperCase();
+
+                    if (aname < bname) {
+                        return -1;
+                    } else if (aname == bname) {
+                        return 0;
+                    } else {
+                        return +1;
+                    }
+                });
+                var voices_idx = 0;
+
+                {
+                    var ele = document.getElementById("voices");
+                    for(var i in voices) {
+                        var voice = voices[i];
+                        const opt = document.createElement("input");
+                        opt.type = "radio";
+                        opt.name = "voice";
+                        opt.id = `voices-${i}-${voice.name}`
+                        opt.value = i;
+
+                        const label = document.createElement("label");
+                        label.for = opt.id;
+                        label.textContent = voice.name;
+
+                        ele.appendChild(opt);
+                        ele.appendChild(label);
+                        ele.appendChild(document.createElement("br"));
+                    }
+                }
             
                 ws = new WebSocket("ws://"+window.location.host+"/ws");
                 ws.onopen = function(evt) {
-                    print("OPEN");
+                    print("READY");
                 }
                 ws.onclose = function(evt) {
                     print("CLOSE");
                     ws = null;
                 }
                 ws.onmessage = function(evt) {
-                    const synth = window.speechSynthesis;
+                    console.log("evt.data:", evt.data)
-                    const voices = synth.getVoices().sort(function (a, b) {
+                    const data = JSON.parse(evt.data);
-                        const aname = a.name.toUpperCase();
-                        const bname = b.name.toUpperCase();
 
-                        if (aname < bname) {
+                    const utterThis = new SpeechSynthesisUtterance(data.Text);
-                            return -1;
-                        } else if (aname == bname) {
-                            return 0;
-                        } else {
-                            return +1;
-                        }
-                    });
-                    const idx = false ? 0 : voices.length-1;
 
-                    const utterThis = new SpeechSynthesisUtterance(evt.data);
+                    const idx = data.VoiceIdx || 0;
                     utterThis.voice = voices[idx];
-                    //utterThis.pitch = 10;
+
-                    //utterThis.rate = 10;
+                    if (data.Pitch) {
+                        utterThis.pitch = data.Pitch
+                    }
+
+                    if (data.Rate) {
+                        utterThis.rate = data.Rate
+                    }
+
                     window.speechSynthesis.speak(utterThis);
                     print("RESPONSE: " + evt.data);
                 }
@@ -56,11 +93,26 @@
                     if (!ws || !input.value) {
                         return false;
                     }
-                    ws.send(JSON.stringify({
+
-                        "text": input.value
+                    var voiceIdx = "0";
-                    }));
+                    var voiceEles = document.getElementsByName("voice");
+                    for (var i = 0; i < voiceEles.length; i++)
+                        if (voiceEles[i].checked)
+                            voiceIdx = voiceEles[i].value;
+                    
+                    const data = JSON.stringify({
+                        "Text": input.value,
+                        "Pitch": Number.parseInt(document.getElementById("pitch").value, 10),
+                        "Rate": Number.parseFloat(document.getElementById("rate").value, 10),
+                        "VoiceIdx": Number.parseInt(voiceIdx, 10),
+                    });
+
+                    ws.send(data);
                     print("SENT: " + input.value);
                     input.value = "";
+                    if (document.getElementById("listen").checked) {
+                        ws.onmessage({data: data});
+                    }
                     return false;
                 };
             });
@@ -68,10 +120,25 @@
     </head>
     <body>
         <div style="width: 80%; height: 80%; margin: auto; display: flex; flex-direction: row;">
-            <form style="flex-grow: 1;">
+            <div style="display: flex; flex-direction: column;">
-                <p><input id="input" type="text" value="" autofocus>
+                <form style="flex-grow: 1;">
-                <button id="send">Send</button>
+                    <p><input id="input" type="textarea" value="" autofocus style="width: 80%">
-            </form>
+                    <p>
+                    <button id="send">Send</button>
+                </form>
+                <div>
+                    <form id="voices"></form>
+
+                    <input id="pitch" type="number" value="0"/>
+                    <label for="pitch">pitch</label></br>
+
+                    <input id="rate" type="number" value="0"/>
+                    <label for="rate">rate</label></br>
+
+                    <input id="listen" type="checkbox" />
+                    <label for="listen">listen</label></br>
+                </div>
+            </div>
             <div id="output" style="flex-grow: 1; overflow-y: scroll;"></div>
         </div>
     </body>

src/server/message.go

@@ -1,5 +1,8 @@
 package server
 
 type message struct {
-	Text string
+	Text     string
+	Pitch    int
+	Rate     float64
+	VoiceIdx int
 }

src/server/session.go

@@ -71,7 +71,7 @@ func (s *session) gather() {
 			return err
 		}
 
-		log.Printf("gathered %+v", m)
+		log.Printf("gathered %+v (%s)", m, msg)
 		return s.cb(m)
 	})
 }
@@ -81,7 +81,8 @@ func (s *session) scatter() {
 		select {
 		case m := <-s.scatterc:
 			log.Printf("scattering %+v", m)
-			return s.ws.WriteMessage(1, []byte(m.Text))
+			b, _ := json.Marshal(m)
+			return s.ws.WriteMessage(1, b)
 		case <-s.ctx.Done():
 			return s.ctx.Err()
 		}