Integration Azure Speech Recongition with Blazor and .NET 8
Published: 2024-01-10 12:53:55

##  Introduction

Welcome to an in-depth guide on integrating Azure Speech-to-Text into your Blazor applications. This article aims to provide a comprehensive walkthrough, allowing you to harness the power of speech recognition technology seamlessly within the dynamic Blazor framework.

## Prerequisites

List the prerequisites, including:
- Azure subscription with Speech resource
- Visual Studio or Visual Studio Code installed
- Basic knowledge of Blazor and C#

## Step 1: Set Up Azure Resources

1.1 **Create an Azure Speech Resource:**
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ogt7p90xnteec4b1mrhi.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4le7nyk2jbr2mrx96utf.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/676slwq382h6zqktjjg4.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p976mjg55sn62rg3qpgq.png)

1.2 **Retrieve Subscription Key and Region:**
   - Steps to find the subscription key and region in the Azure Portal.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oa6fjks4nlizp517abne.png)
   
## Step 2: Create a .NET Blazor App

2.1 **Create a New Blazor WebAssembly Or Server App:** 

```
dotnet new blazorwasm -n YourBlazorWasmApp
cd YourBlazorWasmApp
```

2.2 **Install Azure Speech SDK:**
`  Install-Package Microsoft.CognitiveServices.Speech
`

## Step 3: Implement Speech-to-Text && Text-to-Speech

3.1 **Configure Speech Service in `Program.cs`:**
   - Code snippet for configuring the Speech service in the Blazor app.

3.2 **Create a Speech-to-Text && Text-to-Speech Components :**


```
 @using Microsoft.CognitiveServices.Speech
@using Microsoft.CognitiveServices.Speech.Audio
@using Radzen.Blazor
 <RadzenRow>
   
    <RadzenColumn Size="6">
        <RadzenSpeechToTextButton Change="OnSpeechCaptured"  />
        <RadzenTextArea @bind-Value=@Inputvalue   Style="margin-top:15px"   />
    </RadzenColumn>
</RadzenRow>

@code {
    string? Inputvalue; 

    

    async void OnSpeechCaptured( string text )
    { 
        var config = SpeechConfig.FromSubscription("YourSpeechSubscriptionKey", "YourSpeechRegion");
        config.SpeechSynthesisLanguage = "en-US";

        using var audioConfig = AudioConfig.FromDefaultMicrophoneInput();
        using var speechRecognizer = new SpeechRecognizer(config, audioConfig);
        var speechRecongResult = await speechRecognizer.RecognizeOnceAsync();
        OutputSpeechRecognitionResult(speechRecongResult); 
    }

    public void OutputSpeechRecognitionResult(SpeechRecognitionResult speechRecognitionResult)
    {
        switch (speechRecognitionResult.Reason)
        {
            case ResultReason.RecognizedSpeech:
                Inputvalue = speechRecognitionResult.Text;
                break;
            case ResultReason.NoMatch:
                Inputvalue = "NOMATCH: Speech could not be recognized.";

                break;
            case ResultReason.Canceled:
                var cancellation = CancellationDetails.FromResult(speechRecognitionResult);
                 Inputvalue = $"CANCELED: Reason={cancellation.Reason}";

                if (cancellation.Reason == CancellationReason.Error)
                {
                    Console.WriteLine($"CANCELED: ErrorCode={cancellation.ErrorCode}");
                    Console.WriteLine($"CANCELED: ErrorDetails={cancellation.ErrorDetails}");
                    Console.WriteLine($"CANCELED: Did you set the speech resource key and region values?");
                }
                break;
        }
    }
}

```



```
@using Microsoft.CognitiveServices.Speech
@using Microsoft.CognitiveServices.Speech.Audio
@using Radzen.Blazor
 <RadzenRow>
   
    <RadzenColumn Size="6">
        <RadzenSpeechToTextButton Change="OnSpeechCaptured"  />
        <RadzenTextArea @bind-Value=@Inputvalue   Style="margin-top:15px"   />
    </RadzenColumn>
</RadzenRow>

@code {
    string? Inputvalue; 

    

    async void OnSpeechCaptured( string text )
    { 
        var config = SpeechConfig.FromSubscription("YourSpeechSubscriptionKey", "YourSpeechRegion");
        config.SpeechSynthesisLanguage = "en-US";

        using var audioConfig = AudioConfig.FromDefaultMicrophoneInput();
        using var speechRecognizer = new SpeechRecognizer(config, audioConfig);
        var speechRecongResult = await speechRecognizer.RecognizeOnceAsync();
        OutputSpeechRecognitionResult(speechRecongResult); 
    }

    public void OutputSpeechRecognitionResult(SpeechRecognitionResult speechRecognitionResult)
    {
        switch (speechRecognitionResult.Reason)
        {
            case ResultReason.RecognizedSpeech:
                Inputvalue = speechRecognitionResult.Text;
                break;
            case ResultReason.NoMatch:
                Inputvalue = "NOMATCH: Speech could not be recognized.";

                break;
            case ResultReason.Canceled:
                var cancellation = CancellationDetails.FromResult(speechRecognitionResult);
                 Inputvalue = $"CANCELED: Reason={cancellation.Reason}";

                if (cancellation.Reason == CancellationReason.Error)
                {
                    Console.WriteLine($"CANCELED: ErrorCode={cancellation.ErrorCode}");
                    Console.WriteLine($"CANCELED: ErrorDetails={cancellation.ErrorDetails}");
                    Console.WriteLine($"CANCELED: Did you set the speech resource key and region values?");
                }
                break;
        }
    }
}
```



3.3 **Handle Configuration:**
  In the last provided code snippet , you will notice two placeholders: "YourSpeechSubscriptionKey" and "YourSpeechRegion". These placeholders act as placeholders for your actual Azure Speech resource information.

## Step 4: Run and Test

4.1 **Run the Blazor App:** 

`dotnet run
`
4.2 **Test Speech-to-Text && Text-to-Speech:**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dxl78700emqp5avbhm4z.png)