WORKSHOP hoe voeg ik spraak toe aan mijn webpagina?

Een webpagina de tekst laten voorlezen via spraaksynthese, kan ruwweg gesproken op twee manieren:

door de tekst van de webpagina, zoals je die leest, via het klembord of een hulpprogramma te laten voorlezen;dat kan via het contextmenu (zie workshop 2 Powertoy ) of met Deskbot, waarbij je de tekst via Ctrl+A en Ctrl+C laat voorlezen.
door zelf tekst toe te voegen aan de code van de pagina; deze tekst kun je zelf geheel bepalen, d.w.z. dat je ook commentaar , toelichtingen of vragen naar aanleiding van de pagina kunt laten horen, maar natuurlijk ook gewoon de leesbare tekst van de pagina. De leesbare tekst en de gesproken tekst van de pagina staan dus los van elkaar. Een bijkomend voordeel is dat de tekst altijd voorgelezen wordt als iemand de pagina opent met de juiste ondersteunende software.

We gaan hier verder in op de tweede optie, het zelf toevoegen van tekst.

Je kunt dit op veel verschillende manieren doen, maar ik ga er twee verschillende behandelen. De eerste verloopt via TRSpeaker, de tweede is de htm versie van Ms Agent, die ik ook al enigszins in de powerpoint workshop Pratende Presentatie aan de orde kwam. We gaan daarbij coderen met de wysiwyg (wat je ziet krijg je) editor MASS, dat een freeware versie is van het geweldige MASH.

Het voordeel van de eerste, TRSpeaker, is, dat je via een klein ActiveX component spraak kunt laten horen, als je tenminste al een Nederlandse spraakmachine (kies bij "select a language" dutch) en het MS Speech API: Download the Microsoft SAPI 4.0a runtime binaries (824 KB exe) al hebt. Dit ActiveX component is een kleine software toevoeging aan je Internet Explorer. (Trspeaker is trouwens freeware; alleen als je support wilt, moet je je registreren.)

Een tweede voordeel is, dat je geen afleidende animaties hebt van Peedy etc. (je kunt dit trouwens ook anders oplossen door een minimalistische agent te kiezen zoals de punt , cursor of het oog , plaats het *.acs bestand in je windows/msagent/chars map).

Het laatste en belangrijkste voordeel van TrSpeaker is dat je links bovenin de pagina een bedieningselement krijgt waarmee je stem (dus ook verschillende talen), stemsnelheid en stemhoogte kunt kiezen; het kleine icoontje bij de muispijl:

Je opent het door er links op te klikken en je krijgt deze Speechtab te zien:

Maar laten we het eerst maar eens downloaden en installeren op je pc door erop na download te dubbelklikken. Je vindt daarna nergens een starticoon; dit wordt pas geactiveerd door een pagina met de juiste code. Wel kun je via start-programma's-textreader programs-tsreader- settings de instellingen van je aciveX component aanpassen (speechtabblad).

Hoe je zo'n pagina maakt gaan we zo leren. Maar eerst even uitproberen op ie het doet; klik op deze link en luister of je spraak hoort; probeer ook het bedieningselement even uit.

Alles doet het ? Zo niet, heb je óf het geluid van je pc niet aan óf je moet wat van de bovengenoemde software alsnog installeren.

Code toevoegen aan een html- of webpagina

In de workshop Mp3space show liet ik al zien hoe je in Kladblok of met Metapad de html-code aan kunt passen (Kijk daar nog even als je het niet meer weet).

We moeten een code toevoegen om het ActiveX component te activeren en het bedieningselement zichtbaar te maken:

Selecteer deze regel met klik en sleep; met Crtl+C op het klembord zetten en nu moeten we het op de goede plek plakken; let op de pijl:

Het moet op de eerste regel na de body tag, <body> , komen. Je zet de cursor op de goede plek , klikt en plakt met Crtl+V.

Vervolgens voegen we de tekst toe; het is deze zeer eenvoudige code:

Als je dit zou toevoegen, hoor je:'Hello world'. Je kopieert dan het bovenstaand stukje code op de eerste regel onder de object tag.

Dat is nogal weinig tekst ; we willen wel meer horen. Stel je hebt een pagina zoals de Deskundologie pagina en wilt die laten voorlezen. Eerst kopieer je de tekst via Crtl+A (alles selecteren) en Crtl+V naar een tekst bestand (.txt). Verwijder alle aanhalingstekens uit de tekst ("), want anders werkt het niet.

We moeten nu de tekst zo bewerken, dat alles op één regel komt te staan.

We verwijderen eerst de automatische terugloop (terugloop in optie menu wegvinken) in het teksteditor programma, bij voorkeur Metapad.

Vervolgens selecteren we alle tekst met Crtl+A en gaan de terugloop, die al of nog in de tekst verwerkt zit, verwijderen met Bewerken, Blok, Terugloop verwijderen (dit kan Kladblok niet).

Je hebt nu nog maar een paar regels over en daar maak je één van door alle spaties en enters te verwijderen. Let er wel op dat je na het verwijderen van de nieuwe regel code eventueel een nieuwe spatie toevoegt. Voeg flink wat komma's toe voor rustpauzes tijdens het voorlezen. De éne lange regel plak je nu in plaats van Hello world tussen de aanhalingstekens en je slaat de pagina op. Als je alles goed gedaan hebt wordt de tekst nu voorgelezen.

Op de volgende pagina gaan we met Mass een webpagina maken met een Ms Agent Character.

home site overzicht