Skip to content

An reusable angular component for voice based input using web speech API

License

Notifications You must be signed in to change notification settings

nithincvpoyyil/voice-listener

Repository files navigation

ngx-voiceinput

This is a voice based input plugin for angular2+ framewrok. It was built for modern browsers using TypeScript, CSS3 and HTML5 and Angular >=4.0.0, and Google Chrome is the only browser which supports web speech API.

Installation

npm install @ngxvoice/ngx-voicelistner or yarn add @ngxvoice/ngx-voicelistner

Usage

App module
import { NgxVoiceListnerModule } from "@ngxvoice/ngx-voicelistner";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [BrowserModule, NgxVoiceListnerModule],
  bootstrap: [AppComponent]
})
export class AppModule { }
Example component
@Component({
  selector: 'example-component',
  styleUrls: [],
  providers: [],
  template: `<div class="container">
              <voice-listner-input [lang]='en-US' (onListeningVoice)="getTheSearchString($event)" ></voice-listner-input>
             </div>`
})
export class ExampleComponent {

  public voiceStringList: string[] = ['test'];

  constructor() {
  
  }

  public getTheSearchString(finalString: string) {
    console.log('new string - ', finalString);
    this.voiceStringList.push(finalString);
  }
}
Configuration for language

This library is using 'en-IN' as language config by default, you can chnage this is by adding lang input parameter as shown in the example below. For more information, please refer Web Speech API link in the above description.

Known issues: If you are facing installtion issues (Error code : EBADPLATFORM or fsevent related issues) downgrade the npm to 3.1.0 and try.

npm install -g npm@3.1.0

Credits

ngx-voiceinput is based on ngx-datatable's seed project.

made with ❤️