Search code examples
angulartypescriptspeech

Angular 4 using Web Speech API


I try to use the Web Speech API Interfaces (https://github.com/mdn/web-speech-api/) with a angular (version 4.25) and a asp core web-server. All is build by the visual studio 2017 (version 15.7.1). I add the @types/webspeechapi typedefinions to the package.json (version 0.0.29)

My (angular) componente looks like:

 /// <reference path="../../../../node_modules/@types/webspeechapi/index.d.ts" />
    import { Component } from '@angular/core';

    @Component({
        selector: 'home',
        templateUrl: './home.component.html'
    })
    export class HomeComponent {

        constructor() {

            var recognition = new SpeechRecognition();
            var speechRecognitionList = new SpeechGrammarList();
...

Compiler has no erros at design time. But if i try to open the page i got a 500 error-message NodeInvocationException: Uncaught (in promise): ReferenceError: SpeechRecognition is not defined

The console log of the web-server in vs is the same.

I want to use the typing definitions but why and who tries to resolve the type SpeechRecognition?


Solution

  • Jonathan was right with his hint, Chrome support this feature but only with webkit-prefixe.

    So i insert a checking

    var reg: SpeechRecognition;
    var typ = typeof SpeechRecognition;
    
    reg = typ === "undefined" ? new webkitSpeechRecognition() :
                                    new SpeechRecognition();
    

    This works for FF and Chrome.