stopPropagation gebruiken met text to speech

Status
Niet open voor verdere reacties.
Ik merk nu bij de gebruikers dat het goed zou zijn als er op de plaats van een komma in de voorgelezen tekst er best een korte pauze komt. Lange zinnen gaan te vlug en zelf op de pauzeknop drukken is dikwijls een probleem. De pauzes zouden automatisch moeten komen.
Dus:
Code:
 var pause1 = 100;
                setTimeout(function () { responsiveVoice.speak(stuktekst1, 'Dutch Female'); document.getElementById("stuk1").innerHTML = stuktekst1; }, pause1);
Dit zou in de externe script moeten maar ik zie niet goed waar en hoe...
Of is het beter om met responsiveVoice.pause() en responsiveVoice.resume() te werken samen met het zoeken van de komma in een string?
 
Laatst bewerkt:
Het deel waar het 'menu van de dag' wordt voorgelezen, gebruikt via ajax de volgende tekst:

zondag 4 december 2016; witloofsoep; genste waterzooi; boontjes aardappelnootjes; en als dessert is er dame blanche.
maandag 5 december 2016; wortelsoep; spaghetti bolognaise,; en als dessert is er fruit.
dinsdag 6 december 2016; minestrone; groentenpannetje; met kalkoen rijst; en als dessert is er yoghurt met fruit.
De totale tekst bevat iedere keer het menu van 1 maand.
Nu zoek ik naar een manier om telkens 1 dag te tonen waarbij de onderdelen die in de tekst door een komma gescheiden zijn in een apart vakje worden getoond. Zo kunnen ze dit volgens hun eigen tempo aanklikken en op het einde naar de volgende dag gaan.
Ik dacht hierbij aan onderstaande code:
Code:
// ajax-gedeelte
// stuur elke zin naar een tag met een unieke id (zin1, zin2, zin3, enz.)
function fnHandleText(FileText) {
    var TextArray = FileText.split(".");
    for (var i = 0; i < TextArray.length; i++) {
        document.getElementById("zin" + (i + 1)).innerHTML = TextArray[i];
    }
  }
// ajax get tekst file in de html in een script tag:... var TextFileName...
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        fnHandleText(this.responseText);
    }
};
xhttp.open("GET", TextFileName, true);
xhttp.send();
Veranderen in iets als:
Code:
function fnHandleText(FileText) {
    var TextArray = FileText.split(".");
    for (var i = 0; i < TextArray.length; i++) {
        var TextArrayZin = TextArray.split(";");
        for (var j = 0; j < TextArrayZin.length; j++) {
            document.getElementById("zin" + (j + 1)).innerHTML = TextArrayZin[j];
        }
    }
  }
// ajax get tekst file in de html in een script tag:... var TextFileName...
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        fnHandleText(this.responseText);
    }
};
xhttp.open("GET", TextFileName, true);
xhttp.send();
Dus eerst de zinnen opsplitsen en daarbinnen dan de zinsdelen. Maar ik ben hier blijkbaar niet goed bezig....
 
Laatst bewerkt:
Lange zinnen gaan te vlug
var parameters = { pitch: 1, rate: .7, volume: 1, onend: voiceEndCallback };

Is dit iets, afgezien van langere pauzes tussen tekstdelen.
 
nee, heb ik geprobeerd. Tot 0.8 kan je gaan, verder naar beneden begint ze echt te zagen :d
ondertussen wat verder gezocht met de bedoeling de array van de zinnen van het menu op te splitsen in zinsdelen. (zoals hiervoor al geprobeerd.
Hieronder nog eens... In de console zie ik dat het goed gaat maar het deel met document.getElementById loopt fout. Ik krijg enkel de laatste dag met bijhorend menu en dan nog een deeltje van een andere dag. Vreemd...

Code:
// ajax-gedeelte
// stuur elke zin naar een tag met een unieke id (zin1, zin2, zin3, enz.)
function fnHandleText(FileText) {
    var TextArray = FileText.split(".");
    for (var i = 0; i < TextArray.length; i++) {
        var Zin = (TextArray[i]);//***
        console.log(Zin);//***
     
        var ZinArray = Zin.split(",");
        for (var j = 0; j < ZinArray.length; j++) {
            document.getElementById("zin" + (j + 1)).innerHTML = ZinArray[j];
            console.log(ZinArray[j]);//***
            console.log(ZinArray.length);//***
            console.log(j);//***
        }
    }
}

// ajax get tekst file in de html in een script tag:... var TextFileName...
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        fnHandleText(this.responseText);
    }
};
xhttp.open("GET", TextFileName, true);
xhttp.send();
 
