feat: speech recognition language toggle

feat: add lazy help message chore: use <link> for `style.css`
sglkc · Nov 29, 2022 · 118e697 · 118e697
1 parent bcb059a
commit 118e697
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -13,6 +13,7 @@
     <script src="scripts/live2d.min.js" defer></script>
     <script src="scripts/live2dcubismcore.min.js" defer></script>
     <link rel="icon" type="image/png" href="favicon.png">
+    <link rel="stylesheet" href="style.css">
   </head>
   <body>
     <main id="container">
@@ -27,6 +28,7 @@
           <button id="recognition">
             <img width="40" height="40">
           </button>
+          <button id="recognition-lang">EN</button>
         </nav>
         <canvas id="canvas"></canvas>
         <img id="background" src="assets/background.webp" alt="background" draggable="false">

diff --git a/src/style.css → public/style.css b/src/style.css → public/style.css
@@ -77,6 +77,12 @@ html, body {
   transform: rotate(10deg) scale(1.1);
 }
 
+#recognition-lang {
+  font-size: 2rem;
+  font-weight: bold;
+  color: white;
+}
+
 #canvas {
   position: fixed;
   bottom: 0;

diff --git a/src/SpeechRecognition.ts b/src/SpeechRecognition.ts
@@ -15,6 +15,7 @@ const SpeechRecognition = InitRecognition
 
 const img = <HTMLImageElement>document.querySelector('#recognition > img');
 const button = <HTMLButtonElement>document.querySelector('#recognition');
+const lang = <HTMLButtonElement>document.querySelector('#recognition-lang');
 const input = <HTMLInputElement>document.getElementById('message');
 const send = <HTMLInputElement>document.getElementById('send');
 
@@ -25,6 +26,25 @@ button.onclick = () => {
 
 img.src = SpeechRecognition.unsupported ? MicMute : Mic;
 
+lang.onclick = () => {
+  if (SpeechRecognition.unsupported) return;
+
+  switch (SpeechRecognition.lang) {
+    case 'en-US':
+      SpeechRecognition.lang = 'id-ID';
+      lang.innerText = 'ID';
+      break;
+    case 'id-ID':
+      SpeechRecognition.lang = 'ja-JP';
+      lang.innerText = 'JA';
+      break;
+    case 'ja-JP':
+    default:
+      SpeechRecognition.lang = 'en-US';
+      lang.innerText = 'EN';
+  }
+}
+
 SpeechRecognition.continuous = true;
 SpeechRecognition.interimResults = true;
 SpeechRecognition.lang = 'en-US';

diff --git a/src/index.ts b/src/index.ts
@@ -1,4 +1,3 @@
-import './style.css';
 import { CustomWindow } from './types';
 import Live2D from './Live2D';
 import './Message.ts';
@@ -14,3 +13,22 @@ window.Modules = {
 };
 
 document.getElementById('loader')!.style.display = 'none';
+
+// TODO: better help pleasze
+document.getElementById('help')!.onclick = () => alert(
+'The laziest type of help you\'ve ever seen.\n' +
+'\n' +
+'> Languages <\n' +
+'Chiai can speak 3 languages! English, Bahasa Indonesia, and Japanese. She ' +
+'can guess what language you\'re using and she\'ll respond in that language.\n' +
+'\n' +
+'> Speech Recognition <\n' +
+'Click the mic button and start speaking! Speech output will be displayed on ' +
+'the message input box and will be sent automatically once you stopped recording.\n' +
+'NOTE: Speech Recognition is not supported on all browsers, so don\'t expect it ' +
+'to work.\n' +
+'\n' +
+'> Anything else <\n' +
+'For more information, you could visit this project\'s repository by clicking ' +
+'the GitHub button, and scroll down.'
+);