Building Intelligent Blazor Apps: Part 1 - Speech-to-Text with Web Speech API

In this two-part series, we'll explore how to build modern web applications that can listen to users and intelligently process their input.

Series Overview:

• Part 1 (this article): Implementing speech-to-text functionality using the Web Speech API

• Part 2 (coming next): Using .NET Smart Components to intelligently fill forms with AI

In this first part, we'll explore how to use speech recognition with the Web Speech API to convert spoken words into text within a Blazor WebAssembly application.

Web Speech API is a powerful browser-based interface that enables web applications to handle voice data, providing both speech recognition (converting spoken words to text) and speech synthesis (converting text to speech) capabilities. While the API is well-supported in modern browsers like Chrome, Edge, and Firefox, it's worth noting that Safari has limited support through the webkit prefix.

Let's dive into implementing this functionality in our Blazor application.

Building Our Speech Recognition Demo

Let's walk through the step-by-step process of creating our voice-enabled Blazor application.

Step 1: Create a New Blazor WASM (WebAssembly) Project

Start by creating a new Blazor WASM application using the .NET CLI:

This command creates a new Blazor WASM project with all the necessary scaffolding and dependencies.

Step 2: Implementing the Web Speech API Integration

The Web Speech API provides powerful speech recognition capabilities directly in the browser. We'll create a JavaScript file to handle the speech recognition functionality and provide a clean interface for our Blazor components.

2a. Speech Recognition Using Web Speech API

First, create a new folder structure for our JavaScript files. In your project's folder, create a directory and add a new file called :

This JavaScript code provides several key features:

• Browser compatibility detection: Handles both standard and webkit-prefixed versions of the Speech Recognition API

• Language configuration: Set to English (US) by default, but easily configurable

• Error handling: Gracefully handles browsers that don't support speech recognition (like Safari)

• Callback integration: Uses .NET's JavaScript interop to communicate results back to our Blazor component ()

2b. Adding the Script to the Project

Next, we need to include our JavaScript file in the application. Add the following script reference to your file, just before the closing tag:

Step 3: Building the Blazor Component

Open the file and replace its content with the following comprehensive implementation:

Let's break down the key components of our Blazor implementation:

• State management: We track the application state using two fields:

• JavaScript interop: We use to call our JavaScript functions:

• Callback handling: The attribute enables JavaScript to call back into our code:

• Resource cleanup: We implement to properly clean up the JavaScript reference:

• Reactive UI: The component automatically updates when speech is recognized:

Step 4: Testing Your Application

Once you've implemented all the components, run your application:

When you navigate to the application and click the "🎤 Start Speaking" button, you'll see the interface change to show a "🚫 Stop Speaking" button, indicating that the application is actively listening for your voice input. As you speak, the recognized text will appear in the textarea below the buttons.

The application provides a smooth user experience with clear visual feedback about the current state of speech recognition.

What's Next?

In Part 2 of this series, we'll enhance our speech recognition implementation with AI capabilities using .NET Smart Components. We'll explore how to intelligently parse the recognized speech and automatically fill form fields, creating truly intelligent user interfaces that understand context and intent.

Stay tuned for the next part where we'll transform simple speech-to-text into intelligent form completion!

This article was written by Engincan Veske on https://abp.io/community/articles/building-intelligent-blazor-apps-part-1-speech-to-text-iiy3vybu#gsc.tab=0