Centric connect.engage.succeed

Azure Speech services

Geschreven door Dick van Straaten - 22 mei 2019

Dick van Straaten
Voor mijn werk maak ik veel gebruik van mijn computer en mobiele telefoon. Ik verstuur veel e-mails en chatberichten, soms zelfs nog een Sms-bericht. Maar om te communiceren gebruik ik mijn stem nog altijd het vaakst.

Handsfree Websites 

Sinds kort ben ik privé in het bezit van een Google Home-speaker en gebruik ik mijn stem nu ook bij het instellen en uitzetten van mijn wekker. In de ochtend informeer ik ’s ochtends bij het aankleden naar het weer en ik luister het laatste nieuws op stemcommando. Gewoon in het Nederlands op een natuurlijk aanvoelende manier. Allemaal mogelijk gemaakt door de techniek van spraakherkenning.

Deze technologie is niet nieuw. De IBM Shoebox was in 1961 al in staat om spraak te herkennen. Uiteraard is deze technologie inmiddels sterk verbeterd en beter beschikbaar met de komst van cloud.

Inmiddels zijn er veel apparaten beschikbaar die door spraak aangestuurd en/of bevraagd kunnen worden, waardoor deze technologie nuttig ingezet kan worden in ons dagelijks leven. Voorbeelden naast mijn Google Home zijn: mijn laptop met Windows Cortana, mijn iPhone met Siri en Voice Command in mijn auto.

Ik besloot een onderzoek te doen naar de mogelijkheden van spraakherkenning in een website. Kunnen we een eenvoudige HTML-website handsfree besturen? Daarvoor heb ik een eenvoudige Single Page-website in HTML5/Javascript gebouwd.

In deze blog lees je over hoe ik mijn onderzoek heb aangepakt en wat de uitkomst is.

Azure Speech Service

De Microsoft Azure Cloud biedt verschillende Cognitive Services. Met deze verzameling van API’s beschik je als ontwikkelaar over kant-en-klare intelligentie. Voor mijn project gebruik ik de Speech-to-Text API.

Om deze API te gebruiken, heb je uiteraard een Azure Subscription nodig. Zoals de onderstaande animatie laat zien, is het abonneren op de API eenvoudig.

In de API blade navigeer je onder Resource Management naar keys. Daar kopieer je een van de beschikbare autorisatie sleutels die je nodig hebt om met jouw applicatie te autoriseren op de API om gegevens uit te wisselen.

Azure Cognitive Services SDK

Met de Speech-to-Text API kun je eenvoudig spraakherkenning aan jouw applicatie toevoegen en gesproken audio omzetten naar tekst. De SDK voor deze API kun je downloaden van de productwebsite https://aka.ms/csspeech of via een NuGet package installeren.

PM> Install-Package Microsoft.CognitiveServices.Speech -Version 1.3.1

Wanneer de SDK aan je project is toegevoegd, kun je onderaan je HTML-pagina een referentie maken naar het JavaScript-bestand dat alle functionaliteiten bevat.

<!-- Speech SDK reference sdk. -->
<script src="js/microsoft.cognitiveservices.speech.sdk.bundle.js"></script>

Speech to text

In mijn HTML-project heb ik een (microfoon) image button met een id tag toegevoegd. Deze button fungeert als opnameknop.

<img id="startRecognizeOnceAsyncButton" alt="">

Ik maak een nieuw JavaScript-bestand aan voor mijn functionaliteiten en maak onderaan de HTML-pagina een referentie aan in mijn HTML-bestand.

<script src="js/speech.js"></script>

Allereerst declareer ik de benodigde variabelen in mijn bestand.

var subscriptionKey = "{autorisatie key uit portal}";
var serviceRegion = "westeurope";

De API ondersteunt meerdere talen. Ik kies voor de Engelse taal, omdat het Nederlandse taal-model nog onvoldoende getraind en daardoor minder betrouwbaar is.

var speechRecognitionLanguage = "en-US";

In dit bestand voeg ik (nadat de pagina volledig geladen is) een Event Listener aan de eerder gemaakte image button toe.

