Blazor Bootstrap 元件庫語音元件介紹

AlexChow發表於2022-04-13

Speech 語音識別與合成

通過麥克風語音採集轉換為文字（STT），或者通過文字通過語音朗讀出來（TTS）
本元件依賴於 BootstrapBlazor.AzureSpeech，使用本元件時需要引用其元件包

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);
    }
}