Implement Text-to-Speech (TTS) for reading text

[silvaezequias]

Este pull request adiciona a funcionalidade completa de Text-to-Speech (TTS) ao projeto, permitindo a conversão de texto em áudio. Foram implementados um componente e um hook personalizados para facilitar a integração do TTS em outros componentes.

Principais alterações:

• Adição do componente de Text-to-Speech, que exibe um botão para iniciar/parar a leitura do texto e controle de volume e velocidade.
• Implementação do hook useTextToSpeech, que fornece uma API para controlar a reprodução do áudio, ajustar volume e velocidade.
• Integração da API de SpeechSynthesis do navegador para a reprodução do áudio.
• Suporte para pausar, retomar e parar a reprodução do áudio.
• Adição de eventos para notificar o início, fim e marcos (boundaries) durante a reprodução.

Este pull request também inclui um novo componente chamado TextToSpeechControl, que exibe o botão de reprodução de áudio e os controles de volume e velocidade. O componente pode ser facilmente integrado a outros componentes para fornecer a funcionalidade de TTS.

[vercel]

@silvaezequias is attempting to deploy a commit to the TabNews Team on Vercel.

A member of the Team first needs to authorize it.

[silvaezequias]

Ainda não tem suporte para mobile, não sei qual seria a melhor forma de fazer isso.
O layout quebra quando o menu de fala é ativado:

Enquanto na versão desktop está tudo certo

O pessoal do front se puder dar uma força nisso ai, não é o meu forte! 🤝

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
tabnews	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 22, 2023 2:45pm

[vilarjp]

Ainda não tem suporte para mobile, não sei qual seria a melhor forma de fazer isso. O layout quebra quando o menu de fala é ativado:

Enquanto na versão desktop está tudo certo

O pessoal do front se puder dar uma força nisso ai, não é o meu forte! 🤝

@silvaezequias não consegui identificar onde que o layout quebra na opção mobile, no seu print me pareceu tudo certo, também rodei a sua branch aqui no meu ambiente local e me pareceu tudo ok, consegue passar mais informações?

[silvaezequias]

@silvaezequias não consegui identificar onde que o layout quebra na opção mobile, no seu print me pareceu tudo certo, também rodei a sua branch aqui no meu ambiente local e me pareceu tudo ok, consegue passar mais informações?

Cara, eu peço perdão pois mandei o print errado. O volume e a velocidade de fala possuem um slider para gerenciar eles. Esse slider aparece quando o usuário passar o mouse por cima, igual nesse exemplo:

Da forma que está, não funciona no mobile porque não tem como fazer um hover dinamico e quando o usuário clica no botão, ele abre o slider e quebra o layout dos botões e fica fora da tela.

Teria que ter uma outra forma de gerenciar a velocidade e o volume pelo mobile, não sei qual seria a melhor forma de fazer isso. Uma das formas que eu pensei foi um dropdown menu com as opções de gerenciamento.

[aprendendofelipe]

@silvaezequias, obrigado pelo PR! 💪

Vou deixar como draft enquanto tem esses problemas que você relatou. Combinado? 🤝

Para quem quiser testar, o resultado pode ser visto aqui:

https://tabnews-git-fork-silvaezequias-text-to-speech-tabnews.vercel.app/

@silvaezequias, caso queira, você pode criar publicações específicas para teste do seu PR no ambiente de homologação, daí é só colocar o link aqui para facilitar para quem quiser ver o resultado.

Também seria legal abrir uma issue falando sobre a funcionalidade, explicando porque ela deveria existir no TabNews. Na issue não precisa dar detalhes da implementação, mas você pode citar que abriu esse PR 👍

[silvaezequias]

Fechou @aprendendofelipe e obrigado por fornecer o link do ambiente de testes! 🤝

Em relação a issue sobre esse pull request, eu vou abrir sim, mas logo depois de resolver alguns problemas de usabilidade.

---

+Bug

Eu encontrei mais um bug: Quando o áudio está tocando, se mudar de janela - provavelmente usando o componente Link do NextJs - pelo sistema do react (sem recarregar a pagina), o áudio continua tocando.

[silvaezequias]

+Bug

Eu encontrei mais um bug: Quando o áudio está tocando, se mudar de janela - provavelmente usando o componente Link do NextJs - pelo sistema do react (sem recarregar a pagina), o áudio continua tocando.

Resolvido: 493b3cb

[silvaezequias]

Menu de gerenciamento de TTS adicionado para mobile: 486302c

Fix: Todos os bugs que foram reportados, já foram resolvidos.

[aprendendofelipe]

@silvaezequias, muito legal a funcionalidade, só que a UX não está legal:

1. É melhor não haver nenhum layout shift como o que ocorre com o hover no modo desktop.
2. Não está intuitiva a maneira de mudar a velocidade de leitura. Fiquei clicando no 1.0x, pois inclusive o cursor induz que ali é clicável. Imaginava que abriria algo na vertical para selecionar os números e que aquele controle azul era da evolução da leitura e não da velocidade. Provavelmente teria a mesma dificuldade com o controle de volume se já não tivesse passado pelo problema com a velocidade. Acho que pode ficar mais claro se esses controles surgirem na vertical, abaixo de cada botão. E faria o mesmo na versão mobile.
3. Senti falta de um controle para avançar e recuar na leitura. Esse sim acho que faz mais sentido ser na horizontal.

Fora a UX, o botão "continuar narração" não está funcionando no mobile.

Ainda não revisei o código 👍