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:
1.2 Retrieve Subscription Key and Region:
- Steps to find the subscription key and region in the Azure Portal.
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:
Top comments (1)
The ” Code snippet for configuring the Speech service in the Blazor app.” is missing?