[mirotalk] - UI

public/js/client.js

@@ -331,6 +331,7 @@ let videoAudioCloseBtn;
 let videoUrlIframe;
 let videoAudioUrlElement;
 // speech recognition
+let speechRecognitionIcon;
 let speechRecognitionStart;
 let speechRecognitionStop;
 
@@ -461,6 +462,7 @@ function getHtmlElementsById() {
     videoUrlIframe = getId('videoUrlIframe');
     videoAudioUrlElement = getId('videoAudioUrlElement');
     // speech recognition
+    speechRecognitionIcon = getId('speechRecognitionIcon');
     speechRecognitionStart = getId('speechRecognitionStart');
     speechRecognitionStop = getId('speechRecognitionStop');
 }

public/js/speechRecognition.js

@@ -91,6 +91,7 @@ if (speechRecognition) {
         console.log('Start speech recognition');
         speechRecognitionStart.style.display = 'none';
         speechRecognitionStop.style.display = 'block';
+        setColor(speechRecognitionIcon, 'lime');
     };
 
     // Detect the said words
@@ -119,6 +120,7 @@ if (speechRecognition) {
         // if (recognitionRunning) recognition.start();
         speechRecognitionStop.style.display = 'none';
         speechRecognitionStart.style.display = 'block';
+        setColor(speechRecognitionIcon, 'white');
     };
 
     isWebkitSpeechRecognitionSupported = true;

public/views/client.html

@@ -192,7 +192,7 @@ access to use this app.
 
                 <main id="captionChat" class="msger-chat"></main>
                 <div class="msger-inputarea">
-                    <button id="speechRecognitionIcon"><i class="fas fa-microphone-alt"></i></button>
+                    <button id="speechRecognitionIcon" class="fas fa-microphone-alt"></button>
                     <select id="recognitionLanguage"></select>
                     <select id="recognitionDialect"></select>
                     <button type="button" id="speechRecognitionStart"><i class="fas fa-play"></i>&nbsp;Start</button>