Leitura em voz alta
Lê em voz alta o documento, ou o texto selecionado, com o sintetizador de fala do próprio navegador, uma frase de cada vez, e seleciona cada frase enquanto ela é falada. Uma pequena barra na parte de baixo da janela tem os controles de pausa, parada, voz e velocidade. Não há biblioteca, servidor nem chave envolvidos.
Ative o recurso
O recurso é o plugin readaloud.js (também incluído em plugins/all_plugins.js). O comando e o item da barra de ferramentas dele são readaloud (dica de ferramenta "Read aloud"). Com a barra de ferramentas padrão, o botão fica no menu "More" (⋮); na sua própria barra de ferramentas, adicione readaloud. O comando abre a barra e começa a ler imediatamente; executá-lo de novo fecha a barra.
<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/readaloud.js"></script>
<div id="editor"><p>The station opened in 1911. Trains ran twice a day.</p></div>
<script>
var editor = new RichTextEditor("#editor", {
toolbar: "mytoolbar",
toolbar_mytoolbar: "{bold,italic,underline}|{readaloud}"
});
</script>Os estilos da barra ficam em rte_theme_default.css; por isso, mantenha essa folha de estilo na página.
A barra
- Play / Pause pausa e retoma; depois do fim, começa de novo.
- Stop encerra a leitura e restaura a seleção que o usuário tinha antes.
- Voice lista todas as vozes de
speechSynthesis.getVoices()como "nome (idioma)", com a padrão do navegador marcada. A lista é preenchida quando o navegador informa as vozes dele. - Velocidade: 0.75×, 1×, 1.25×, 1.5× ou 2×, começando em 1×. Uma mudança vale a partir da frase seguinte.
- O status mostra "Reading… (3/10)", "Paused" ou "Nothing to read". Close para a leitura e remove a barra.
Se houver algo selecionado quando a leitura começar, só a seleção é lida. As frases são divididas em ., !, ?, em uma quebra de linha e nos sinais chineses e japoneses 。！？. A leitura pausa quando a página fica oculta (outra aba) e para quando o usuário sai da página.
Opções e API
| Opção | Padrão | O que faz |
|---|---|---|
readAloudHighlight | true | Seleciona cada frase no editor enquanto ela é falada. false lê sem mover a seleção. |
readAloudRate | 1.0 | Velocidade de editor.readAloud() quando a barra não está aberta. Com a barra aberta, é usado o menu de velocidade dela. |
editor.readAloud({ rate: 1.5, voice: "Microsoft Zira - English (United States)" });
editor.stopReadAloud();editor.readAloud(options) lê sem abrir a barra. rate é limitado a 0.5–2; voice é o name de uma voz exatamente como speechSynthesis.getVoices() o informa. Se o nome não for encontrado, é usada a voz padrão do navegador.
O que você precisa saber
- O recurso precisa de
window.speechSynthesis. Quando o navegador não o tem, o comando mostra uma caixa de diálogo dizendo que a leitura em voz alta não está disponível. - As vozes e os idiomas vêm do navegador e do sistema operacional, não do editor; por isso, a lista muda de um computador para outro. O plugin não define um idioma: a voz escolhida decide como o texto é pronunciado, então escolha uma voz que corresponda ao idioma do documento.
- O texto é coletado nó a nó, sem separadores. Um título sem ponto final é lido junto com a frase seguinte, e as duas palavras no ponto em que se encontram ficam emendadas ("station" + "The").
- A frase é mostrada com a seleção normal; por isso, a barra de ferramentas flutuante de formatação do editor pode aparecer sobre o texto durante a leitura.
- Nada é adicionado ao documento; o HTML salvo não é alterado.
- Os textos da barra vêm de chaves de idioma como
text_ra_play,text_ra_pause,text_ra_stopetext_ra_readingof.
Relacionados: ditado (fala para texto), acessibilidade, referência de itens da barra de ferramentas.