Estoy simulando un lector de pantalla para mi pagina web. Lo que hago es que agrego todos los elementos del DOM dentro de un array y luego cuando el usuario presiona cierta combinación de teclas itero en el array y usando la API de speechSynthesis de html5 genero el audio de acuerdo al texto que tenga dicho elemento.
El problema es que quiero que vaya haciendo focus
en el elemento que estoy "reproduciendo".
El código con el cual genero el array de elementos:
function walkDOM(main) {
var arr = [];
var loop = function(main) {
do {
if(main.hasChildNodes())
loop(main.firstChild);
else if(main.nodeName === "IFRAME"){
var documentIframe = main.contentWindow.document;
loop(documentIframe.getElementsByTagName("body")[0]);
}
else if(main.nodeName !== "#comment") {
arr.push(main);
}
}
while (main = main.nextSibling);
};
loop(main);
return arr;
}
Y con esto me encargo de iterar en el arreglo que obtengo cuando el usuario preciona ctrl
+ space
function PulsarTecla(e) {
var e = e || event;
if(e.ctrlKey && e.keyCode == 32){
allElements = walkDOM(document.body);
console.log(allElements);
for(var i = 0; i < allElements.length; i++){
console.log(allElements[i])
allElements[i].parentNode.focus(); // hago focus en el padre del texto sin embargo no aparece nada en pantalla
habla(allElements[i].textContent);
}
}
}
La función que se encarga de "hablar"
function habla(palabra) {
speech = window.speechSynthesis;
voz = speechSynthesis.getVoices()[3];
utterThis = new SpeechSynthesisUtterance(palabra, voz, 1, 1);
speechSynthesis.speak(utterThis);
}