Como construir um aplicativo de conversão de texto em voz com JavaScript

0
Tutoriais
21/03/2024
A+ A-
Email Print

Este tutorial abordará como converter texto em fala usando JavaScript usando WebSpeechAPI. Contará com uma interface simples onde o usuário adiciona o texto a ser falado e clica em um botão para gerar a fala correspondente.

Nossa demonstração de conversão de texto em fala

Aqui está o que vamos construir. Digite o que quiser na área de texto, selecione o idioma em que você escreveu e clique no botão para ouvir o resultado!

Estrutura HTML

Ok, vamos começar a construir. A Estrutura HTML consistirá nos seguintes elementos:

  • a 
    9
      
10
   class="form-group">

11
     for="voices">Choose your language:

12
     class="select-voices form-control form-control-lg" name="voices">

13
    

14
  
15
   type="button" class="convert btn btn-primary">🔊 Convert Text to Voice

16
  

17

Estilo adicional com CSS

Bootstrap cuida de praticamente todo o estilo para nós. Mas vamos adicionar algumas propriedades CSS personalizadas ao nosso design. Isso nos dará uma fonte personalizada, um contêiner, algum espaçamento extra para os elementos do formulário e uma regra para ocultar nossa mensagem de alerta.

1
 
@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap");

2
 








3




body {









4




  font-family: "DM Mono", monospace;









5




}









6




.container {









7




  width: 100%;









8




  max-width: 600px;









9




  padding: 2rem 0;









10




}









11




.form-group {









12




  margin: 2rem 0;









13




}









14




label {









15




  margin-bottom: 1rem;









16




}









17




.message{









18




    display: none;









19




}











Nós definimos display:none ao componente de alerta para que ele apareça apenas se houver mensagens de erro para exibir.


Funcionalidade JavaScript


Como expliquei na introdução, podemos obter vozes usando o speechSynthesis.getVoices() método;  vamos começar obtendo e armazenando-os em um array como este.










1




const vozes = [









2




  { name: "Google Deutsch", lang: "de-DE" },









3




  { name: "Google US English", lang: "en-US" },









4




  { name: "Google UK English Female", lang: "en-GB" },









5




  { name: "Google UK English Male", lang: "en-GB" },









6




  { name: "Google español", lang: "es-ES" },









7




  { name: "Google español de Estados Unidos", lang: "es-US" },









8




  { name: "Google français", lang: "fr-FR" },









9




  { name: "Google हिन्दी", lang: "hi-IN" },









10




  { name: "Google Bahasa Indonesia", lang: "id-ID" },









11




  { name: "Google italiano", lang: "it-IT" },









12




  { name: "Google 日本語", lang: "ja-JP" },









13




  { name: "Google 한국의", lang: "ko-KR" },









14




  { name: "Google Nederlands", lang: "nl-NL" },









15




  { name: "Google polski", lang: "pl-PL" },









16




  { name: "Google português do Brasil", lang: "pt-BR" },









17




  { name: "Google русский", lang: "ru-RU" },









18




  { name: "Google 普通话（中国大陆）", lang: "zh-CN" },









19




  { name: "Google 粤語（香港）", lang: "zh-HK" },









20




  { name: "Google 國語（臺灣）", lang: "zh-TW" }









21




];











Identifique os elementos necessários


Em seguida, use o Document Object Model (DOM) para obter os elementos de alerta, seleção e botão.










1




const optionsContainer = document.querySelector(".select-voices");









2




const convertBtn = document.querySelector(".convert");









3




const messageContainer = document.querySelector(".message")











Criar seleção de vozes


O optionsContainer representa o