Hallo
Ik heb een kleine webpagina.
De bedoeling is dat ze klikken op een link en dan een stuk tekst horen (via responsivevoice).
Ik wil het onmogelijk maken om terwijl de tekst uitgesproken wordt nog eens te klikken. Daardoor worden zinnen door elkaar uitgesproken.
Ik dacht aan stopPropagation... maar zie niet hoe ik dat er in moet brengen.
Hier een klein voorbeeldje:
Ik heb een kleine webpagina.
De bedoeling is dat ze klikken op een link en dan een stuk tekst horen (via responsivevoice).
Ik wil het onmogelijk maken om terwijl de tekst uitgesproken wordt nog eens te klikken. Daardoor worden zinnen door elkaar uitgesproken.
Ik dacht aan stopPropagation... maar zie niet hoe ik dat er in moet brengen.
Hier een klein voorbeeldje:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MenuView</title>
<script src="https://code.responsivevoice.org/responsivevoice.js"></script>
<script type="text/javascript">
function klok()
{
responsiveVoice.cancel();
var stuktekst1 = "dit is het begin";
var stuktekst2 = "en dan het middelste stukje tekst";
var stuktekst3 = "en hier is het laatste stukje tekst";
var pause1 = 100;
var pause2 = pause1+stuktekst1.length*60;
var pause3 = pause2+stuktekst2.length*60;
setTimeout(function(){ responsiveVoice.cancel(); responsiveVoice.speak(stuktekst1,'Dutch Female', {onstart: StartCallback, onend: EndCallback}); }, pause1);
setTimeout(function(){ responsiveVoice.cancel(); responsiveVoice.speak(stuktekst2,'Dutch Female', {onstart: StartCallback, onend: EndCallback}); }, pause2);
setTimeout(function(){ responsiveVoice.cancel(); responsiveVoice.speak(stuktekst3,'Dutch Female', {onstart: StartCallback, onend: EndCallback2}); }, pause3);
}
</script>
</head>
<body oncontextmenu="return false;">
<table>
<tr class="test">
<td>
<div style="text-align: center;" class="STOP" onmousedown="klok()">testje</div>
</td>
</tr>
</table>
<div id="INFO" style="border:1px solid #0d0;"></div>
<script>
function StartCallback() {
console.log("Voice started");
color = "red";
document.body.style.background = color;
}
function EndCallback() {
console.log("Voice ended");
color = "black";
document.body.style.background = color;
}
function EndCallback2() {
console.log("Voice ended");
color = "white";
document.body.style.background = color;
}
</script>
</body>
</html>
Laatst bewerkt: