CrowlKit - Text to speech

Met de ingebouwde TTS-functie van CrowlKit kan je heel eenvoudig een tekst laten voorlezen door het computersysteem, in elke gewenste taal!

Libraries toevoegen

Zorg dat de volgende libaries zijn toegevoegd aan de head van je document. 

<script src="https://cdn.publihub.media/lib/app.js?v3"></script>
<link rel="stylesheet" href="https://cdn.publihub.media/css/app.css">
<script src="https://cdn.publihub.media/lib/crowl.speak.js"></script>

Een stem toevoegen

Vervolgens voeg je een stem toe aan je pagina. 

<app-speak language="nl-BE" id="stem" text="Hallo, welkom in deze app!" speed="1" gender="female"></app-speak>

Een app-speak-element aanvaardt meerdere parameters:

  • language: nl-BE, nl-NL, fr-FR, en-UK, en-US enz.
  • id: een uniek id voor het element. Dat is noodzakelijk om de stem te kunnen starten, pauzeren of stoppen. Of om andere tekst te kunnen toevoegen. 
  • text: de tekst die moet worden voorgelezen. 
  • speed: De snelheid waarmee het wordt voorgelezen. Dat kan alles tussen 0.1 en ... 10 zijn. Maar eens hoger dan "1" wordt het al aardig snel. 
  • gender: male, female... Maar niet in elke taal zijn alle genders aanwezig. Voor het Vlaamse (nl-BE) is enkel een vrouwelijke stem beschikbaar in Google Chrome. 

Starten, pauzeren, stoppen

Enkel in Firefox kan je de stem automatisch laten starten. In browsers zoals Chrome en Safari, heb je een speficieke gebruikersinteractie (zoals een klik op een knop) nodig.  

    app.ready(function(){ 
        id("stem").after("ready").do(function(){
            id("stem").after("starttalking").send({});
        });
    });

In andere browsers moet je dus een knop voorzien om de stem te kunnen starten: 

<button id="startTalking">Spreek!</button>
<button id="pauseTalking">Pauzeer</button>
<button id="stopTalking">Stop</button>

Vervolgens voeg je deze code toe:

app.ready(function(){
        id("startTalking").after("click").do(function(){
            id("stem").after("starttalking").send({});
        });
        
        id("pauseTalking").after("click").do(function(){
            id("stem").after("pausetalking").send({});
        });

        id("stopTalking").after("click").do(function(){
            id("stem").after("stoptalking").send({});
        });
});

Attributen wijzigen

Je kan ook makkelijk de attributen wijzigen. Stel dat je de tekst wil wijzigen, dan kan je bijvoorbeeld de inhoud van een bepaald element op de pagina opvragen en doorgeven aan de "stem". 

<app-part id="voorlezen">Deze tekst wil ik laten voorlezen.</app-part>
<button id="nieuwetekst">Voorlezen</button>

Vervolgens voeg je een stuk KitCode toe om de tekst door te geven aan de stem. 

id("nieuwetekst").after("click").do(function(){
   var voorleestekst = id("voorlezen").innerText;
   id("stem").changeFeature("text", voorleestekst);
   id("stem").after("starttalking").send({});
});
Open de demo:  https://cdn.publihub.media/demos/app/speak.html
Of bekijk de demo-code:  https://cdn.publihub.media/viewsource/?url=https://cdn.publihub.media/demos/app/speak.html
Volgende pagina