Estoy tratando de crear un sitio web que raspe un sitio web de noticias y lo lea. Por alguna razón, cada vez que trato de leer la información real del artículo, lee parte de él y se detiene después de unos segundos.
importante señalar:
Mi función:
export async function textToSpeech(text) { new Promise((resolve) => { let msg = new SpeechSynthesisUtterance(); msg.voice = voices[6]; msg.lang = "en"; msg.text = text; speechSynthesis.speak(msg); msg.addEventListener("end", () => { resolve(); }); }); }llamando a la función:
ReadNews(data) { textToSpeech(data.Title) .then(textToSpeech(data.Info)) .then(textToSpeech("Would You like me to continue?")) .then( ContinueCON.addEventListener("click", () => { textToSpeech(data.Content); }) ); };Las primeras 3 instancias (data.title, data.info y el mensaje predeterminado) se pronuncian como se esperaba. Pero en la cuarta instancia, se detiene después de unos segundos.
He intentado varias cosas: usé window.speechSynthesis.speaking justo después de que el sonido dejó de funcionar, y se imprimió como verdadero (lo cual es muy extraño)
Primera edición (aún por resolver)
Changed the code by the comments below export function textToSpeech(text) { return new Promise((resolve) => { let msg = new SpeechSynthesisUtterance(); msg.voice = voices[6]; msg.lang = "en"; msg.text = text; speechSynthesis.cancel(msg); speechSynthesis.speak(msg); msg.addEventListener("end", () => { resolve(); }); }); }Async era innecesario y también "limpiaba" la cola "Hablar" (usando cancelar)
ReadNews(data) { textToSpeech(data.Title) .then(() => textToSpeech(data.Info)) .then(() => textToSpeech("Would You like me to continue?")) .then(() => ContinueCON.addEventListener("click", () => { textToSpeech(data.Content); }) ); }, };Invoqué el valor de retorno inmediatamente en lugar de esperar una resolución y luego ejecutar la siguiente línea de texto. El problema aún no se ha resuelto.
Veo un par de problemas con su código, que están causando que el discurso se ponga en cola de inmediato, sin esperar. Pero se supone que speechSynthesis maneja eso automáticamente, por lo que no me queda claro cómo podrían causar lo que estás viendo. Aún así, los señalaré en caso de que estén causando su problema de una manera sutil que no puedo identificar.
El primer problema es que su función textToSpeech no devuelve la promesa que crea. Se devuelve implícitamente una promesa ya que es una función async , pero esa promesa no esperará a que termine el discurso. La solución para esto es agregar un retorno (y también puede eliminar async si lo desea, ya que no está esperando nada)
export function textToSpeech(text) { return new Promise((resolve) => { let msg = new SpeechSynthesisUtterance(); msg.voice = voices[6]; msg.lang = "en"; msg.text = text; speechSynthesis.speak(msg); msg.addEventListener("end", () => { resolve(); }); }); } En segundo lugar, ReadNews no está esperando a que terminen las promesas. .then(textToSpeech(data.Info)) significa "llamar inmediatamente a textToSpeech, pasar data.Info, y luego lo que sea que devuelva, páselo a .then ". En su lugar, desea pasar una función a .then , de modo que se llame a la función una vez que se haya resuelto la promesa anterior:
ReadNews(data) { textToSpeech(data.Title) .then(() => textToSpeech(data.Info)) .then(() => textToSpeech("Would You like me to continue?")) .then( () => ContinueCON.addEventListener("click", () => { textToSpeech(data.Content); }) ); }O con async/await:
async ReadNews(data) { await textToSpeech(data.Title); await textToSpeech(data.Info); await textToSpeech("Would you like me to continue?"); ContinueCON.addEventListener("click", () => { textToSpeech(data.Content); }) }