Como adicionar o recurso de conversão de texto em fala em qualquer página da Web

o texto para fala recurso refere-se ao narração falada de um texto exibido em um dispositivo. Atualmente, dispositivos como laptops, tablets e celulares já tem esse recurso. Qualquer aplicativo em execução nesses dispositivos, como um navegador da Web, pode faça uso dele, e estender sua funcionalidade. O recurso de narração pode ser uma ajuda adequada para um aplicativo que exibe texto abundante, como isso oferece a opção de ouvir aos visitantes do site.

A API de fala da Web

o API JavaScript de fala da Web é a porta de entrada para acessar o recurso de conversão de texto em fala por um navegador da web. Portanto, se você quiser introduzir a funcionalidade de conversão de texto em fala em uma página da Web com muitos textos e permitir que seus leitores escutem o conteúdo, você poderá usar essa API prática ou, para ser mais específico, Síntese de fala interface.

Código inicial e verificação de suporte

Para começar, vamos criar uma página da web com me amostra de texto a ser narrado, e três botões.

     
  A lebre com muitos amigos
  Uma lebre era muito popular com… 
 Mas ele recusou, afirmando que ... 
  Moral da história…

Os botões serão os controles para a narração. Agora precisamos ter certeza se o UA suporta o Síntese de fala interface. Para isso, verificamos rapidamente com JavaScript se o janela objeto tem o 'síntese de fala' propriedade, ou não.

 onload = function () if ('speechSynthesis' na janela) / * síntese de voz suportada * / else / * síntese de voz não suportada * /

E se síntese de fala está disponível, primeiro nós criar uma referência para síntese de fala que atribuímos ao synth variável. Nós também iniciar uma bandeira com o falso valor (vamos ver o seu propósito mais tarde no post), e nós criar referências e clicar em manipuladores de eventos para os três botões (Play, Pause, Stop), bem.

Quando o usuário clica em um dos botões, sua respectiva funçãoonClickPlay (), onClickPause (), onClickStop ()) será chamado.

 if ('speechSynthesis' na janela) var synth = speechSynthesis; var flag = false; / * referências aos botões * / var playEle = document.querySelector ('# play'); var pauseEle = document.querySelector ('# pause'); var stopEle = document.querySelector ('# stop'); / * clique em manipuladores de eventos para os botões * / playEle.addEventListener ('click', onClickPlay); pauseEle.addEventListener ('clique', onClickPause); stopEle.addEventListener ('clique', onClickStop); function onClickPlay ()  function onClickPause ()  função onClickStop ()

Crie as funções personalizadas

Agora vamos construir as funções de clique dos três botões individuais que serão chamados pelos manipuladores de eventos.

1. Reproduzir / Continuar

Quando o botão Play é clicado, primeiro nós Verifica a bandeira. Se é falso, nós configuramos para verdade, então, se a qualquer momento o botão for clicado mais tarde, o código dentro do primeiro E se condição não será executada (não até que a bandeira esteja falso novamente).

Então nós criar uma nova instância do SpeechSynthesisUtterance interface que contém informações sobre o discurso, como, o texto a ser lido, o volume da fala, a voz falada, a velocidade, o tom e a linguagem do discurso. Nós adicionamos o texto do artigo como parâmetro do construtor, e atribuí-lo ao enunciado variável.

 function onClickPlay () if (! flag) flag = true; enunciado = new SpeechSynthesisUtterance (document.querySelector ('article'). textContent); utterance.voice = synth.getVoices () [0]; utterance.onend = function () flag = false; ; synth.speak (enunciação);  if (synth.paused) / * unpause / retomar narração * / synth.resume ();

Nós usamos o SpeechSynthesis.getVoices () método para designar uma voz para o discurso das vozes disponíveis no dispositivo do usuário. Como este método retorna uma matriz de todas as opções de voz disponíveis em um dispositivo, atribuir a primeira voz do dispositivo disponível usando o utterance.voice = synth.getVoices () [0]; declaração.

o No fim propriedade representa um manipulador de eventos que é executado quando o discurso terminou. Dentro dela, nós mudamos o valor do bandeira variável de volta para falso de modo que o código que inicia o discurso pode ser executado quando o botão está clicado novamente.

Então nós chamamos o SpeechSynthesis.speak () método, a fim de comece a narração. Nós também precisamos verificar se a narração estiver em pausa, para o qual usamos o somente leitura SpeechSynthesis.paused propriedade. Se a narração estiver em pausa, precisamos retomar a narração no botão clique, o que podemos conseguir usando o SpeechSynthesis.resume () método.

2. Pausa

Agora vamos criar o onClickPause () função em que primeiro verificar se a narração estiver em andamento e não for pausada. Podemos testar essas condições fazendo uso do SpeechSynthesis.speaking e a SpeechSynthesis.paused propriedades. Se ambas as condições forem verdadeiras, onClickPause () função pausa o discurso chamando o SpeechSynthesis.pause () método.

 function onClickPause () if (synth.speaking &&! synth.paused) / * pausa na narração * / synth.pause ();

3. Pare

o onClickStop () função é construído de forma semelhante ao onClickPause (). Se o discurso está em curso, nós pare com isso chamando o SpeechSynthesis.cancel () método que remove todos os enunciados.

 function onClickStop () if (synth.speaking) / * interrompe a narração * / / * para safari * / flag = false; synth.cancel ();

Note que no cancelamento do discurso, o No fim evento é disparado automaticamente, e já adicionamos o código de redefinição de sinalização dentro dele. Contudo, há um bug no navegador Safari que impede que este evento seja disparado, é por isso que redefinimos a bandeira no onClickStop () função. Você não precisa fazer isso se não quiser dar suporte ao Safari.

Suporte de Navegador

Todas as versões mais recentes de navegadores modernos ter apoio total ou parcial para a API de síntese de fala. Os navegadores Webkit não reproduzem a fala de várias guias, a pausa é problemática (funciona, mas com bugs) e a fala não é redefinida quando o usuário recarrega a página nos navegadores Webkit.

Demonstração de trabalho

Dê uma olhada na demonstração ao vivo abaixo ou confira o código completo no Github.

Veja a Caneta Ã ?? Â¸UMA¢Texto para fala - JavaScript por HONGKIAT (@hkdc) em CodePen.