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
|
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
|
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
