BlazorBootstrap组件库语音组件介绍

博客分享

 0  324

张三 2022-04-13 09:57:53

悬赏：0 积分收藏

Blazor Bootstrap 组件库语音组件介绍

Speech 语音识别与合成

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

Demo https://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 >        <div >            <SpeechWave Show="Start" OnTimeout="OnTimeout"  />            <Button Text="@ButtonText" OnClick="OnStart" />        </div>        <div >            <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 >        <div >            <Textarea @bind-Value="InputText" rows="6" />        </div>        <div >            <SpeechWave Show="Start" ShowUsedTime="false"  />            <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);    }}