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

注册服务

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

Recognizer 语音识别

通过语音采集设备将语音转化为文本

    
使用说明：
    
点击 开始识别 后，脚本运行可能会提示要求录音权限，授权后开始讲话，稍等一下，右侧文本框显示语音识别结果，请勿讲完话后直接点击 结束识别
    

        

            
            
        
        

                    </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);
    }
}
</code></pre>
<h2 id="2synthesizer-语音合成将文本内容转化为语音">2.Synthesizer 语音合成,将文本内容转化为语音</h2>
<p>点击开始合成后对文本内容进行语音合成</p>
<pre><code>@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);
    }
}
</code></pre>
<p><img src="https://img.yipin100.com/p.php?img=//img.1024sou.com/blog/1980213/202204/1980213-20220413091242847-975932348.gif" alt="" loading="lazy"></p>
<h2 id="blazor-bootstrap-组件库文档">Blazor Bootstrap 组件库文档</h2>
<p>https://www.blazor.zone</p>
<h2 id="写在最后">写在最后</h2>
<p>　　希望大佬们看到这篇文章，能给项目点个star支持下，感谢各位！</p>
<h3 id="star流程">star流程：</h3>
<p>1、访问点击项目链接：BootstrapBlazor   <img src="https://img.yipin100.com/p.php?img=//img.1024sou.com/blog/1980213/202204/1980213-20220413091523768-760474123.png" alt="" loading="lazy"></p>
<p>　　https://gitee.com/LongbowEnterprise/BootstrapBlazor</p>
<p>2、点击star，如下图，即可完成star，关注项目不迷路：<br>
　　<br>
　　<img src="https://img.yipin100.com/p.php?img=//img.1024sou.com/blog/1980213/202204/1980213-20220413091534250-163595061.png" alt="" loading="lazy"></p>
<p>另外还有两个GVP项目，大佬们方便的话也点下star呗，非常感谢：</p>
<p>　　BootstrapAdmin 项目地址：<img src="https://img.yipin100.com/p.php?img=//img.1024sou.com/blog/1980213/202204/1980213-20220413091541669-2144874533.png" alt="" loading="lazy"></p>
<p>　　https://gitee.com/LongbowEnterprise/BootstrapAdmin</p>
<p>　　SliderCaptcha 项目地址：<img src="https://img.yipin100.com/p.php?img=//img.1024sou.com/blog/1980213/202204/1980213-20220413091548652-1529336205.png" alt="" loading="lazy"></p>
<p>　　https://gitee.com/LongbowEnterprise/SliderCaptcha</p>
<p>交流群（QQ）欢迎加群讨论</p>
<p>　　        BA & Blazor ①（795206915）　　　　　　　   BA & Blazor ②（675147445）</p>
<p><img src="https://img.yipin100.com/p.php?img=//img.1024sou.com/blog/1980213/202204/1980213-20220413091557096-1107325269.png" alt="" loading="lazy"> <img src="https://img.yipin100.com/p.php?img=//img.1024sou.com/blog/1980213/202204/1980213-20220413091603100-2119974189.png" alt="" loading="lazy"></p>
						  
					  </div>
						<!--conend-->
							<div class="p-2"></div>

						<div class="arcinfo my-3 fs-7 text-center">
							
							
			<a href='/t/etagid55-0.html' class='tagbtn' target='_blank'>blazor</a><a href='/t/etagid1383-0.html' class='tagbtn' target='_blank'>Blazor组件</a><a href='/t/etagid400-0.html' class='tagbtn' target='_blank'>BootstrapBlazor</a><a href='/t/etagid2646-0.html' class='tagbtn' target='_blank'>.net6</a>							
						



						</div>
						
						<div class="p-2"></div>

						

						
					</div>
					<div class="p-2"></div>
					<!--xg-->
					<div class="lbox p-4 shadow-sm rounded-3">
						<div class="boxtitle"><h2 class="fs-4">相关</h2></div>
						
<hr>				
						
			<div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-544187.html">Blazor入门：ASP.NET Core Razor 组件</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-538021.html">使用.NET5、Blazor和Electron.NET构建跨平台桌面应用</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-536454.html">.NET6开发时支持IIS</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-522109.html">.Net6  winform 程序使用依赖注入</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-492787.html">云服务器CentOS系统安装.NET6.0</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-450873.html">十行代码搭建基于.NET6三维应用程序</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-450069.html">.NET6中一些常用组件的配置及使用记录，持续更新中。。。</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-442295.html">ABP core学习之三 使用Mysql数据库（.NET6）</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-410661.html">【ASP.NET Core】Blazor+MiniAPI完成文件下载</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-375904.html">.NET6 Hangfire</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-372526.html">Blazor是春天还是寒风里的挣扎</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div><div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-356978.html">blazor webassembly在ios 12及以下版本打不开，调试报错：ReferenceError: Cant find vari</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div>            
            
            <!---->
                                    
           <!---->
  			
						

					</div>
					<!--xgend-->
				</div>

				<div class="col-lg-3 col-12 p-0 ps-lg-2">
					<!--box-->									
					<!--boxend-->
					<!--<div class="p-2"></div>-->

					<!--box-->
									<div class="lbox p-4 shadow-sm rounded-3">
					
									   <div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div>
										<div class="clearfix"></div>
										<ul class="m-0 p-0 fs-7 r-tag">
										</ul>
									

										
										<div class="clearfix"></div>
									</div>
					<!--box end-->

					
				</div>

			</div>
		
		
		
		</div>	

</main>
						<div class="p-2"></div>
<footer>
<div class="container-fluid p-0 bg-black">
	<div class="container p-0  fs-8">
	<p class="text-center m-0 py-2 text-white-50">一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a></p>
	</div>	
</div>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</footer>
		
<script src="/skin/bootstrap.bundle.js"></script>

</body>
</html>