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 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 组件库文档
写在最后
希望大佬们看到这篇文章,能给项目点个star支持下,感谢各位!
star流程:
1、访问点击项目链接:BootstrapBlazor
https://gitee.com/LongbowEnterprise/BootstrapBlazor
2、点击star,如下图,即可完成star,关注项目不迷路:
另外还有两个GVP项目,大佬们方便的话也点下star呗,非常感谢:
BootstrapAdmin 项目地址:
https://gitee.com/LongbowEnterprise/BootstrapAdmin
SliderCaptcha 项目地址:
https://gitee.com/LongbowEnterprise/SliderCaptcha
交流群(QQ)欢迎加群讨论
BA & Blazor ①(795206915) BA & Blazor ②(675147445)
Blazor Bootstrap 组件库语音组件介绍的更多相关文章
- 从0搭建Vue3组件库:button组件
button组件几乎是每个组件库都有的:其实实现一个button组件是很简单的.本篇文章将带你一步一步的实现一个button组件.如果你想了解完整的组件库搭建,你可以先看使用Vite和TypeScri ...
- antd组件库BackTop组件设置动态背景图片的问题
有这么一个需求,利用antd组件库中的BackTop组件的逻辑,但是自己写样式. 我的目标样式是:有两张图片,一张是normal(正常情况),一张是hover(悬停情况). 这时候就要用到css的动画 ...
- 从0搭建vue3组件库: Input组件
本篇文章将为我们的组件库添加一个新成员:Input组件.其中Input组件要实现的功能有: 基础用法 禁用状态 尺寸大小 输入长度 可清空 密码框 带Icon的输入框 文本域 自适应文本高度的文本域 ...
- 16款优秀的Vue UI组件库推荐
16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...
- 值得收藏的8个Web端组件库
值得收藏的8个Web端组件库 Ant Design 介绍:一个服务于企业级产品的设计体系,基于『确定』和『自然』的设计价值观和模块化的解决方案,让设计者专注于更好的用户体验. 组件库地址:https: ...
- [转载]前端——实用UI组件库
https://www.cnblogs.com/xuepei/p/7920888.html Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https:/ ...
- 强烈推荐优秀的Vue UI组件库
Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...
- ui组件库
基于Vue的Quasar Framework 中文网 http://www.quasarchs.com/ quasarframework/quasar: Quasar Frameworkhttps:/ ...
- 【转】优秀的Vue UI组件库
原文来源:https://www.leixuesong.com/3342 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司 ...
随机推荐
- 5月25日 python学习总结 HTML标签
一.HTML简介 http://www.cnblogs.com/linhaifeng/articles/8973878.html 二.HTML标签与文档结构 http://www.cnblogs.c ...
- python练习册 每天一个小程序 第0006题
1 # -*-coding:utf-8-*- 2 __author__ = 'Deen' 3 ''' 4 题目描述: 5 你有一个目录,放了你一个月的日记,都是 txt,为了避免分词的问题,假设内容都 ...
- 三层PetShop架构设计
<解剖 PetShop >系列之一 前言: PetShop 是一个范例,微软用它来展示 .Net 企业系统开发的能力.业界有许多 .Net 与 J2EE 之争,许多数据是从微软的 Pe ...
- 职场PUA
哈哈 你这个的底层逻辑是什么? 顶层设计在哪? 最终交付价值是什么? 过程的抓手在哪里? 如何保证结果的闭环? 你比别人的亮点在哪里? 优势在哪里? 你的思考和沉淀在哪里? 你有形成自己的方法论吗?
- 通过R Studio用Markdown写Beamer
技术背景 在写一些学术演示文档时,经常有可能用到Beamer--一种Latex的学术风PPT模板,比如下图所示的这种: 这种风格的演示文档有几个明显的优点:简约.严肃.可以用Latex敲公式和推导.可 ...
- JVM知识(一) 求你了,别再说Java对象都是在堆内存上分配空间的了!
求你了,别再说Java对象都是在堆内存上分配空间的了! https://baijiahao.baidu.com/s?id=1661296872935371634&wfr=spider& ...
- 是否可以继承String类?
String 类是final类,不可以被继承. 补充:继承String本身就是一个错误的行为,对String类型最好的重用方式是关联关系(Has-A)和依赖关系(Use-A)而不是继承关系(Is-A) ...
- Oracle入门基础(二)一一过滤和排序
SQL> --查询10号部门的员工 SQL> select * from emp where deptno=10; EMPNO ENAME JOB MGR HIREDATE SAL COM ...
- 什么是 Busy spin?我们为什么要使用它?
Busy spin 是一种在不释放 CPU 的基础上等待事件的技术.它经常用于避免丢 失 CPU 缓存中的数据(如果线程先暂停,之后在其他 CPU 上运行就会丢失). 所以,如果你的工作要求低延迟,并 ...
- List、Set、Map 和 Queue 之间的区别?
List 是一个有序集合,允许元素重复.它的某些实现可以提供基于下标值的常量 访问时间,但是这不是 List 接口保证的.Set 是一个无序集合.