Styr din hemsida med rösten
Jag tycket att -webkit-speech verkade intressant och beslutade mig för hacka ihop ett plugin till jQuery och Wordpress. Tekniken är fortfarande i sin linda så detta plugin ska i första hand ses som ett "proof of concept".
Detta plugin gör det möjligt för människor med handikapp, som försvårar användande av tangentbord och mus, att navigera och scrolla på din hemsida genom att prata med webbläsaren.
Observera!
Tekniken som används i detta plugin stöds än så länge bara av Google Chrome. Man kan dessutom inte starta ljudupptagningen utan att klicka på en ikon. Men så fort det finns stöd för att anropa startSpeechInput så kommer man kunna göra detta plugin mer användbart.
Hur fungerar det?
Efter att du installerat koden kommer det att synas en dialogruta uppe till vänster på din hemsida med en ikon föreställandes en mikrofon. Klicka på ikonen för att starta ljudupptagningen (observera att detta bara stöds av Google Chrome i dagsläget). Därefter säger du något av följande:
- “scroll down”
- “scroll up”
- “scroll” – Anropar det senaste scroll-kommandot du sagt.
- “link X” – Bredvid varje länk på din sida kommer det visas en siffra. För att öppna en länk behöver du bara säga “link” och sedan siffran.
Installation i wordpress
Ladda hem den senaste versionen på github. Lägg mappen i plugin-mappen för din installation av wordpress, sen är det bara att installera det som ett vanligt plugin.
Skräddarsydd installation
Nedan ser du ett kodexempel på hur du kan använda koden trots att du inte använder wordpress. Det här exemplet kräver att du har vissa förkunskaper om html och javascript.
<script src="jquery.js"></script>
<script src="jquery.speechinterface.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('body').speechInterface({
debugMode : 2,
scrollLength : jQuery(window).height() * 0.4,
});
});
</script>
Möjlig konfiguration
- debugMode (int) – Antingen 0,1 eller 2
- scrollLength (int) – Hur mycket du vill att hemsidan ska scroll varje gång scroll-kommandot anropas.
- posX (int) – Var dialogrutan ska vara placerad på x-axeln i webbläsarfönstret
- posY (int) – Var dialogrutan ska vara placerad på y-axeln i webbläsarfönstret
- notSupportedMessage – Meddelandet du vill ska visas när webbläsaren inte stödjer -webkit-speech
Koden kan självklart laddas ner på jQuery eller forkas på github