Als je deze functie iets aanpast (een replace erbij) dan wordt het zinnen bestand bij elke "return" afgebroken in plaats van bij een punt. Je mag dan het | teken niet in zinnen gebruiken maar dat is niet erg denk ik. Je mag de punt dan midden in een zin gebruiken.
Code:
function fnHandleText(FileText) {
  var TextArray = FileText.replace(/(\r\n|\n|\r)/gm, "|").split("|");
  for (var i = 0; i < TextArray.length; i++) {
    document.getElementById("zin"+(i+1)).innerHTML = TextArray[i];
  }
}
Ik kom er net achter dat zinnen zo te zien niet langer dan 100 tekens mogen zijn :( Heb je dit ook ondervonden?
Dit werkt wel (langere zinnen worden ingekort)

Zondag 4 december. witlofsoep. Gentse waterzooi. Boontjes. Aardappelnootjes. Dessert is dame blanche
Maandag 5 december. Wortelsoep. Spaghetti bolognaise. Dessert is fruit
Dinsdag 6 december. Minestrone. Groentenpannetje, kalkoen en rijst. Dessert is yoghurt met fruit
 
Laatst bewerkt:
Ik heb nog naar het opsplitsen in tekstdelen gekeken, maar dat had ergens lang geleden ingebouwd moeten worden denk ik. Een for loop die de tekstdelen afhandelt werkt niet omdat responsiveVoice.speak(...) met callback's werkt. Je vraagt dus om een zin uit te spreken en terug te bellen als die daarmee klaar is. In de tussentijd wordt met een sneltreinvaart de for loop doorlopen. De for loop is dus allang klaar voordat er een letter is uitgesproken. Soms is het erg lastig om achteraf functionaliteit in te bouwen die vooraf niet is voorzien.
 
bron, ik bekijk het replace-voorstel straks.
Langer dan 100 tekens kan wel maar dan hoor je een hapering. Kwestie van daar rekening mee te houden met pauzes en zo.
Mijn gebruikers houden trouwens niet zo van lange volzinnen...
Wat je zegt ivm die callback's klinkt heel logisch. Dat kan het inderdaad zijn. De loops zijn te vlug voor de stem. Maar dat is net wat we allemaal reeds jaren doen met die forse rekenkracht van onze computers: gebruiksvriendelijk maken en dus vertragen, structureren en vereenvoudigen. Ik vrees dat er hier ook een handrem moet ingebouwd worden.
Maar toch is het zo dat die tekst eerst gepresenteerd wordt op het scherm en pas wordt uitgesproken bij een klik op de w3.tag, dus slechts een deeltje van een zin...
 
Juist door de vele events en callback's lijkt/is de computer multitasking. In het script zie je naast de gewone scriptflow ook events (bijvoorbeeld de mouse click) en callbacks (bijvoorbeeld speak die zegt "ik ben klaar met praten"). Timers voor spraak vertraging op bepaalde plakken gaan niet goed werken. Bij de vraag die je stelde moet er gebruik gemaakt gaan worden van de callbacks die speak biedt. Je laatste vraag had vanaf het begin in het script meegenomen moeten worden. Nu is het lastig om alles om te bouwen.
 
bron, In ieder geval werkt het script zonder die extra for lus in de bestaande for lus perfect. Dat systeem zal ik zeker blijven gebruiken voor de meeste teksten. Nogmaals bedankt om me zo ver te helpen.
Wat ik nu probeer te bekomen met de verdere opsplitsing van de zinnen (pauzes even buiten beschouwing gelaten) is bedoeld voor gebruikers die moeite hebben met volzinnen.
Als ik
Code:
  responsiveVoice.speak(this.innerHTML, 'Dutch Female', parameters);
'uitschakel' in het script gaat het dus niet werken met tts maar blijf ik toch dezelfde problemen hebben al hoger beschreven.
Als ik in de tekst alle punten door komma's vervang en splits op basis van komma's met 1 for lus krijg ik alle woorden onder elkaar en werkt het wel terwijl de snelheid even hoog of misschien hoger is?
En ja, Dat van die pauzes en zo had ik beter op voorhand vermeld maar ik ontdek de mogelijkheden door er stap voor stap mee bezig te zijn. Tts is voor mij nieuw en het gebruik op deze manier met onze gebruikers is helemaal onontgonnen terrein maar lijkt veelbelovend.
 
Jij bedankt voor het onder de aandacht brengen van een speech script. In verband met ander werk lukt het mij niet om een nieuw script te maken. Je bent in ieder geval een stuk verder gekomen.
Suc6 met toekomstige aanpassingen voor je doelgroep.
 
bron, ik heb ondertussen een oplossing gevonden door de teksten op voorhand op te splitsen op basis van de datum en daarna in kleine pakketjes door het spraaksysteem te jagen. Tot later en nog eens bedankt.
 
accent letters: é, ê, è en ë worden afgebeeld als vraagteken in een zwarte diamant. De font veranderen helpt niet. Hoe kan ik dit oplossen?
 
Maak bijvoorbeeld in Notepad++ een bestand met UTF-8 codering.
In dit bestand begin je de html met
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
en dan de rest va je html...
 
Ja dat heb ik bij iedere html pagina staan.
Dan heb ik ook:
HTML:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
en een beetje verder:
HTML:
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Kan dit een invloed hebben?
 
Gebruik de volgende template als basis voor een html5 pagina met W3css
Code:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>De titel van de pagina max 70 tekens</title>
<meta name="description" content="De omschrijving van de pagina max 150 tekens">
<base href="http://www.domein.nl/">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
<link rel="stylesheet" href="style.css">
</head>
<body class=".....">
  Hier komt het zichtbare deel van je pagina
</body>
</html>
De regel met href="style.css" is nodig als je eigen css wilt toevoegen.
Verander domein.nl in jouw eigen domeinnaam.
Vul bij de class van body een class in als je die gebruikt.

Tip: google bij elke regel even wat het is en wat het doet.

Suc6. Have fun.
 
Beste bron...
Bedankt voor je informatie. Ik bekijk het eens. Ondertussen (na een paar uurtjes zoeken) de oplossing gevonden. Mijn txt-files waren in ANSI gecodeerd. Ik heb ze allemaal in UTF-8 omgezet en het probleem was opgelost. Het probleem zat dus bij de '...bron...' :D

Als ik mijn html files in html-tidy zet wordt de
HTML:
<meta charset="utf-8">
lijn bovenaan verwijderd.
En bij http://validator.w3.org/ krijg ik onderstaande te zien:
" Byte-Order Mark found in UTF-8 File.
The Unicode Byte-Order Mark (BOM) in UTF-8 encoded files is known to cause problems for some text editors and older browsers. You may want to consider avoiding its use until it is better supported. "
als ik de codering met kladblok verander heb ik enkel utf-8 als keuze en niet de utf-8 zonder BOM...
 
Ik vermoed dat je een html-tidy voor html4 of xhtml gebruikt in plaats van html5.
Zet in een html-tidy de opties xhtml en xml uit. Of gebruik liever helemaal geen html-tidy!!

Byte-Order Mark:
Je hebt nu utf-8-BOM codering. Dit moet utf-8 worden.
 
Een tijdje geleden dat ik hier geweest ben. Ondertussen heel wat verder met deze module. Een vervelend probleem waar ik nog mee zit is het volgende:
De spraak op windows machines en android platform loopt iets te vlug voor mijn doelgroep dus vertraag ik die door de rate op 0.8 te zetten. Dit werkt goed. Maar op iPhone of iPad klinkt de stem trager. De stem begint wat te zagen. Daarom probeer ik te kijken met welk toestel er gewerkt wordt en afhankelijk van het toestel wordt de spreeksnelheid dan aangepast.
Volgende code:
Code:
var parameters = { pitch: 1, rate: 0.8, volume: 1, onend: voiceEndCallback };

zet ik dan in onderstaande:

Code:
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
   
    if (/windows phone/i.test(userAgent)) {
       
        var parameters = { pitch: 1, rate: 1, volume: 1, onend: voiceEndCallback };
    }

    if (/android/i.test(userAgent)) {
       
        var parameters = { pitch: 1, rate: 0.8, volume: 1, onend: voiceEndCallback };
    }
   
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
      
        var parameters = { pitch: 1, rate: 1, volume: 1, onend: voiceEndCallback };
    }
       
    var parameters = { pitch: 1, rate: 0.8, volume: 1, onend: voiceEndCallback };

Maar dit lijkt niet te werken.
Iemand een tip?
 
Bij mij kan ik het niet testen maar misschien kan je met dit verder
Code:
// user agent
var ua = navigator.userAgent || navigator.vendor || window.opera;
// default: windows android
var parameters = { pitch: 1, rate: 0.8, volume: 1, onend: voiceEndCallback };
// windows phone
if (/windows phone/i.test(ua)) {
   parameters = { pitch: 1, rate: 0.8, volume: 1, onend: voiceEndCallback };
}
// iPad iPhone iPod && not MSStream
else if (/iPad|iPhone|iPod/.test(ua) && !window.MSStream) {
   parameters = { pitch: 1, rate: 1, volume: 1, onend: voiceEndCallback };
}
Suc6. Have fun.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan