Toolbelt.Blazor.SpeechSynthesis 1.0.0

Blazor SpeechSynthesis

Summary

This is a class library for Blazor app to provide Speech Synthesis API access.

How to install and use?

1. Installation and Registration

Step.1-1 Install the library via NuGet package, like this.

> dotnet add package Toolbelt.Blazor.SpeechSynthesis

Step.1-2 Register "SpeechSynthesis" service into the DI container, at ConfigureService method in the Startup class of your Blazor application.

// Startup.cs

using Toolbelt.Blazor.Extensions.DependencyInjection; // <- Add this, and...
...
public class Startup
{
  public void ConfigureServices(IServiceCollection services)
  {
    services.AddSpeechSynthesis(); // <- Add this line.
    ...

2. Usage in your Blazor component (.cshtml)

Step.2-1 Open the Toolbelt.Blazor.SpeechSynthesis namespace, and inject the SpeechSynthesis service into the component.

@{/* This is your component .cshtml*/}
@using Toolbelt.Blazor.SpeechSynthesis @{/* Add these two lines. */}
@inject SpeechSynthesis SpeechSynthesis
...

Step.2-2 Invoke Speak() method of the SpeechSynthesis service instance to speak!

@using Toolbelt.Blazor.SpeechSynthesis
@inject SpeechSynthesis SpeechSynthesis

<div> <textarea bind="@Text"></textarea> </div>

<div> <button onclick="@onClickSpeak">Speak</button> </div>

@functions {

  string Text;

  void onClickSpeak() {
    this.SpeechSynthesis.Speak(this.Text); // <-- Speak!
  }
}

You can also speak with detail parameters, such as picth, rate, volume, by using SpeechSynthesisUtterance object.

  void 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)
    }
    this.SpeechSynthesis.Speak(utterancet); // <-- Speak!
  }

If you want to chose type of voices, you can do it with GetVoicesAsync() method of SpeechSynthesis service instance.

  IEnumerable<SpeechSynthesisVoice> Voices;

  protected async override Task OnInitAsync()
  {
    this.Voices = await this.SpeechSynthesis.GetVoicesAsync();
  }

  void onClickSpeak() {
    var utterancet = new SpeechSynthesisUtterance {
        Text = this.Text,
        Voice = this.Voices.FirstOrDefault(v => v.Name.Contains("Haruka"));
    }
    this.SpeechSynthesis.Speak(utterancet); // <-- Speak with "Haruka"'s voice!
  }

License

Mozilla Public License Version 2.0