How to use Cognitive Services TTS in Blazor server? Very confused!

Question

I'm considering the following three options:

1. Use the Nuget package, which I have to think will cause a massive meltdown on my VM if I have a lot of users using the TTS (which I for sure intend to, as it's an English website).
2. Use the Javascript SDK. (my preferred method)-- do everything client side and catch js events using JS Interop
3. Use the REST API. (which I believe is missing a lot of functionality)

The problem with #2 is that the GitHub samples show "node.js" and "browser" branches, but the requirements for the latter include, according to https://github.com/Azure-Samples/cognitive-services-speech-sdk/tree/master/samples/js/browser

• A PC or Mac, with a working speaker.
• Ensure you have Node.js installed.

Errrrmmmm. . . that's really confusing, because I know what "browser" means, and my Android phone has one. And I'm in Korea, which means 99% of my customers are using their phones.

Can someone tell me how to use this Microsoft Service with Microsoft's flagship Web technology please? Seems like that should be a thing. . .

Answer 1

I have an example here: Blazor Video Creator

async Task CreateWAVFile()
{
    Processing = true;
    StateHasChanged();
    try
    {
        Status = "";
        Error = "";
        using (var client = new HttpClient())
        {
            // Get a auth token
            client.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", SubscriptionKey);
            UriBuilder uriBuilder = new UriBuilder(TokenUri);
            var result = await client.PostAsync(uriBuilder.Uri.AbsoluteUri, null);
            var AuthToken = await result.Content.ReadAsStringAsync();
            // Set Headers
            client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", AuthToken);
            client.DefaultRequestHeaders.Add("User-Agent", "curl");
            client.DefaultRequestHeaders.Add("X-Microsoft-OutputFormat", "audio-16khz-128kbitrate-mono-mp3");
            var ssml = @"<speak version='1.0' xml:lang='en-US' xmlns='http://www.w3.org/2001/10/synthesis' ";
            ssml = ssml + @"xmlns:mstts='http://www.w3.org/2001/mstts'>";
            ssml = ssml + @$"<voice name='en-US-JennyNeural'>{InputText}</voice></speak>";
            // Call the service
            HttpResponseMessage response =
                await client.PostAsync(new Uri(DestinationURL),
                    new StringContent(ssml,
                Encoding.UTF8, "application/ssml+xml"));
            if (response.IsSuccessStatusCode)
            {
                //Read as a byte array
                var bytes = await response.Content.ReadAsByteArrayAsync().ConfigureAwait(false);
                var AudioFilePath = $"{Processingpath}MyWavFile.mp3";
                File.WriteAllBytes(AudioFilePath, bytes);
            }
        }
    }
    catch (Exception ex)
    {
        Error = ex.Message;
    }
    finally
    {
        StateHasChanged();
    }
}

Answer 2

in the sample app, a node server is used to host the sample code. besides hosting the javascript and html, it supports one api call. this call returns the token keys to be used by the client code. with blazor server you have a couple options.

1. render the keys as variables via javascript interop
2. javascript interop call to blazor to get keys