Exploring the capabilities of Angular 4 with the integration of the Web

Trying to integrate the Web Speech API Interfaces (https://github.com/mdn/web-speech-api/) with an Angular application (version 4.25) and an ASP Core web server. The project is built using Visual Studio 2017 (version 15.7.1). Added @types/webspeechapi type definitions to the package.json file (version 0.0.29).

The Angular component code snippet appears as follows:

 /// <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();
...

No compilation errors are shown at design time. However, attempting to open the page results in a 500 error message NodeInvocationException: Uncaught (in promise): ReferenceError: SpeechRecognition is not defined

The console log of the web server within Visual Studio displays the same error message.

The goal was to utilize the typing definitions but there seems to be an issue with resolving the type SpeechRecognition.

Answer №1

Jonathan's hint was spot on - while Chrome does support this feature, it requires the use of webkit prefixes.

So, I decided to add a check:

var reg = SpeechRecognition;
var typ = typeof SpeechRecognition;

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

This solution is now compatible with both Firefox and Chrome browsers.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the class of a component

This is the HTML code for my home component: <button (click)="onClick('Hello')" [ngClass]="{'positive': connectedToWWE, 'negative' : !connectedToWWE}"> Hello! Click Me! </button> This is the Ty ...

Incorporating a module from a nearby component repository into the primary task

As I work on developing a component library using React, TypeScript, Rollup, and Styled Components, I have made significant progress but have hit a roadblock that seems to be the final hurdle. The button component in my library is successfully exported, a ...

Dealing with DomSanitizer problem in Angular 2

When using background-image inline for my *ngFor list items, I encountered an issue. In my Component Class, I defined a variable to store a common part of the images' URLs (e.g., ) along with unique parts of the image URLs as this.image (such as qwer ...

Webpack 5: Updating the file path for TypeScript declaration files

My project structure includes a crucial src/ts folder: - dist/ - js/ - css/ - index.html - about.html - src/ - assets/ - fonts/ - images/ - sass/ - ts/ - services/ - service1.ts - ...

Trapped in the Google Maps labyrinth (Angular)

Hey there everyone! I'm currently working on an exciting angular application that integrates the Google Maps API. The goal is to create a feature that shows the 20 closest coffee shops based on the user's current location. However, I seem to be r ...

Issues arising while fetching data with Angular httpClient

Hey there! I'm currently working with a basic controller that is returning some simple data. Here's the code snippet: [HttpGet("[action]")] public AppSettings GetStuff() { var stuff = new Stuff { Dummy = "Hi" }; return stuf ...

Having trouble getting Sass extending to work in a basic scenario?

Here we have a simple example of Sass code, an Angular 2 component that accesses the Sass code, and the rendered HTML. However, there seems to be an issue with the blueBig span element in the last part. As someone new to Sass, I am not sure why this basic ...

Nestjs RabbitMq Microservices

I'm currently developing a microservice that is responsible for receiving messages from RabbitMQ. However, I am encountering an error message as follows: ERROR [Server] There is no matching event handler defined in the remote service. Event pattern: u ...

Merging Two mat-error Elements in Angular

I recently dived into the world of Angular by following their official tutorial. Curiosity got the best of me and I started experimenting with error handling using Angular Material when a user enters their email. I'm wondering if there's a way to ...

Is it necessary for @Input() to come before @ViewChild in Angular components? And what is the reason

Within my ImageUploaderComponent, I have defined an @Input variable and an @ViewChild element. export class ImageUploaderComponent implements OnInit { @Input() canvasheight: number; @ViewChild('cropper', undefined) ... } Interestingly, th ...

Utilizing Angular 2 directives through an npm package

Wanting to share a directive on npm, I followed the steps in this documentation: Copied the compiled .js file from the .ts file (did not copy the map file) Created a new folder on my desktop and pasted it there Ran npm init and npm publish Started a new ...

Having trouble retrieving response headers in Angular 5

After sending a post request to a server, I receive a response with two crucial headers for the client: username and access-token. The Chrome debug tool's Network Tab displays the data from the response like this: In addition, I attempt to log the re ...

When onSubmit is triggered, FormData is accessible. But when trying to pass it to the server action, it sometimes ends up as null

I am currently utilizing NextJS version 14 along with Supabase. Within my codebase, I have a reusable component that I frequently utilize: import { useState } from 'react'; interface MyInputProps { label: string; name: string; value: stri ...

Parsing temporary storage of database query results

My experience with OOP languages like C# and Java has been good, but I am relatively new to JavaScript/TypeScript. I find callback functions confusing, especially when using them with the BaaS ParseDB. For example, finding all playlists for a certain user ...

Enhance the capabilities of a basic object by incorporating a superclass through the creation of

I'm currently developing a library using Typescript 2.0 that can be utilized from both Typescript and JavaScript. Within the library, there is a class called Component and a function named registerComponent, both written in Typescript. My goal is to ...

Different ways to invoke a general method with a deconstructed array as its argument

Calling a Generic Method with Deconstructed Array Parameters As of today, the only method to ensure typed safe inherited parameters is by using a deconstructed array and explicitly defining its type. This allows calling the parent method by utilizing the ...

Getting Form Value in Component.ts with Angular 5

How can I incorporate an input form into my component while constructing a form? <div class="row"> <div class="col-md-6 offset-md-3 text-center> <h2> Login Form </h2> <form (ngSubmit)="OnSubmit(login.value,password.value)" #l ...

Utilizing the adapter design pattern in Angular with TypeScript for enhancing a reactive form implementation

I've been struggling to understand how to implement the adapter pattern in Angular6. Despite reading numerous articles and tutorials, I still can't quite grasp the concept. Could someone provide some insights on this topic? Essentially, I have a ...

TypeScript encountered an unexpected { token, causing a SyntaxError

Despite multiple attempts, I can't seem to successfully run my program using the command "node main.js" as it keeps showing the error message "SyntaxError: Unexpected token {" D:\Visual Studio Code Projects\ts-hello>node main.js D:&bsol ...

Using TypeScript with React Redux, encountering issue of property not being available in the Reducer from the ActionType

Currently, I am learning how to implement a Reducer in Redux while using React with TypeScript. I have encountered an issue that I need help with. Below are the action types that I am working with: import { LoginResponseInterface } from "../../interfaces ...