Improving speech-to-text

src/App.vue

@@ -1,8 +1,12 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <SpeechToText @speech="onSpeechReceived($event)"/>
-    Parent: {{ speech }}
+    <div class="app__speech-to-text">
+      <div><img alt="Vue logo" src="./assets/logo.png" width="24">Speech to Text</div>
+      <div class="app__try-button">
+          <SpeechToText class="app__stt-button" @speech="onSpeechReceived($event)"/>
+          <textarea class="app__stt-input" placeholder="Prova" v-model="speech"></textarea>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -22,19 +26,42 @@ export default {
     },
     methods: {
         onSpeechReceived(speech) {
+            console.log('Reveived', speech);
             this.speech = speech;
         }
     }
 };
 </script>
 
-<style>
-#app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+<style lang='sass'>
+#app
+  font-family: "Avenir", Helvetica, Arial, sans-serif
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale
+  text-align: center
+  color: #2c3e50
+  margin-top: 60px
+
+.app
+  &__speech-to-text
+    display: flex
+    flex-direction: column
+    justify-content: center
+    align-items: center
+  &__try-button
+    display: flex
+    flex-direction: column
+    justify-content: center
+    align-items: center
+  &__stt-button
+    padding: 10px 0
+  &__stt-input
+      border: 1px solid #DDDDDD
+      border-radius: 5px
+      box-shadow: 1px 1px 6px #AAAAAA
+      height: 100px
+      width: 500px
+      outline: none
+      padding: 10px
+
 </style>

src/lib/components/SpeechToText.vue

@@ -1,9 +1,14 @@
 <template>
     <div>
-        <div @click="onClick()" speech="" class="speech-to-text__button-container">
-            <img src="../../assets/mic.svg">
-        </div>
-        <div>{{ speech }}</div>
+        <div class="speech-to-text__button-container">
+            <div @click="onClick()" :class="{ 'speech-to-text__button--speaking': isSpeaking }"
+                    class="speech-to-text__button">
+                    <img v-if="!isSpeaking" src="../../assets/mic.svg">
+                    <img v-if="isSpeaking"
+                        class="speech-to-text__stop"
+                        src="../../assets/stop.svg">
+                </div>
+            </div>
     </div>
 </template>
 
@@ -14,16 +19,29 @@ export default {
     name: 'SpeechToText',
     data() {
         return {
+            isSpeaking: false,
             speech: '',
             speechService: {}
         };
     },
     methods: {
         onClick() {
-            this.speechService.speak().subscribe((result) => {
-                this.speech = result;
-                this.$emit('speech', this.speech);
-            });
+            this.isSpeaking = true;
+            this.speechService.speak().subscribe(
+                (result) => {
+                    this.speech = result;
+                    this.$emit('speech', this.speech);
+                    this.isSpeaking = false;
+                    // console.log('Result', result);
+                },
+                (error) => {
+                    console.log('Error', error);
+                    this.isSpeaking = false;
+                },
+                () => {
+                    this.isSpeaking = false;
+                }
+            );
             console.log('speechService started');
         }
     },
@@ -37,14 +55,38 @@ export default {
 </script>
 
 <style lang="sass">
+@keyframes blind
+    0%
+        background-color: #dddddd
+        width: 45px
+        height: 45px
+    50%
+        background-color: white
+        width: 50px
+        height: 50px
+
 .speech-to-text
-  &__button-container
-    background-color: #dddddd
-    border-radius: 50px
-    width: 50px
-    height: 50px
-    display: flex
-    justify-content: center
-    align-items: center
-    cursor: pointer
+    &__button-container
+        display: flex
+        justify-content: center
+        align-items: center
+        width: 50px
+        height: 50px
+    &__button
+        box-shadow: 1px 2px 3px
+        background-color: #FFFFFF
+        border-radius: 50px
+        width: 50px
+        height: 50px
+        display: flex
+        justify-content: center
+        align-items: center
+        cursor: pointer
+        &--speaking
+            animation-name: blind
+            animation-duration: 1.5s
+            animation-iteration-count: 1
+    &__stop
+        width: 16px
+
 </style>

src/lib/services/speech-to-text.js

@@ -32,6 +32,7 @@ export default class SpeechToText {
       this.recognition.onspeechend = () => {
           this.recognition.stop();
           console.log('Speech end');
+          // this.resultSubject.next('');
       };
 
       this.recognition.onnomatch = () => {
@@ -40,6 +41,7 @@ export default class SpeechToText {
 
       this.recognition.onerror = (event) => {
           console.log(`Error occurred in recognition: ${event.error}`);
+          this.resultSubject.error(`Error occurred in recognition: ${event.error}`);
       };
   }
 

tests/unit/example.spec.js

@@ -1,12 +1,12 @@
 import { shallowMount } from '@vue/test-utils';
-import HelloWorld from '@/components/HelloWorld.vue';
+import SpeechToText from '../../src/lib/components/SpeechToText.vue';
 
 describe('HelloWorld.vue', () => {
-  it('renders props.msg when passed', () => {
-    const msg = 'new message';
-    const wrapper = shallowMount(HelloWorld, {
-      propsData: { msg },
+    it('renders props.msg when passed', () => {
+        const msg = 'new message';
+        const wrapper = shallowMount(SpeechToText, {
+            propsData: { msg }
+        });
+        expect(wrapper.text()).toMatch(msg);
     });
-    expect(wrapper.text()).toMatch(msg);
-  });
 });