De nieuwe JavaScript Web Speech API maakt het eenvoudig om spraakherkenning aan uw webpagina's toe te voegen. Deze API biedt nauwkeurige controle en flexibiliteit over de spraakherkenningsmogelijkheden in Chrome versie 25 en later. Hier is een voorbeeld waarbij de herkende tekst bijna direct verschijnt tijdens het spreken.
Laten we eens onder de motorkap kijken. Eerst controleren we of de browser de Web Speech API ondersteunt door te kijken of het object webkitSpeechRecognition bestaat. Zo niet, dan raden we de gebruiker aan zijn browser te upgraden. (Omdat de API nog experimenteel is, heeft deze momenteel een vendor-prefix.) Ten slotte maken we het object webkitSpeechRecognition aan, dat de spraakinterface levert, en stellen we enkele van de attributen en gebeurtenisafhandelaars 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 spraakherkenning stopt zodra de gebruiker stopt met spreken. Deze modus is ideaal voor eenvoudige tekst, zoals korte invoervelden. In deze demo hebben we de waarde ingesteld op 'true', zodat de herkenning doorgaat, zelfs als de gebruiker een pauze inlast tijdens het spreken.
De standaardwaarde voor interimResults is false, wat betekent dat de resultaten die de herkenner retourneert, definitief zijn en niet zullen veranderen. In de demo wordt deze waarde op true gezet, zodat we vroege, tussentijdse resultaten krijgen die mogelijk nog kunnen veranderen. Bekijk de demo aandachtig: de grijze tekst is de tekst die tussentijds is en soms verandert, terwijl de zwarte tekst de reacties van de herkenner zijn 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 stellen de gesproken taal voor de spraakherkenner "lang" in 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 root-element en de hiërarchie van het HTML-document gebruikt. De spraakherkenning van Chrome ondersteunt tal van talen (zie de tabel " langs " in de demo-broncode), evenals enkele talen die van rechts naar links worden gelezen en die niet in deze demo zijn opgenomen, zoals he-IL en ar-EG.
Nadat de taal is ingesteld, roepen we recognition.start() aan om de spraakherkenner te activeren. Zodra deze begint met het vastleggen van audio, roept hij de onstart -gebeurtenishandler aan en vervolgens, voor elke nieuwe set resultaten, roept hij de onresult -gebeurtenishandler aan.
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 tot twee strings: final_transcript en interim_transcript . De resulterende strings kunnen "\n" bevatten, bijvoorbeeld wanneer de gebruiker "nieuwe alinea" zegt. Daarom gebruiken we de linebreak functie om deze om te zetten naar HTML-tags <br> of <p> . Ten slotte worden deze strings ingesteld als de innerHTML van de bijbehorende <span> -elementen: final_span , die wordt opgemaakt met zwarte tekst, en interim_span , die wordt opgemaakt met grijze tekst.
interim_transcript is een lokale variabele en wordt volledig opnieuw opgebouwd telkens wanneer deze gebeurtenis wordt aangeroepen, omdat het mogelijk is dat alle tussentijdse resultaten zijn gewijzigd sinds de laatste onresult gebeurtenis. We zouden hetzelfde kunnen doen voor final_transcript door de `for`-lus simpelweg bij 0 te laten beginnen. Omdat de uiteindelijke tekst echter nooit verandert, hebben we de code hier iets efficiënter gemaakt door final_transcript globaal te maken, zodat deze gebeurtenis de `for`-lus kan laten beginnen bij event.resultIndex en alleen nieuwe uiteindelijke tekst hoeft toe te voegen.
Dat is alles! De rest van de code is er alleen maar om het er mooi uit te laten zien. Het houdt de status bij, toont de gebruiker een aantal informatieve berichten en wisselt de GIF-afbeelding op de microfoonknop tussen de statische microfoon, de afbeelding met een schuine streep en de animatie met de pulserende rode stip.
De afbeelding van de microfoon met een schuine streep wordt weergegeven wanneer recognition.start() wordt aangeroepen en vervolgens vervangen door een animatie van de microfoon wanneer onstart wordt geactiveerd. Normaal gesproken gebeurt dit zo snel dat de schuine streep niet opvalt, maar de eerste keer dat spraakherkenning wordt gebruikt, moet Chrome de gebruiker om toestemming vragen voor het gebruik van de microfoon. In dat geval wordt onstart alleen geactiveerd als de gebruiker toestemming geeft. Pagina's die via HTTPS worden gehost, hoeven niet herhaaldelijk om toestemming te vragen, in tegenstelling tot pagina's die via HTTP worden gehost.
Breng uw webpagina's tot leven door ze te laten luisteren naar uw gebruikers!
We horen graag uw feedback...
- Voor opmerkingen over de W3C Web Speech API-specificatie: e-mail , mailingarchief , communitygroep
- Voor opmerkingen over de implementatie van deze specificatie door Chrome: e-mail , e-mailarchief
Raadpleeg Privacy in Chrome begrijpen voor ons privacybeleid (bijgewerkt: 16 juni 2026).