Blazor Bootstrap 组件库中的语音组件有哪些特点和应用场景？

本文共计1140个文字，预计阅读时间需要5分钟。

%E2%80%9CSpeech+%E8%AF%AD%E9%9F%B3%E8%AF%86%E5%88%AB%E5%8F%8A%E5%90%88%E6%88%90%EF%BC%8C%E9%80%9A%E8%BF%87%E9%BA%A6%E5%85%8E%E8%AF%AD%E9%9F%B3%E9%87%87%E9%9B%86%E8%BD%AC%E6%8D%A2%E4%B8%BA%E6%96%87%E5%AD%97%EF%BC%88STT%EF%BC%89%EF%BC%8C%E6%88%96%E8%80%85%E6%96%87%E5%AD%97%E8%BD%AC%E8%AF%AD%E9%9F%B3%E9%97%AD%E8%AF%AD%E5%87%BA%E6%9D%A5%EF%BC%88TTS%EF%BC%89%EF%BC%8C%E4%BD%BF%E7%94%A8BootstrapBlazor.AzureSpeech%E7%BB%84%E4%BB%B6%EF%BC%8C%E5%8F%91%E5%B1%95%E6%A1%88%E4%BE%8B%E8%AF%A6%E8%A7%A3%E5%9C%A8%E2%80%9CDemo%E2%80%9D%E2%80%9D%E2%80%9C

Speech 语音识别与合成

通过麦克风语音采集转换为文字（STT），或者通过文字通过语音朗读出来（TTS）
本组件依赖于 BootstrapBlazor.AzureSpeech，使用本组件时需要引用其组件包

Demo www.blazor.zone/speechs

Nuget 包安装

使用 nuget.org 进行 BootstrapBlazor.AzureSpeech 组件的安装

.NET CLI

dotnet add package BootstrapBlazor.AzureSpeech

PackageReference

<PackageReference Include="BootstrapBlazor.AzureSpeech" /> 注册服务

Program.cs

// 增加语音服务 builder.Services.AddBootstrapBlazorAzureSpeech(); 使用服务

// 语音识别服务 [Inject] [NotNull] private RecognizerService? RecognizerService { get; set; } // 语音合成服务 [Inject] [NotNull] private SynthesizerService? SynthesizerService { get; set; } 1. Recognizer 语音识别, 通过语音采集设备将语音转化为文本

点击开始识别后对录入语音进行识别

@page "/recognizers" @using BootstrapBlazor.Components @using Microsoft.AspNetCore.Components <h3>Recognizer 语音识别</h3> <h4>通过语音采集设备将语音转化为文本</h4> <p><b>使用说明：</b></p> <p>点击 <b>开始识别</b> 后，脚本运行可能会提示要求录音权限，授权后开始讲话，稍等一下，右侧文本框显示语音识别结果，请勿讲完话后直接点击 <b>结束识别</b></p> <div class="row"> <div class="col-12 col-sm-6 text-center"> <SpeechWave Show="Start" OnTimeout="OnTimeout" class="my-3" /> <Button Text="@ButtonText" OnClick="OnStart" /> </div> <div class="col-12 col-sm-6"> <Textarea @bind-Value="Result" rows="6" /> </div> </div> @code{ [Inject] [NotNull] private RecognizerService? RecognizerService { get; set; } private bool Start { get; set; } private string? Result { get; set; } private string ButtonText { get; set; } = "开始识别"; private async Task OnStart() { if (ButtonText == "开始识别") { Start = true; ButtonText = "结束识别"; await RecognizerService.RecognizeOnceAsync(Recognize); } else { await Close(); } } private async Task OnTimeout() { await Close(); } private Task Recognize(string result) { Result = result; Start = false; ButtonText = "开始识别"; StateHasChanged(); return Task.CompletedTask; } private async Task Close() { await RecognizerService.CloseAsync(Recognize); } } 2.Synthesizer 语音合成,将文本内容转化为语音

点击开始合成后对文本内容进行语音合成

@page "/synthesizers" @using BootstrapBlazor.Components @using Microsoft.AspNetCore.Components <h3>Synthesizer 语音合成</h3> <h4>将文本内容转化为语音</h4> <div class="row"> <div class="col-12 col-sm-6"> <Textarea @bind-Value="InputText" rows="6" /> </div> <div class="col-12 col-sm-6 text-center"> <SpeechWave Show="Start" ShowUsedTime="false" class="my-3" /> <Button Text="@ButtonText" OnClick="OnStart" IsDisabled="@IsDisabled" Icon="@ButtonIcon" /> </div> </div> @code{ [Inject] [NotNull] private SynthesizerService? SynthesizerService { get; set; } private bool Start { get; set; } private string? InputText { get; set; } private string ButtonText { get; set; } = "开始合成"; private string ButtonIcon { get; set; } = "fa fa-fw fa-microphone"; private bool IsDisabled { get; set; } private async Task OnStart() { if (ButtonText == "开始合成") { IsDisabled = true; ButtonIcon = "fa fa-fw fa-spin fa-spinner"; await SynthesizerService.SynthesizerOnceAsync(InputText, Recognize); } else { await Close(); } } private Task Recognize(SynthesizerStatus status) { if (status == SynthesizerStatus.Synthesizer) { Start = true; IsDisabled = false; ButtonIcon = "fa fa-fw fa-spin fa-spinner"; ButtonText = "停止合成"; } else { Start = false; IsDisabled = false; ButtonIcon = "fa fa-fw fa-microphone"; ButtonText = "开始合成"; } StateHasChanged(); return Task.CompletedTask; } private async Task Close() { await SynthesizerService.CloseAsync(Recognize); } }

Blazor Bootstrap 组件库文档

www.blazor.zone

写在最后

　　希望大佬们看到这篇文章，能给项目点个star支持下，感谢各位！

star流程：

1、访问点击项目链接：BootstrapBlazor

　　gitee.com/LongbowEnterprise/BootstrapBlazor

2、点击star，如下图，即可完成star，关注项目不迷路：
　　
　　

另外还有两个GVP项目，大佬们方便的话也点下star呗，非常感谢：

　　BootstrapAdmin 项目地址：

　　gitee.com/LongbowEnterprise/BootstrapAdmin

　　SliderCaptcha 项目地址：

　　gitee.com/LongbowEnterprise/SliderCaptcha

交流群（QQ）欢迎加群讨论

　　 BA & Blazor ①（795206915）　　　　　　　 BA & Blazor ②（675147445）