Función de síntesis de voz HTML5 poco conocida

Si lo escuchas, descubrirás que el sonido reproducido no es material de audio pregrabado, sino un discurso sintetizado mediante reconocimiento de texto.

Primero póngase los auriculares y luego copie el siguiente código en la consola de Chrome para experimentarlo ~

 let msg = new SpeechSynthesisUtterance(Bienvenido a leer mi blog);window.speechSynthesis.speak(msg);

Mira, no es difícil implementar la síntesis de voz en el front-end.

A partir del ejemplo anterior, podemos adivinar las funciones de los dos métodos llamados anteriormente.

 SpeechSyntehesisUtterancwindow.speechSynthesis.speak

Por supuesto, la síntesis de voz no solo incluye estas dos API, sino que comencemos con estos dos puntos.

Referencia: desarrollador.mozilla.org/en-US/docs/… El objeto SpeechSyntehesisUtteranc contiene el contenido que leerá el servicio de voz y algunos parámetros, como idioma, tono y volumen.

 SpeechSyntehesisUtteranc()SpeechSynthesisUtterance.langSpeechSynthesisUtterance.pitchSpeechSynthesisUtterance.rateSpeechSynthesisUtterance.voiceSpeechSynthesisUtterance.volume

Nota: ¡Todas las propiedades anteriores se pueden leer y escribir! Puede copiar el código a continuación y probarlo. Habrá instrucciones en los comentarios.

 let msg = new SpeechSynthesisUtterance();msg.text = how are you // Texto a sintetizar msg.lang = en-US // Pronunciación de inglés americano (seleccionado automáticamente de forma predeterminada) msg.rate = 2 // Doble velocidad (predeterminada es 1, rango 0.1~10) msg.pitch = 2 // Tono alto (cuanto mayor sea el número, más nítido es, el valor predeterminado es 1, rango 0~2) msg.volume = 0.5 // Volumen 0,5 veces (el valor predeterminado es 1, rango 0 ~ 1) window.speechSynthesis.speak(msg);

Al mismo tiempo, este objeto también puede responder a una serie de eventos, que pueden usarse:

• comenzar
• fin
• límite
• pausa
• reanudar

Con la ayuda de estos eventos, podemos completar algunas funciones simples, como contar el número de palabras en oraciones en inglés:

 let count = 0; // Número de palabras let msg = new SpeechSynthesisUtterance();let synth = window.speechSynthesis;msg.addEventListener('start',()=>{ // Comienza a leer console.log(`Contenido del texto: $ {msg.text}`); console.log(inicio);});msg.addEventListener('end',()=>{ // Fin de la lectura console.log(end); console.log(`Número de palabras de texto (palabras): ${count}` count = 0;});msg.addEventListener('boundary',()=>{ // Contar palabras contar++;});

Después de intentarlo, dado que el chino no usa espacios para separar cada palabra, se reconocerá automáticamente. Por ejemplo, la bienvenida a los lectores se reconocerá como dos palabras: bienvenida y lector.

Referencia: desarrollador.mozilla.org/en-US/docs/…

Después de hablar sobre SpeechSyntehesisUtteranc, echemos un vistazo a SpeechSynthesis.

La función principal de SpeechSynthesis es realizar una serie de controles sobre el habla, como iniciar o pausar.

Tiene tres propiedades de sólo lectura que indican el estado de la voz:

 SpeechSynthesis.en pausaSpeechSynthesis.pendiente

También existen una serie de métodos para manipular el habla:

•SpeechSynthesis.speak() comienza a leer el habla y activa el evento de inicio al mismo tiempo.

•SpeechSynthesis.pause() pausa y activa el evento de pausa

•SpeechSynthesis.resume() continúa y activa el evento de reanudación al mismo tiempo.

•SpeechSynthesis.cancel() cancela la lectura y activa el evento de finalización al mismo tiempo

Con base en estos métodos de operación, podemos mejorar aún más nuestro lector de texto:

Volvamos al punto de partida original. Según el contenido anterior, podemos adivinar cómo se implementa la lectura automática de artículos en algunos sitios web.

Si la interfaz de este sitio web utiliza el marco MVVM (tome Vue como ejemplo), entonces el contenido del artículo puede almacenarse en datos, que pueden usarse para construir la síntesis de voz que necesitamos.

Por supuesto, también es posible obtener el artículo mediante una solicitud ajax, analizar los datos solicitados y construir el objeto de síntesis de voz.

Si el artículo está escrito directamente en HTML, el DOM debe analizarse en este momento. Después de la prueba, incluso la siguiente estructura caótica.

 <div id=prueba> <p>1</p> <p>2</p> <ul> <li>3</li> <li>4</li> </ul> <tabla> <tr > <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> </tr> </table> <img src=https://www.baidu.com/img/bd_logo1.png9</div>

Lea el texto directamente a través de InnerText, luego construya un objeto de síntesis de voz y también puede leerlo en el orden deseado (se ignorarán las imágenes).

Por supuesto, si queremos ignorar algunas estructuras especiales, como tablas, podemos gastar algo de energía en analizar y filtrar los datos o elementos DOM que no queremos.

Pase lo que pase, podemos encontrar una solución adecuada ~

Esta característica aún está en borrador y no cuenta con un soporte generalizado.

Nuevamente, esta API aún no se puede aplicar a entornos de producción.

El enfoque más común en la actualidad es construir una API (quizás una API de terceros) que sintetice texto en un archivo de voz en el back-end y luego lo reproduzca como medio en el front-end.

Una vez, cuando estaba confundido, leí algunos artículos de expertos y algunas ideas de alto nivel sobre el desarrollo front-end. Una cosa me impresionó profundamente:

La interfaz es la más cercana al usuario. Todo debe considerarse desde la perspectiva del usuario. El uso sin barreras también es una cuestión muy importante. Aunque los beneficios que aporta dicha función son mucho menores que los de otras empresas, para que el producto sirva mejor a los usuarios, vale la pena trabajar más. Este también es un espíritu de desarrollo front-end.

Lo anterior es la función de síntesis de voz HTML5 poco conocida introducida por el editor. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo.