Compare commits
2 Commits
b34c980ea5
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
|
001fef8bbc | ||
|
|
a9004c38af |
158
'
158
'
@@ -1,158 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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");
|
||||
var input = document.getElementById("input");
|
||||
var ws;
|
||||
|
||||
var print = function(message) {
|
||||
var before = output.innerHTML.split("<br>");
|
||||
before.unshift(`<span>${new Date().toLocaleTimeString()} | ${message}</span>`);
|
||||
if (before.length > 20) {
|
||||
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("READY");
|
||||
}
|
||||
ws.onclose = function(evt) {
|
||||
print("CLOSE");
|
||||
ws = null;
|
||||
}
|
||||
ws.onmessage = function(evt) {
|
||||
console.log("evt.data:", evt.data)
|
||||
const data = JSON.parse(evt.data);
|
||||
|
||||
const utterThis = new SpeechSynthesisUtterance(data.Text);
|
||||
|
||||
const idx = data.VoiceIdx || 0;
|
||||
utterThis.voice = voices[idx];
|
||||
|
||||
if (data.Pitch) {
|
||||
utterThis.pitch = data.Pitch
|
||||
}
|
||||
|
||||
if (data.Rate) {
|
||||
utterThis.rate = data.Rate
|
||||
}
|
||||
|
||||
window.speechSynthesis.speak(utterThis);
|
||||
print(data.Text);
|
||||
}
|
||||
ws.onerror = function(evt) {
|
||||
print("ERROR: " + evt.data);
|
||||
}
|
||||
|
||||
document.getElementById("send").onclick = function(evt) {
|
||||
if (!ws || !input.value) {
|
||||
return false;
|
||||
}
|
||||
|
||||
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;
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
#output > span {
|
||||
opacity: 0.33;
|
||||
}
|
||||
#output > span:nth-child(1) {
|
||||
opacity: 1;
|
||||
}
|
||||
#output > span:nth-child(2)
|
||||
, #output > span:nth-child(3)
|
||||
{
|
||||
opacity: 0.66;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="width: 80%; height: 80%; margin: auto; display: flex; flex-direction: row;">
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<form style="flex-grow: 1;">
|
||||
<p><input id="input" type="textarea" value="" autofocus style="width: 80%">
|
||||
<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>
|
||||
</html>
|
||||
@@ -5,12 +5,12 @@
|
||||
<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>
|
||||
<script>
|
||||
window.addEventListener("load", function(evt) {
|
||||
var output = document.getElementById("output");
|
||||
var input = document.getElementById("input");
|
||||
var ws;
|
||||
|
||||
|
||||
var print = function(message) {
|
||||
var before = output.innerHTML.split("<br>");
|
||||
before.unshift(`<span>${new Date().toLocaleTimeString()} | ${message}</span>`);
|
||||
@@ -56,8 +56,8 @@
|
||||
ele.appendChild(document.createElement("br"));
|
||||
}
|
||||
}
|
||||
|
||||
ws = new WebSocket("ws://"+window.location.host+"/ws");
|
||||
|
||||
ws = new WebSocket("ws://"+window.location.host+"/ws"+window.location.search);
|
||||
ws.onopen = function(evt) {
|
||||
print("READY");
|
||||
}
|
||||
@@ -88,7 +88,7 @@
|
||||
ws.onerror = function(evt) {
|
||||
print("ERROR: " + evt.data);
|
||||
}
|
||||
|
||||
|
||||
document.getElementById("send").onclick = function(evt) {
|
||||
if (!ws || !input.value) {
|
||||
return false;
|
||||
@@ -99,7 +99,7 @@
|
||||
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),
|
||||
@@ -124,8 +124,8 @@
|
||||
#output > span:nth-child(1) {
|
||||
opacity: 1;
|
||||
}
|
||||
#output > span:nth-child(2)
|
||||
, #output > span:nth-child(3)
|
||||
#output > span:nth-child(2)
|
||||
, #output > span:nth-child(3)
|
||||
{
|
||||
opacity: 0.66;
|
||||
}
|
||||
|
||||
@@ -5,4 +5,5 @@ type message struct {
|
||||
Pitch int
|
||||
Rate float64
|
||||
VoiceIdx int
|
||||
room string
|
||||
}
|
||||
|
||||
@@ -31,9 +31,12 @@ func (s *Server) WS(w http.ResponseWriter, r *http.Request) error {
|
||||
}
|
||||
defer sess.Close()
|
||||
|
||||
log.Println("someone has joined", sess.room)
|
||||
defer log.Println("someone has left", sess.room)
|
||||
|
||||
sess.cb = func(m message) error {
|
||||
for i := range s.sessions {
|
||||
if s.sessions[i].id != sess.id {
|
||||
if s.sessions[i].id != sess.id && s.sessions[i].room == sess.room {
|
||||
select {
|
||||
case s.sessions[i].scatterc <- m:
|
||||
case <-s.sessions[i].ctx.Done():
|
||||
|
||||
@@ -20,6 +20,7 @@ type session struct {
|
||||
cb func(message) error
|
||||
id string
|
||||
scatterc chan (message)
|
||||
room string
|
||||
}
|
||||
|
||||
var upgrader = websocket.Upgrader{}
|
||||
@@ -34,6 +35,7 @@ func newSession(w http.ResponseWriter, r *http.Request, cb func(message) error)
|
||||
cb: cb,
|
||||
id: uuid.New().String(),
|
||||
scatterc: make(chan message, 20),
|
||||
room: r.URL.Query().Get("room"),
|
||||
}, err
|
||||
}
|
||||
|
||||
@@ -70,6 +72,7 @@ func (s *session) gather() {
|
||||
if err := json.Unmarshal(msg, &m); err != nil {
|
||||
return err
|
||||
}
|
||||
m.room = s.room
|
||||
|
||||
return s.cb(m)
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user