Met de nieuwe JavaScript Web Speech API kunt u eenvoudig spraakherkenning aan uw webpagina's toevoegen. Deze API biedt nauwkeurige controle en flexibiliteit over de spraakherkenningsmogelijkheden in Chrome versie 25 en hoger. Hier is een voorbeeld waarbij de herkende tekst vrijwel onmiddellijk verschijnt tijdens het spreken.
Laten we eens onder de motorkap kijken. Eerst controleren we of de browser de Web Speech API ondersteunt door te controleren of het webkitSpeechRecognition object bestaat. Als dit niet het geval is, raden we de gebruiker aan zijn browser te upgraden. (Omdat de API nog experimenteel is, wordt deze momenteel door de leverancier voorafgegaan.) Ten slotte maken we het webkitSpeechRecognition -object dat de spraakinterface levert, en stellen we enkele van zijn attributen en gebeurtenishandlers in.
if (!('webkitSpeechRecognition' in window)) {
upgrade();
} else {
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onstart = function() { ... }
recognition.onresult = function(event) { ... }
recognition.onerror = function(event) { ... }
recognition.onend = function() { ... }
...
De standaardwaarde voor continuous is false, wat betekent dat wanneer de gebruiker stopt met praten, de spraakherkenning stopt. Deze modus is ideaal voor eenvoudige tekst, zoals korte invoervelden. In deze demo hebben we dit op true ingesteld, zodat de herkenning doorgaat, zelfs als de gebruiker pauzeert tijdens het spreken.
De standaardwaarde voor interimResults is false, wat betekent dat de enige resultaten die door de herkenner worden geretourneerd definitief zijn en niet zullen veranderen. De demo stelt het in op 'true', zodat we vroege tussentijdse resultaten krijgen die kunnen veranderen. Bekijk de demo goed, de grijze tekst is de tekst die tussentijds is en soms verandert, terwijl de zwarte tekst reacties zijn van de herkenner die als definitief zijn gemarkeerd en niet zullen veranderen.
Om te beginnen klikt de gebruiker op de microfoonknop, waardoor deze code wordt geactiveerd:
function startButton(event) {
...
final_transcript = '';
recognition.lang = select_dialect.value;
recognition.start();
We hebben de gesproken taal voor de spraakherkenner "lang" ingesteld op de BCP-47-waarde die de gebruiker heeft geselecteerd via de keuzelijst, bijvoorbeeld "en-US" voor Engels-Verenigde Staten. Als dit niet is ingesteld, wordt standaard de taal van het hoofdelement en de hiërarchie van het HTML-document gebruikt. Chrome-spraakherkenning ondersteunt talloze talen (zie de tabel ' langs ' in de demobron), evenals enkele van rechts naar links geschreven talen die niet in deze demo zijn opgenomen, zoals he-IL en ar-EG.
Nadat we de taal hebben ingesteld, roepen we recognition.start() aan om de spraakherkenner te activeren. Zodra het begint met het vastleggen van audio, roept het de onstart gebeurtenishandler aan en vervolgens voor elke nieuwe reeks resultaten de onresult gebeurtenishandler.
recognition.onresult = function(event) {
var interim_transcript = '';
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
final_transcript += event.results[i][0].transcript;
} else {
interim_transcript += event.results[i][0].transcript;
}
}
final_transcript = capitalize(final_transcript);
final_span.innerHTML = linebreak(final_transcript);
interim_span.innerHTML = linebreak(interim_transcript);
};
}
Deze handler voegt alle tot nu toe ontvangen resultaten samen in twee tekenreeksen: final_transcript en interim_transcript . De resulterende tekenreeksen kunnen '\n' bevatten, bijvoorbeeld wanneer de gebruiker 'nieuwe paragraaf' uitspreekt. Daarom gebruiken we de linebreak om deze naar HTML-tags <br> of <p> te converteren. Ten slotte worden deze tekenreeksen ingesteld als de innerHTML van hun overeenkomstige <span> -elementen: final_span , opgemaakt met zwarte tekst, en interim_span , opgemaakt met grijze tekst.
interim_transcript is een lokale variabele en wordt elke keer dat deze gebeurtenis wordt aangeroepen volledig opnieuw opgebouwd, omdat het mogelijk is dat alle tussentijdse resultaten zijn gewijzigd sinds de laatste onresult gebeurtenis. We zouden hetzelfde kunnen doen voor final_transcript door simpelweg de for-lus op 0 te starten. Omdat de uiteindelijke tekst echter nooit verandert, hebben we de code hier iets efficiënter gemaakt door final_transcript een globaal te maken, zodat deze gebeurtenis de for-lus kan starten op event.resultIndex en voeg alleen nieuwe definitieve tekst toe.
Dat is het! De rest van de code is er alleen maar om alles er mooi uit te laten zien. Het behoudt de status, toont de gebruiker enkele informatieve berichten en wisselt het GIF-beeld op de microfoonknop tussen de statische microfoon, het mic-slash-beeld en mic-animate met de pulserende rode stip.
De mic-slash-afbeelding wordt weergegeven wanneer recognition.start() wordt aangeroepen en vervolgens vervangen door mic-animate wanneer onstart wordt geactiveerd. Meestal gebeurt dit zo snel dat de schuine streep niet merkbaar is, maar de eerste keer dat spraakherkenning wordt gebruikt, moet Chrome de gebruiker om toestemming vragen om de microfoon te gebruiken, in welk geval onstart alleen wordt geactiveerd als en als de gebruiker toestemming geeft. Pagina's die op HTTPS worden gehost, hoeven niet herhaaldelijk om toestemming te vragen, terwijl op HTTP gehoste pagina's dat wel doen.
Zorg er dus voor dat uw webpagina's tot leven komen door ze in staat te stellen naar uw gebruikers te luisteren!
Wij horen graag uw feedback...
- Voor commentaar op de W3C Web Speech API-specificatie: e-mail , mailingarchief , communitygroep
- Voor opmerkingen over de implementatie van deze specificatie door Chrome: e-mail , mailingarchief
Raadpleeg de Chrome Privacy Whitepaper voor meer informatie over hoe Google omgaat met spraakgegevens uit deze API.