Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jsakamoto/Toolbelt.Blazor.SpeechSynthesis
SpeechSynthesis API access for your Blazor apps.
https://github.com/jsakamoto/Toolbelt.Blazor.SpeechSynthesis
Last synced: 10 days ago
JSON representation
SpeechSynthesis API access for your Blazor apps.
- Host: GitHub
- URL: https://github.com/jsakamoto/Toolbelt.Blazor.SpeechSynthesis
- Owner: jsakamoto
- License: mpl-2.0
- Created: 2018-10-19T13:53:10.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-11-26T07:10:52.000Z (12 months ago)
- Last Synced: 2024-04-27T03:24:09.350Z (7 months ago)
- Language: C#
- Homepage: https://jsakamoto.github.io/Toolbelt.Blazor.SpeechSynthesis/
- Size: 4.23 MB
- Stars: 87
- Watchers: 10
- Forks: 17
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-blazor - Blazor.SpeechSynthesis -  A library to provide Speech Synthesis API access for Blazor. (Libraries & Extensions / Tools & Utilities)
README
# Blazor SpeechSynthesis [](https://www.nuget.org/packages/Toolbelt.Blazor.SpeechSynthesis/)
## Summary
This is a class library for Blazor app (both "WebAssembly App" client-side model and "Server App" server-side model) to provide Speech Synthesis API access.
- [Live Demo Site](https://jsakamoto.github.io/Toolbelt.Blazor.SpeechSynthesis//)
## How to install and use?
### 1. Installation and Registration
**Step.1-1** Install the library via NuGet package, like this.
```shell
> dotnet add package Toolbelt.Blazor.SpeechSynthesis
```
**Step.1-2** Register "SpeechSynthesis" service into the DI container.
If the project is a Blazor Server App or a Blazor WebAssembly App ver.3.1 Preview 4 or earlier, add the code into the `ConfigureService` method in the `Startup` class of your Blazor application.
```csharp
// Startup.cs
using Toolbelt.Blazor.Extensions.DependencyInjection; // <- Add this, and...
...
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddSpeechSynthesis(); // <- Add this line.
...
```
If the project is a Blazor WebAssembly App ver.3.2 Preview 1 or later, add the code into the `Main` method in the `Program` class of your Blazor application.
```csharp
// Program.cs
using Toolbelt.Blazor.Extensions.DependencyInjection; // <- Add this, and...
...
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
...
builder.Services.AddSpeechSynthesis(); // <- Add this line.
...
```
### 2. Usage in your Blazor component (.razor)
**Step.2-1** Open the `Toolbelt.Blazor.SpeechSynthesis` namespace, and inject the `SpeechSynthesis` service into the component.
```csharp
@{/* This is your component .razor */}
@using Toolbelt.Blazor.SpeechSynthesis @{/* Add these two lines. */}
@inject SpeechSynthesis SpeechSynthesis
...
```
**Step.2-2** Invoke `Speak()` method of the `SpeechSynthesis` service instance to speak!
```html
@using Toolbelt.Blazor.SpeechSynthesis
@inject SpeechSynthesis SpeechSynthesis
Speak
@code {
string Text;
async Task onClickSpeak() {
await this.SpeechSynthesis.SpeakAsync(this.Text); // 👈 Speak!
}
}
```
You can also speak with detail parameters, such as pitch, rate, volume, by using `SpeechSynthesisUtterance` object.
```csharp
async Task onClickSpeak() {
var utterancet = new SpeechSynthesisUtterance {
Text = this.Text,
Lang = "en-US", // BCP 47 language tag
Pitch = 1.0, // 0.0 ~ 2.0 (Default 1.0)
Rate = 1.0, // 0.1 ~ 10.0 (Default 1.0)
Volume = 1.0 // 0.0 ~ 1.0 (Default 1.0)
}
await this.SpeechSynthesis.SpeakAsync(utterancet); // 👈 Speak!
}
```
If you want to chose type of voices, you can do it with `GetVoicesAsync()` method of `SpeechSynthesis` service instance.
```csharp
IEnumerable Voices;
protected async override Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
this.Voices = await this.SpeechSynthesis.GetVoicesAsync();
this.StateHasChanged();
}
}
async Task onClickSpeak() {
var utterancet = new SpeechSynthesisUtterance {
Text = this.Text,
Voice = this.Voices.FirstOrDefault(v => v.Name.Contains("Haruka"));
}
await this.SpeechSynthesis.SpeakAsync(utterancet); // 👈 Speak with "Haruka"'s voice!
}
```
## Release Note
Release notes is [here](https://github.com/jsakamoto/Toolbelt.Blazor.SpeechSynthesis/blob/master/RELEASE-NOTES.txt).
## License
[Mozilla Public License Version 2.0](https://github.com/jsakamoto/Toolbelt.Blazor.SpeechSynthesis/blob/master/LICENSE)