Papegøye
Får nettleseren til å svare deg med litt javascript
Få nettleseren til å svare deg
Med noen enkle linjer med JavaScript skal vi få nettleseren til å gjenta det vi sier, til og med få vite hvor mye klokka er.
Hvis du er som meg så er du kanskje litt nysgjerrig på hva som er mulig å få til uten at man nødvendigvis har brukt for det. Det bærer arbeidsbenken på hobbyrommet mitt preg av. Utallige proof of concepts har blitt teste ut og aldri blitt noe mer av.
For noen dager siden snublet jeg tilfeldigvis over SpeechRecognition i JavaScript. Så nå har jeg forlatt hobbyrommet og benket meg ned foran datamaskinen for å lage en aldri så liten papegøye som hermer etter det som blir sagt.
Nå skal jeg være helt ærlig å si at jeg aldri har hatt behov for å lage en nettside som man kan snakke til. Men hvem vet, kanskje jeg kan få det i fremtiden. Men det er jo også utrolig gøy å kunne lage ulike svar man kan få tilbake når man stiller et spørsmål. Kanskje jeg sitter nå å lager Sara, den ukjente søsteren til Siri? Tvilsomt.
Siden vi skal skrive relativt enkelt JavaScript så passer dette innlegget godt for nybegynnere i JavaScript. Så jeg skal prøve å ta dette stegvis og forkortet. Hele koden kan lastes ned fra GitHub https://github.com/sjsd/parrot
Den ferdige koden vil ta opp lyd etter at man har trykket på knappen. Når man slutter å snakke så vil den automatisk detektere dette og vise det man har sagt som tekst på skjermen.
Steg 1 - index.html
Først trenger vi en HTML-fil som skal inneholde en knapp og et element som skal vise tekst. Jeg dykker ikke mer i dybden enn som så.
<!DOCTYPE html>
<html lang="no">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Papegøye</title>
</head>
<body>
<button class="talk">Snakk til meg</button>
<div class="content"></div>
<script src="app.js"></script>
</body>
</html>Legg merke til at vi har en script-tag som henter inn en JavaScript-fil som heter app.js.
Steg 2 - app.js
Ikke overraskende så trenger vi også en JavaScript-fil som heter app.js. Denne kan enn så lenge være tom. Resten av koden vil foregå i denne filen.
Steg 3 - tildele noen elementer
Vi tildeler de to DOM-elementene til hver sin variabel. Dette gjør det enklere for oss senere å gjøre noe med dem.
const btn = document.querySelector('.talk');
const content = document.querySelector('.content');Vi trenger også å tilegne oss to variabler for SpeechRecognition.
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
Det er kanskje nå jeg burde nevne at ikke alle nettlesere støtter SpeechRecognition. I skrivende stund er det Chrome som har best støtte.
Steg 4 - undøvendig
Dette steget er egentlig undøvendig pr. nå, men det er kjekt å se når SpeechRecognition er aktivt. Derfor har vi det med. Så vi lager to nye funksjoner.
Denne skriver ut en melding i konsollet når SpeechRecognition er aktivert. Tar du forøvrig referansen?
recognition.onstart = () => {
console.log('Voice is activated, As I rock, rock, rock, rock, rock the microphone');
};Denne skriver ut en melding i konsollet når SpeechRecognition er ferdig.
recognition.onspeechend = () => {
console.log('Carry on with the freestyler');
};Inne i disse to funksjonene kan man også legge til kode for å gjøre visuelle endringer i nettleseren. F.eks. en indikasjon på at nå kan man snakker. Så de er ikke helt undøvendige, men i dette eksempelet bruker jeg de ikke til noe spesielt.
Steg 5 - trykk på knapp
Når man trykker på knappen så ønsker man å starte opptaket av stemmen. Denne avsluttes automatisk etter en kort stund med stillhet.
btn.addEventListener('click', () => {
recognition.start();
});Steg 6 - vis resultatet
Når opptaket er ferdig så får man tilgjengelig en event og et av feltene er i ren tekst. Denne teksten skal vi vise på skjermen.
recognition.onresult = (event) => {
const current = event.resultIndex;
const transcript = event.results[current][0].transcript;
content.textContent = transcript;
}Nå er vi i grunn ferdig. Men vi har jo lyst til å leke litt med enda et API i nettleseren som gjør at den snakker til oss også. Så vi lager enda en funksjon.
Steg 7 - papegøyen
Her bruker vi SpeechSynthesisUtterance Denne kan svare oss på ulike språk (ikke oversette). Legg merke til at vi i HTML-fila på HTML-tagen har en attributt lang="no". no for norsk. Det gjør at vi kan gi SpeechSynthesisUtterance norsk tekst og skal svare med norsk stemme.
parrot = (message) => {
const speech = new SpeechSynthesisUtterance();
speech.volume = 1;
speech.rate = 0.9;
speech.pitch = 1;
speech.text = message;
window.speechSynthesis.speak(speech);
}Vi må tilbake til steg 6 og legge til parrot(transcript); slik:
recognition.onresult = (event) => {
const current = event.resultIndex;
const transcript = event.results[current][0].transcript;
content.textContent = transcript;
parrot(transcript);
}Nå er det bare å skru opp lyden og snakke i vei!
Steg 8 - vent nå litt ...
Vent nå litt, nevnte vi ikke at den skulle svare med klokkeslett? Joda, vi gjør følgende endringer i funksjonen for papegøyen vår.
Vi legger til en if for å sjekke om teksten som papegøyen ( parrot() ) får inneholder ordet klokka.
if (message.includes('klokka')) {
var time = new Date();
var h = time.getHours();
var m = time.getMinutes();
speech.text = 'Klokka er ' + h + ':' + m;
content.textContent = speech.text;
}Da blir hele parrot() -funksjonen slik:
parrot = (message) => {
const speech = new SpeechSynthesisUtterance();
speech.volume = 1;
speech.rate = 0.9;
speech.pitch = 1;
speech.text = message;
if (message.includes('klokka')) {
var time = new Date();
var h = time.getHours();
var m = time.getMinutes();
speech.text = 'Klokka er ' + h + ':' + m;
content.textContent = speech.text;
}
window.speechSynthesis.speak(speech);
}
Hele mitt eksemple og hele min kode har jeg lagt ut på GitHub https://github.com/sjsd/parrot
Icons made by Freepik from www.flaticon.com.