Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

Angular 14 Project to Build Speech to Text Web App Using Web Speech Recognition API in TypeScript

Posted on February 12, 2023

 

 

Welcome folks today in this blog post we will be building a speech to text web app in browser using web speech recognition api using angular 14. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make a new angular project using the below command

 

 

ng new speechtotext

 

 

cd speechtotext

 

 

And now you need to edit the app.component.html file of your project and copy paste the below html code

 

 

app.component.html

 

 

1
2
3
4
5
6
<div style="margin: 100px;">
    <h1>Voice recognition</h1>
    <button style="margin: 10px;" (click)="startService()">Start</button>
    <button style="margin: 10px;" (click)="stopService()">Stop</button>
    <p>{{service.text}}</p>
</div>

 

 

As you can see we have two buttons to start  & stop the voice recording from the micr0phone. And inside the typescript code we will be writing the code for startService() and stopService()

 

And now you need to edit the app.component.ts file of your angular project and copy paste the below code

 

 

app.component.ts

 

 

TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import { Component, OnInit } from '@angular/core';
import { VoiceRecognitionService } from '../service/voice-recognition.service'
 
@Component({
  selector: 'app-speech-to-text',
  templateUrl: './speech-to-text.component.html',
  styleUrls: ['./speech-to-text.component.scss'],
  providers: [VoiceRecognitionService]
})
export class SpeechToTextComponent implements OnInit {
 
  text: string;
 
  constructor(
    public service : VoiceRecognitionService
  ) {
    this.service.init()
   }
 
  ngOnInit(): void {
  }
 
  startService(){
    this.service.start()
  }
 
  stopService(){
    this.service.stop()
  }
 
}

 

 

As you can see we are importing a external service that is responsible for starting voice recording and stopping it. And in the next step we will write this service. Inside this code we have the constructor and inside it we are passing the service variable. And then we are calling the start() and stop() methods of the service to start the recording and stop it. And also inside the constructor we are calling the init() method of the service which will configure the voice recording for the app.

 

 

Creating the Speech to Text Service

 

 

Now guys we will be creating the service to convert the speech into it. For that you need to go to terminal and type the below command

 

 

ng g service services/speechtotext

 

 

As you can see after executing the above command you will see the services folder created and inside it we will have the speechtotext service. Now we need to edit the typescript file of the service which is speechtotext.service.ts as shown below

 

 

speechtotext.service.ts

 

 

TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import { Injectable } from '@angular/core';
 
declare var webkitSpeechRecognition:any
 
@Injectable({
  providedIn: 'root'
})
export class SpeechrecognitionService {
 
  recognition =  new webkitSpeechRecognition();
  isStoppedSpeechRecog = false;
  public text = '';
  tempWords!: string;
 
  constructor() { }
 
  init() {
 
    this.recognition.interimResults = true;
    this.recognition.lang = 'en-US';
 
    this.recognition.addEventListener('result', (e: { results: Iterable<unknown> | ArrayLike<unknown>; }) => {
      const transcript = Array.from(e.results)
        .map((result) => result[0])
        .map((result) => result.transcript)
        .join('');
      this.tempWords = transcript;
      console.log(transcript);
    });
  }
 
  start() {
    this.isStoppedSpeechRecog = false;
    this.recognition.start();
    console.log("Speech recognition started")
    this.recognition.addEventListener('end', () => {
      if (this.isStoppedSpeechRecog) {
        this.recognition.stop();
        console.log("End speech recognition")
      } else {
        this.wordConcat()
        this.recognition.start();
      }
    });
  }
  stop() {
    this.isStoppedSpeechRecog = true;
    this.wordConcat()
    this.recognition.stop();
    console.log("End speech recognition")
  }
 
  wordConcat() {
    this.text = this.text + ' ' + this.tempWords + '.';
    this.tempWords = '';
  }
}

 

 

As you can see in the above code we are setting the language of the speech to text to be english.And then we are using the webkit speech recognition api methods such as start() and stop() to start the recording from the microphone and stop it. Now if you open the application inside the browser the demo will look like this as shown below

 

 

 

Recent Posts

  • Android Kotlin Project to Load Image From URL into ImageView Widget
  • Android Java Project to Make HTTP Call to JSONPlaceholder API and Display Data in RecyclerView Using GSON & Volley Library
  • Android Java Project to Download Youtube Video Thumbnail From URL & Save it inside SD Card
  • Android Java Project to Embed Google Maps & Add Markers Using Maps SDK
  • Android Java Project to Download Random Image From Unsplash Using OkHttp & Picasso Library & Display it
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme