O objetivo deste projeto foi criar um transcritor de áudio para texto feito em HTML, CSS e Javascript (puro).
Optei por um html e css simpples e funcional; no que tange o estilo da página, construi algumas animações com os pseudo-elementos after e before, além do hover, com o intuito de deixar o botão de gravação de áudio visualmente bacana e intuitivo para a experiência do usuário. É válido ressaltar que todas as principais medidas do layout da página estão em porcentagens, visando a responsividade da mesma. Se tratando do javascript utilizei fundamentalmente os métodos de array:
from( ), map( ) e join( ); Além disso, utilizei a API Web Speech que é uma API de reconhecimento de voz implementada no Chrome 25 (e superiores). Sendo assim, como não construi nenhuma condicional caso o usuário utilize algum navegador que não suporte essa API, como o Mozilla Firefox, o sistema simplesmente não funcionará e nem exibirá nenhuma mensagem de erro.
A API Web Speech constitui-se com a privacidade dos utilizadores, pois antes de ativar a voz através do microfone, o utilizador deve autorizar a execução (por meio de um alert). A API contempla o objeto SpeechRecognition, o primeiro passo então foi verificar se o browser o qual o usuário está utilizando suporta esse objeto. Neste caso, como não setei nenhuma condicional, se o usuário utilizar o Mozilla, que não possui suporte, por exemplo, não aparecerá nenhuma mensagem para o mesmo. O programa apenas não irá funcionar.
A constante transcript armazena o texto que informa o que o utilizador/usuário falou. A outra constante: recognition, é utilizada para reconhecer a voz do usuário. Para reconhecer a fala continuamente foi necessário colocar a propriedade continuos como true. Desta forma o reconhecedor de voz não para de ouvir mesmo que tenha pausas na fala do usuário. A função result define um callback que é disparado quando o reconhecedor de voz devolve um resultado. A propriedade results é um array de objetos em que cada item do array armazena um possível resultado de reconhecimento de voz.
A MDN (documentação do Mozilla) revela que esse método invoca a função callback passada por argumento para cada elemento do array e devolve um novo array como resultado. Se tratando do código do projeto a função callback passada na método map é result.
Sintaxe:
arr.map(callback[, thisArg])
Segundo a MDN o método from cria uma nova instância de um array quando for passado um array-like ou um iterable object (como foi utilizado no projeto) como argumento. Os objetos iteráveis permitem coletar seus elementos, assim como map.
Este método é usado para juntar os elementos de um array em uma string. Os elementos da string serão separados por um separador especificado e seu valor padrão é uma vírgula (,). No código do projeto o join junta os elementos do array em uma string usando '' (string vazia).