2019-05-01+Web+Designer+UK

e’veseenmanynewAPIsadded
totheweboverthelastfew
yearsthathavereallyenabled
webcontenttohavethesame
kindoffunctionalityasmanyappshavehadfor
sometime.A relativelynewAPIis theSpeech
RecognitionAPIwhichasyoucanprobablyguess,lets
youuseyourtextasaninputontothepage.It requires
a clicktostarttheserviceandagaintostop.
A greatcaseforthismightbeinallowing
accessibilityamongyourusers,givingvoiceinputas
analternativetoclicking.If youranalyticsshowthat
youhavea lotofmobilebrowsing,thenthinkhow
mucheasierit wouldbetospeakintoyourphone
thanusingthekeyboard.
Therehavebeenpredictionsthatscreen-based
interfacesmightstarttodisappearwithintenyears.
Atfirstthismightsoundlikesciencefiction,butas
usersgetmoreandmorecomfortablewithspeech
asinputthroughthelikesofAlexaandSirithenit
standstoreasonthatthiswillbecomepervasiveas
aninputmethod.Thetutorialherewillgetyouupto
speedonspeechinputandthenusethattoleave
productreviewsona site.

1 .Starttheproject
Fromtheprojectfilesfolder,openthe‘start’folderin
yourcodeIDEandopenthe‘speech.html’filetoedit.
AlltheCSSfortheprojectis writtenasthatisn’tthe
focusofthespeechAPI,soaddthelinkshownhereto
gettheNotoSeriftypefaceandlinkuptheCSSfile.

<linkhref=”https://fonts.googleapis.com/

css?family=Noto+Serif” rel=”stylesheet”>

<linkrel=”stylesheet” href=”css/style.css”>

2 .Addthecontent
Thefirstelementsofthiswillbetohavea wrapperin
whichtoholdallofouron-screencontent.Thefirst
elementin herewillbea hiddenmessagethattellsthe
userif theSpeechAPIis supportedin thebrowser.
Thiswillonlybeseenif it isn’t.Thena headingtellsthe
userthattheformelementsthatfollowwillbeusedfor
theirmessage.

<div id=”wrapper”>

<spanid=”unsupported” class=”support

hidden”>SpeechAPI Not Supported</span>

<h2>Your Message:</h2>

3 .Choosetheresults

WhenusingtheSpeechAPItherearetwowaysto

displaythecontent.Inone,textdisplayswhentheuser

hasstoppedspeakingandthe‘listening’buttonis

clickedoff.Theothershowswordsonscreenas

spoken.Thisfirstradiobuttonallowsforthefinal

speechresulttobeshown.

<div id=”typeOfInput”>

<span>Results:</span>

<label>

<input type=radio name=recognition-type

value=final>Final speech</label>

4 .Radiotwo

Thesecondradiobuttonis addedhereandthisone

allowstheusertoselectthetexttobedisplayedas

W

Press to speak

Astheuserneeds to click a button to start and

stoptheservice, this can be two buttons or a

togglebuttonas in the tutorial.

Tutorials

theyspeak.Theseradio buttons will be picked up by

theJavaScriptlater and used to control the speech

input,butfornowthis allows the user to have an

interfacetocontrol that.

<label>

<input type=radio name=recognition-type

value=interim checked> As you speak</label>

</div>

5 .Displaythe text

Thetextthattheuser speaks into the page will need

tobedisplayedonthe screen. Here the text-area is

addedthathasthe id of ‘transcription’ — this will be

targetedsothatthe user’s speech ends up here.

There’salsoa clear button to remove the text.

<textarea id=”transcription” readonly>

</textarea>

<br/>

<buttonid=”clear-all” class=”button”>Clear

Text</button>

6 .Thelastinterface

Thefinalinterfaceelements are added to the screen

now.Thespeechbutton enables and disables the

speech,soit mustbe clicked before speaking. Clicking

againstopsit. Asthis is a relatively new interaction, the

logunderneathwilltell the users what to do.

<divclass=”button-wrapper”>

<divid=”speechButton” class=”start”></

div>

5

4

tutorial ttttttttttttttttttttttttttttttttttttttttttttttttt 57