jsakamoto / Toolbelt.Blazor.SpeechSynthesis

SpeechSynthesis API access for your Blazor apps.
https://jsakamoto.github.io/Toolbelt.Blazor.SpeechSynthesis/
Mozilla Public License 2.0
91 stars 19 forks source link

Loading voices not working on Android 11 #6

Open mkb13 opened 3 years ago

mkb13 commented 3 years ago

When I load your sample website on my Android 11 phone, I get "An unhandled error has occurred." It works on Windows Desktop and iOS.

I made a simplified version of your sample website with only:

It works on Windows Desktop (Edge) but I get the same error on my Android device. (Unfortunately I haven't figured out how to debug this on Android yet.)

Note: If I leave off the dropdown for selecting voices and just call SpeechSynthesis.speak with text when I click the Speak button, it speaks (with the default voice).

[Thanks for a great library! I'm just starting out with Blazor and this is one of the first things I wanted to do.]

mkb13 commented 3 years ago

I found this article about using speech synthesis on Android. I can't tell when it was written but it was at least 2020. Maybe voices just don't work that well on Android. (It's a shame because Android has a lot of great TTS voices.) https://talkrapp.com/speechSynthesis.html

jsakamoto commented 3 years ago

Thank you notify me. I could find some problems on Android devices because you reported this issue.

I fixed those problems and released the new version of this library include updating the live demonstration site.

I know you mention that Android devices might not support explicit specifying voice, but anyway, could you try the latest version of this library or try the currently live demo site on your Android device?

Again, thank you for your co-operation!

mkb13 commented 3 years ago

Awesome, I tried your live demo site and using the library myself, and both work on my Android device! Thanks! I no longer see the error AND I am able to select a voice (and it is used). I just had to change my own app to set the "Lang" field on the utterance object which I wasn't before. Not sure what that blog was talking about not being able to select a voice. Perhaps something changed on Android recently, because their API for managing TTS voices was a little weak last time I tried using them in an Android app.

Question unrelated to this issue: Have you by any chance tried getting Azure TTS to work in Blazor? I think it requires JS interop -- the JS version works as found here: https://github.com/Azure-Samples/cognitive-services-speech-sdk/tree/master/quickstart/javascript/browser/text-to-speech . I may try to use your SpeechSynthesis library as a model if you haven't done it already.

mkb13 commented 3 years ago

Update: I'm having trouble getting country selection to work in my sample on Android but it works on your live demo app. If I pick any English (en-AU, en-GB, etc.) I always just hear en-US (in my sample app only). I pasted in my @code section below -- do you see anything I am doing wrong? It's not letting me format the HTML here but all I have is the Voice dropdown copied directly from your sample, the textarea bound to the Text value, and the Speak button that calls onClickSpeak. Do you see anything I am doing wrong?

`@code {

string Text;
string Lang;

IEnumerable<SpeechSynthesisVoice> Voices = new SpeechSynthesisVoice[0];

SpeechSynthesisVoice CurrentVoice;

public string CurrentVoiceURI
{
    get { return this.CurrentVoice == null ? "(unset)" : this.CurrentVoice.VoiceIdentity; }
    set
    {
        this.CurrentVoice = this.Voices.FirstOrDefault(v => v.VoiceIdentity == value);
        this.Lang = this.CurrentVoice?.Lang ?? "";
    }
}

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        this.Voices = await this.SpeechSynthesis.GetVoicesAsync();
        this.StateHasChanged();
    }
}

void onClickSpeak()
{
    var utterancet = new SpeechSynthesisUtterance();
    SetupUtterancet(utterancet);
    this.SpeechSynthesis.Speak(utterancet); // <-- Speak!
}

void SetupUtterancet(SpeechSynthesisUtterance utterancet)
{
    utterancet.Text = this.Text;
    utterancet.Lang = this.Lang;
    utterancet.Voice = this.CurrentVoice;
}

}`

jsakamoto commented 3 years ago

Have you by any chance tried getting Azure TTS to work in Blazor?

No, I have not.

Do you see anything I am doing wrong?

I was reading your code above to investigate for a while, but I couldn't find out the problem point at this time.

If I come up with something, I'll report it to you.

jsakamoto commented 3 years ago

I tried my live demo on my Android device this morning, but it also spoke with the same English (en-US) voice even I choose any other English agent such as English (en-AU).

You said that behavior is only your code, but I could see the same behavior on my live demo site. So, I guess it is the specification or a system bug in Android devices itself of recently Android devices.