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