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
11
12
13
14
15
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 elemento para a lista suspensa de vozes na qual o usuário selecionará uma opção.
Queremos preenchê-lo com as vozes do conjunto de vozes. Crie uma função chamada addVoices().
1 |
function addVoices(){ |
2 |
// populate options with the voices from array
|
3 |
|
4 |
}
|
Dentro da função, use o forEach() método para percorrer a matriz de vozes e, para cada objeto de voz, defina option.value = voice.lang e option.text = voice.namee anexe a opção ao elemento selecionado.
1 |
function addVoices() { |
2 |
console.log(voices); |
3 |
voices.forEach((voice) => { |
4 |
let option = document.createElement("option"); |
5 |
option.value = voice.lang; |
6 |
option.textContent = voice.name; |
7 |
optionsContainer.appendChild(option); |
8 |
|
9 |
if (voice.lang === "en-US") { |
10 |
option.selected = true; |
11 |
}
|
12 |
});
|
13 |
}
|
Precisamos invocar o addVoices() função para aplicar a funcionalidade, no entanto, para o navegador Chrome, precisamos ouvir o voiceschanged evento e depois ligue para o addVoices() função. Então, adicionaremos uma condição:
1 |
if (navigator.userAgent.indexOf("Chrome") !== -1) { |
2 |
speechSynthesis.addEventListener("voiceschanged", addVoices); |
3 |
} else { |
4 |
addVoices(); |
5 |
}
|
O voiceschanged event é um evento JavaScript disparado quando a lista de vozes de síntese de fala disponíveis é alterada. O evento acontece quando a lista de vozes disponíveis está pronta para uso.
Ouvinte de eventos de botão
Adicione um ouvinte de evento de clique ao botão gerar.
1 |
convertBtn.addEventListener("click", function () { |
2 |
// display an alert message if content is empty
|
3 |
// pass the arguments to convertToSpeech()
|
4 |
});
|
Dentro da função de ouvinte de evento, queremos exibir um alerta caso o conteúdo não seja fornecido, obter o texto da área de texto, obter o idioma selecionado e passar os valores para o convertToSpeech() função.
Atualize o ouvinte de eventos da seguinte maneira.
1 |
convertBtn.addEventListener("click", function () { |
2 |
convertText = document.querySelector(".content").value; |
3 |
|
4 |
if (convertText === "") { |
5 |
messageContainer.textContent = " Please provide some text"; |
6 |
messageContainer.style.display = "block"; |
7 |
|
8 |
setTimeout(() => { |
9 |
messageContainer.textContent = ""; |
10 |
messageContainer.style.display = "none"; |
11 |
}, 2000); |
12 |
|
13 |
return; |
14 |
}
|
15 |
|
16 |
const selectedLang = |
17 |
optionsContainer.options[optionsContainer.selectedIndex].value; |
18 |
|
19 |
|
20 |
convertToSpeech(convertText, selectedLang); |
21 |
});
|
Crie o convertToSpeech() função e adicione o código abaixo.
1 |
function convertToSpeech(text, lang) { |
2 |
if (!("speechSynthesis" in window)) { |
3 |
messageContainer.textContent = |
4 |
" Your browser is not supported, try another browser"; |
5 |
messageContainer.style.display ="block" |
6 |
return; |
7 |
}
|
8 |
let utterance = new SpeechSynthesisUtterance(); |
9 |
utterance.lang = lang; |
10 |
utterance.text = text; |
11 |
|
12 |
speechSynthesis.speak(utterance); |
13 |
|
14 |
}
|
O covertToSpeech() A função receberá os dois parâmetros, ou seja, o texto a ser convertido e o idioma em que o texto deverá ser falado.
Vamos decompô-lo:
- Primeiro, verificaremos se o navegador suporta síntese de fala; caso contrário, exibiremos a mensagem “Seu navegador não é suportado; tente outro navegador”
- Se a síntese de fala for suportada, criaremos um novo
SpeechSynthesisUtteranceinstância e atribuí-la à expressão variável. - Em seguida, aplicamos o texto à solicitação de fala com
utterance.texte a linguagem comutterance.lang. - Finalmente, o navegador falará o texto usando
speechSynthesis.speak(utterance).
Conclusão
Espero que você tenha gostado deste tutorial e aprendido algo útil! Cobrimos tudo que você precisa para criar aplicativos de texto para voz, aproveitando os recursos de WebSpeechApi. A incorporação da funcionalidade de texto para voz em seu aplicativo atenderá às diversas necessidades do usuário e melhorará sua acessibilidade geral.
Vamos nos lembrar do que criamos:
