Função de síntese de fala HTML5 pouco conhecida

Se você ouvir, descobrirá que o som reproduzido não é um material de áudio pré-gravado, mas uma fala sintetizada por meio de reconhecimento de texto.

Coloque seus fones de ouvido primeiro e, em seguida, copie o código a seguir no console do Chrome para experimentá-lo ~

 deixe msg = new SpeechSynthesisUtterance(Bem-vindo ao ler meu blog);window.speechSynthesis.speak(msg);

Olha, não é difícil implementar síntese de fala no front end

A partir do exemplo acima, podemos adivinhar as funções dos dois métodos chamados acima.

 SpeechSyntehesisUtterancwindow.speechSynthesis.speak

É claro que a síntese de voz não inclui apenas essas duas APIs, mas vamos começar com esses dois pontos.

Referência: developer.mozilla.org/en-US/docs/… O objeto SpeechSyntehesisUtteranc contém o conteúdo a ser lido pelo serviço de fala e alguns parâmetros, como idioma, tom e volume

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

Nota: As propriedades acima são todas legíveis e graváveis! Você pode copiar o código abaixo e tentar. Haverá instruções nos comentários.

 let msg = new SpeechSynthesisUtterance();msg.text = como vai você // Texto a ser sintetizado msg.lang = en-US // Pronúncia do inglês americano (selecionada automaticamente por padrão) msg.rate = 2 // Velocidade dupla (padrão é 1, intervalo de 0,1 a 10) msg.pitch = 2 // Tom alto (quanto maior o número, mais nítido ele é, o padrão é 1, intervalo de 0 a 2) msg.volume = 0,5 // Volume 0,5 vezes (o padrão é 1, intervalo de 0 a 1) window.speechSynthesis.speak(msg);

Ao mesmo tempo, este objeto também pode responder a uma série de eventos, que podem ser utilizados:

• começar
• fim
• limite
• pausa
• retomar

Com a ajuda desses eventos, podemos completar algumas funções simples, como contar o número de palavras em frases em inglês:

 let count = 0; // Número de palavras let msg = new SpeechSynthesisUtterance();let synth = window.speechSynthesis;msg.addEventListener('start',()=>{ // Comece a ler console.log(`Text content: $ {msg.text}`); console.log(início);});msg.addEventListener('end',()=>{ // Fim da leitura console.log(end); console.log(`Número de palavras de texto (palavras): ${count}`);msg.addEventListener('boundary',()=>{ // Conta palavras count++;});

Depois de tentar, como o chinês não utiliza espaços para separar cada palavra, ela será reconhecida automaticamente. Por exemplo, bem-vindo aos leitores será reconhecido como duas palavras: bem-vindo e leitor.

Referência: developer.mozilla.org/en-US/docs/…

Depois de falar sobre SpeechSyntehesisUtteranc, vamos dar uma olhada em SpeechSynthesis

A principal função do SpeechSynthesis é realizar uma série de controles na fala, como iniciar ou pausar.

Possui três propriedades somente leitura que indicam o status da voz:

 SpeechSynthesis.pausadoSpeechSynthesis.pendente

Existem também uma série de métodos para manipular a fala:

•SpeechSynthesis.speak() inicia a leitura da fala e aciona o evento de início ao mesmo tempo

•SpeechSynthesis.pause() pausa e aciona o evento de pausa

•SpeechSynthesis.resume() continua e aciona o evento resume ao mesmo tempo

•SpeechSynthesis.cancel() cancela a leitura e aciona o evento final ao mesmo tempo

Com base nestes métodos de operação, podemos aprimorar ainda mais nosso leitor de texto:

Voltemos ao ponto de partida original. Com base no conteúdo acima, podemos adivinhar como a leitura automática de artigos é implementada em alguns sites.

Se o front end deste site usar a estrutura MVVM (tome Vue como exemplo), então o conteúdo do artigo pode ser armazenado em dados, que podem ser usados ​​para construir a síntese de fala que precisamos

Claro, também é possível que o artigo seja obtido através de uma solicitação ajax, os dados solicitados sejam analisados ​​e o objeto de síntese de fala seja construído.

Se o artigo for escrito diretamente em HTML, o DOM precisará ser analisado neste momento. Após o teste, até mesmo a seguinte estrutura caótica.

 <div id=test> <p>1</p> <p>2</p> <ul> <li>3</li> <li>4</li> </ul> <tabela> <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>

Leia o texto diretamente através do innerText, depois construa um objeto de síntese de fala, e você também pode lê-lo na ordem desejada (as imagens serão ignoradas)

É claro que, se quisermos ignorar algumas estruturas especiais, como tabelas, podemos gastar um pouco de energia analisando e filtrando os dados ou elementos DOM que não queremos.

Não importa o que aconteça, podemos encontrar uma solução adequada ~

Este recurso ainda está em rascunho e não é amplamente suportado.

Novamente, esta API ainda não pode ser aplicada a ambientes de produção.

A abordagem mais comum atualmente é construir uma API (talvez uma API de terceiros) que sintetize texto em um arquivo de fala no back-end e depois o reproduza como mídia no front-end.

Certa vez, quando estava confuso, li alguns artigos de especialistas e algumas idéias de especialistas sobre desenvolvimento front-end. Uma coisa me impressionou profundamente:

O front-end está mais próximo do usuário. Tudo deve ser considerado do ponto de vista do usuário. O uso sem barreiras também é uma questão muito importante. Embora os benefícios trazidos por tal função sejam muito menores do que os de outras empresas, para que o produto atenda melhor aos usuários, vale a pena trabalhar mais. Este é também um espírito de desenvolvimento front-end.

O texto acima é a função de síntese de fala HTML5 pouco conhecida introduzida pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo.