bel/tts-room
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: bel:b34c980ea52596445e5b1f896314e369051d8d0f
Branches Tags
bel:main bel:master
..
compare: bel:master
Branches Tags
bel:main bel:master

2 Commits
b34c980ea5 ... master

Author SHA1 Message Date
Bel LaPointe
001fef8bbc ?room s 2025-10-15 00:12:19 -06:00
Bel LaPointe
a9004c38af remove quote file 2025-10-14 23:59:46 -06:00
5 changed files with 16 additions and 167 deletions
Expand all files Collapse all files

158
'
View File

@@ -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>

16
src/public/index.html
View File

@@ -5,12 +5,12 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<script> <script>
window.addEventListener("load", function(evt) { window.addEventListener("load", function(evt) {
var output = document.getElementById("output"); var output = document.getElementById("output");
var input = document.getElementById("input"); var input = document.getElementById("input");
var ws; var ws;
var print = function(message) { var print = function(message) {
var before = output.innerHTML.split("<br>"); var before = output.innerHTML.split("<br>");
before.unshift(`<span>${new Date().toLocaleTimeString()} | ${message}</span>`); before.unshift(`<span>${new Date().toLocaleTimeString()} | ${message}</span>`);
@@ -56,8 +56,8 @@
ele.appendChild(document.createElement("br")); 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) { ws.onopen = function(evt) {
print("READY"); print("READY");
} }
@@ -88,7 +88,7 @@
ws.onerror = function(evt) { ws.onerror = function(evt) {
print("ERROR: " + evt.data); print("ERROR: " + evt.data);
} }
document.getElementById("send").onclick = function(evt) { document.getElementById("send").onclick = function(evt) {
if (!ws || !input.value) { if (!ws || !input.value) {
return false; return false;
@@ -99,7 +99,7 @@
for (var i = 0; i < voiceEles.length; i++) for (var i = 0; i < voiceEles.length; i++)
if (voiceEles[i].checked) if (voiceEles[i].checked)
voiceIdx = voiceEles[i].value; voiceIdx = voiceEles[i].value;
const data = JSON.stringify({ const data = JSON.stringify({
"Text": input.value, "Text": input.value,
"Pitch": Number.parseInt(document.getElementById("pitch").value, 10), "Pitch": Number.parseInt(document.getElementById("pitch").value, 10),
@@ -124,8 +124,8 @@
#output > span:nth-child(1) { #output > span:nth-child(1) {
opacity: 1; opacity: 1;
} }
#output > span:nth-child(2) #output > span:nth-child(2)
, #output > span:nth-child(3) , #output > span:nth-child(3)
{ {
opacity: 0.66; opacity: 0.66;
} }

1
src/server/message.go
View File

@@ -5,4 +5,5 @@ type message struct {
Pitch int Pitch int
Rate float64 Rate float64
VoiceIdx int VoiceIdx int
room string
} }

5
src/server/server.go
View File

@@ -31,9 +31,12 @@ func (s *Server) WS(w http.ResponseWriter, r *http.Request) error {
} }
defer sess.Close() defer sess.Close()
log.Println("someone has joined", sess.room)
defer log.Println("someone has left", sess.room)
sess.cb = func(m message) error { sess.cb = func(m message) error {
for i := range s.sessions { 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 { select {
case s.sessions[i].scatterc <- m: case s.sessions[i].scatterc <- m:
case <-s.sessions[i].ctx.Done(): case <-s.sessions[i].ctx.Done():

3
src/server/session.go
View File

@@ -20,6 +20,7 @@ type session struct {
cb func(message) error cb func(message) error
id string id string
scatterc chan (message) scatterc chan (message)
room string
} }
var upgrader = websocket.Upgrader{} var upgrader = websocket.Upgrader{}
@@ -34,6 +35,7 @@ func newSession(w http.ResponseWriter, r *http.Request, cb func(message) error)
cb: cb, cb: cb,
id: uuid.New().String(), id: uuid.New().String(),
scatterc: make(chan message, 20), scatterc: make(chan message, 20),
room: r.URL.Query().Get("room"),
}, err }, err
} }
@@ -70,6 +72,7 @@ func (s *session) gather() {
if err := json.Unmarshal(msg, &m); err != nil { if err := json.Unmarshal(msg, &m); err != nil {
return err return err
} }
m.room = s.room
return s.cb(m) return s.cb(m)
}) })