document.addEventListener("DOMContentLoaded", function () {

    startRecognizeOnceAsyncButton =
document.getElementById("startRecognizeOnceAsyncButton");

    startRecognizeOnceAsyncButton.addEventListener("click", function () {

Vervolgens configureer ik mijn client. Ik vraag een autorisatietoken en bepaal de taal die ik bij de API aanlever.

var speechConfig;
if (authorizationToken) { 
    speechConfig = SpeechSDK
.SpeechConfig
.FromAuthorizationToken(authorizationToken, serviceRegion); 
} else {
    if (subscriptionKey === "") { return; }

    speechConfig = SpeechSDK
    .SpeechConfig
    .fromSubscription(subscriptionKey, serviceRegion);
}

speechConfig.speechRecognitionLanguage = "en-US";

Je kunt de audio op twee manieren aanleveren: via een bestand of via de microfoon. Ik kies voor de laatste optie.

var audioConfig = SpeechSDK.AudioConfig.fromDefaultMicrophoneInput();

Om de website te laten weten wanneer er een spraakcommando wordt gegeven, kies ik een aankondiging geïnspireerd door andere voice assistants: Hey Centric. In mijn scenario wordt mijn gesproken tekst als audio verzonden naar de API. De API geeft een tekst als response terug. Via een regex pattern controleer ik of er een commando gegeven wordt.

let commandReg = /^hey centric/i;

var recognizer = new SpeechSDK.SpeechRecognizer(speechConfig, audioConfig);
         recognizer.recognizeOnceAsync(
            function (result) {
                recognizer.close();
                recognizer = undefined;

                startRecognizeOnceAsyncButton.disabled = false;

                if (commandReg.test(result.text)) {
                    voiceCommand(result.text);
                }

               ...
            },
            function (err) {
                ...
            }
            ...
        });

Wanneer de tekst begint met Hey Centric wordt mijn JavaScript-functie voiceCommand aangeroepen.

Voice Commands

Ik heb twee verschillende commando’s gebouwd. De functie bepaalt daarom eerst de intentie: welk commando is er door de gebruiker gegeven?

De eerst intentie om te navigeren: scroll to. De tweede om de layout te manipuleren: change to.

Nadat de aankondiging Hey Centric is verwijderd, wordt de intentie bepaald.

Daarna wordt het commando verwijderd en blijft de intentie parameter over. In onderstaande code manipuleer ik mijn DOM om een kleur te wijzigen naar gray of green.

function voiceCommand(command) {

        command = command.toLowerCase()
        .replace(commandReg, "")
        .replace(",", "");   

    ...

    
    if (command.includes("change to") || command.includes("changeto"))
     {   
        // Remove intention, isolate command
        command = command.replace("change", "")
        .replace("to", "")
        .replace(".", "")
        .replace(/ /g, '');
    

        switch (command) {
        case "gray":
             document.getElementById("sideNav").classList.remove('bg-primary');
             document.getElementById("sideNav").classList.add('gray');
             break;
        case "green":
            ...
        }
    }

    //or manipulate with javascript
    ...
    }

Na het publiceren bezoek ik mijn website op https://cencept-speech.azurewebsites.net. De SSL/https-verbinding is vereist bij het gebruik van mijn microfoon. Mijn browser vraagt eenmalig toestemming als ik op de opnameknop klik. Daarna kan ik mijn commando’s testen. En het werkt!

Omgevingsgeluid, articulatie en een slechte microfoon gooien soms nog wat roet in het eten, maar dat wordt in de nabije toekomst met zekerheid alleen maar beter.

 

En het resultaat werkt. Ik druk op mijn microfoon. De opnamefunctie van mijn browser wordt gestart. Mijn website luistert naar commando’s, zoals:

Hey Centric, change to gray

Hey Centric, change to square

Hey Centric, go to Azure

Hey Centric go to Thank You

Demo

Je kunt de code downloaden op https://github.com/CentricStraaten/CentricVoiceAssistant/upload/master.

Heb je een eigen API key, dan kun je de website ook testen. Ga daarvoor naar https://cencept-speech.azurewebsites.net/#.

Conclusie

Dit onderzoekje was redelijk basic. De implementatie was eenvoudig. Maar het resultaat werkt. Ik druk op mijn microfoon. De opnamefunctie van mijn browser wordt gestart. En na wat experimenteren met op de juiste manier in mijn microfoon praten luistert mijn website naar commando’s.

Met enige creativiteit kun je jouw website eenvoudig uitrusten met spraakherkenning en een voice assistent.

Over Dick

Dick van Straaten is Craft Expert van Team Azure Development binnen Craft, hét groeiprogramma voor IT'ers (powered by Centric). Wil je zijn blog volgen? Schrijf je in voor de Craft-update

Wil je meer weten over Craft, hét groeiprogramma voor IT'ers? Neem een kijkje op de website!

     
Schrijf een reactie
  • Captcha image
  • Verzenden