mirror of
https://github.com/danbulant/ester-klient
synced 2026-05-19 04:18:45 +00:00
voice test
This commit is contained in:
danbulant
parent
31e2e12f39
commit
239837bf84
5 changed files with 143 additions and 21 deletions
0
chat.js
0
chat.js
63
view/chat.js
Normal file
63
view/chat.js
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
const input = document.getElementById('input');
|
||||
const header = document.getElementById('chat-header');
|
||||
|
||||
function send(text){
|
||||
|
||||
}
|
||||
|
||||
header.onclick = ()=>{
|
||||
document.getElementById("chat").classList.toggle("chat--active");
|
||||
}
|
||||
input.onkeydown = function (e) {
|
||||
if (e.keyCode == 13) {
|
||||
send(input.value);
|
||||
}
|
||||
};
|
||||
|
||||
//SPEECH RECOGNITION
|
||||
window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition;
|
||||
const recognition = new window.SpeechRecognition();
|
||||
|
||||
recognition.continuous = true;
|
||||
recognition.lang = "cs-CZ";
|
||||
recognition.interimResults = true;
|
||||
recognition.maxAlternatives = 1;
|
||||
|
||||
var finalTranscripts = '';
|
||||
|
||||
recognition.onresult = function (event) {
|
||||
var interimTranscripts = '';
|
||||
for (var i = event.resultIndex; i < event.results.length; i++) {
|
||||
var transcript = event.results[i][0].transcript;
|
||||
|
||||
if (event.results[i].isFinal) {
|
||||
finalTranscripts += transcript;
|
||||
} else {
|
||||
interimTranscripts += transcript;
|
||||
}
|
||||
}
|
||||
if (finalTranscripts.includes('Hej Ester')) {
|
||||
console.log("Keyword");
|
||||
}
|
||||
};
|
||||
|
||||
recognition.onerror = function (event) {
|
||||
console.warn(event);
|
||||
};
|
||||
|
||||
recognition.start();
|
||||
|
||||
//SPEECH SYNTCH DONE USING RESPONSIVE VOICE
|
||||
//SPEECH SYNTH
|
||||
// var synth = window.speechSynthesis;
|
||||
|
||||
// voices = synth.getVoices();
|
||||
|
||||
// console.log(voices);
|
||||
// function speek(text){
|
||||
// var utterThis = new SpeechSynthesisUtterance(text);
|
||||
// utterThis.voice = voices[0];
|
||||
// utterThis.pitch = pitch.value;
|
||||
// utterThis.rate = rate.value;
|
||||
// synth.speak(utterThis);
|
||||
// }
|
||||
|
|
@ -22,30 +22,36 @@
|
|||
<div class="avatar">
|
||||
<img class="avatar--img" id="avatar" src="assets/images/esterMain.png">
|
||||
<h1 class="avatar--text" id="username">USERNAME</h1>
|
||||
<small id="type">VERSION</small>
|
||||
</div>
|
||||
<div class="grid-stack">
|
||||
<!-- Movable widgets, generated at runtime -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat content-item">
|
||||
<div class="chat--content">
|
||||
<div class="chat--divider">
|
||||
Dnes
|
||||
<div class="chat" id="chat">
|
||||
<div class="frame">
|
||||
<div class="frame--header ripple" id="chat-header">
|
||||
Ester
|
||||
</div>
|
||||
<div class="chat--sent">
|
||||
<div class="chat--sent-content">
|
||||
Ahoj!
|
||||
<div class="chat--content">
|
||||
<div class="chat--divider">
|
||||
Dnes
|
||||
</div>
|
||||
<div class="chat--sent">
|
||||
<div class="chat--sent-content">
|
||||
Ahoj!
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat--response">
|
||||
<div class="chat--response-content">
|
||||
Ahoj!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat--response">
|
||||
<div class="chat--response-content">
|
||||
Ahoj!
|
||||
</div>
|
||||
<div class="chat--form">
|
||||
<input id="input" placeholder="Pošli zprávu" type="text" class="chat--input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat--form">
|
||||
<input id="input" type="text" class="chat--input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -58,6 +64,8 @@
|
|||
grid.enableResize(true, true);
|
||||
</script>
|
||||
<script src="./user.js"></script>
|
||||
<script src="./chat.js"></script>
|
||||
<script src="./calendar.js"></script>
|
||||
<script src="https://code.responsivevoice.org/responsivevoice.js?key=y7Vtl7ep"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -3,13 +3,14 @@ html {
|
|||
background-size: cover;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.contents {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -43,11 +44,34 @@ body {
|
|||
left: 145px;
|
||||
vertical-align: middle;
|
||||
margin-top: 56px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.chat--content {
|
||||
height: calc(100% - 20px);
|
||||
.chat {
|
||||
z-index: 1000;
|
||||
position: fixed;
|
||||
bottom: -412px;
|
||||
transition: bottom 0.8s ease-in-out;
|
||||
right: 12px;
|
||||
width: 300px;
|
||||
height: 450px;
|
||||
}
|
||||
.chat--active {
|
||||
bottom: 0;
|
||||
}
|
||||
.frame {
|
||||
border-radius: 15px 15px 0 0;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
.frame--header {
|
||||
background: rgb(77, 143, 241);
|
||||
padding: 10px;
|
||||
padding-left: 15px;
|
||||
color: white;
|
||||
border-radius: 15px 15px 0 0;
|
||||
}
|
||||
.chat--content {
|
||||
height: calc(100% - 80px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
|
@ -71,6 +95,7 @@ body {
|
|||
display: inline-block;
|
||||
width: auto;
|
||||
float: right;
|
||||
margin-right: 5px;
|
||||
padding: 10px;
|
||||
background: rgb(255, 255, 255);
|
||||
border-radius: 15px 15px 0 15px;
|
||||
|
|
@ -83,6 +108,7 @@ body {
|
|||
display: inline-block;
|
||||
width: auto;
|
||||
float: left;
|
||||
margin-left: 5px;
|
||||
padding: 10px;
|
||||
background: rgb(0, 204, 255);
|
||||
border-radius: 15px 15px 15px 0;
|
||||
|
|
@ -90,10 +116,10 @@ body {
|
|||
|
||||
|
||||
.chat--input {
|
||||
backdrop-filter: blur(5px);
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
height: 40px;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
|
|
@ -102,8 +128,9 @@ body {
|
|||
border-bottom: 2px solid white;
|
||||
}
|
||||
|
||||
.chat--input::focus {
|
||||
.chat--input:focus {
|
||||
outline: none;
|
||||
border-bottom: 3px solid white;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
|
@ -122,4 +149,14 @@ h1, h2, h3 {
|
|||
background-color: rgb(80, 80, 80);
|
||||
border-radius: 15px;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ripple {
|
||||
background-position: center;
|
||||
transition: background 0.8s;
|
||||
background-color: rgb(77, 143, 241);
|
||||
background-size: 100%;
|
||||
}
|
||||
.ripple.active {
|
||||
background: #d8230b radial-gradient(circle, transparent 1%, rgb(77, 143, 241) 1%) center/15000%;
|
||||
}
|
||||
|
|
|
|||
14
view/user.js
14
view/user.js
|
|
@ -1,4 +1,18 @@
|
|||
const username = "Daniel Bulant";
|
||||
const type = 3;
|
||||
const typeString = (function () {
|
||||
switch (type) {
|
||||
case 1:
|
||||
return "Uživatel";
|
||||
case 2:
|
||||
return "Sponzor";
|
||||
case 3:
|
||||
return "Administrátor";
|
||||
}
|
||||
})();
|
||||
|
||||
var accountElement = document.getElementById("username");
|
||||
accountElement.innerText = username;
|
||||
|
||||
var typeElement = document.getElementById("type");
|
||||
typeElement.innerText = typeString;
|
||||
Loading…
Reference in a new issue