Aplicativo de Transcrição de Áudio em Texto com Quasar Framework

Olá pessoal, neste post iremos aprender como construir nosso próprio aplicativo de transcrição de áudio em texto, usando apenas Javascript e algumas API’s nativas dos navegadores.

Para deixar nosso aplicativo com um visual super bacana, e construí-lo rapidamente, utilizaremos também o Quasar Framework.

Se você é um desenvolvedor Front-end e ainda não ouviu falar sobre o Quasar, leia esse post sobre a versão 1.0 recém lançada.

Criando o projeto

O primeiro passo, é saber se nosso ambiente já está configurado. Os requisitos necessários são:

Node >=8 e NPM >=5
Quasar CLI

Agora vamos criar nosso projeto com Quasar CLI, executando o seguinte comando no seu cmd favorito:

quasar create quasar-speech-api

Após selecionar as opções desejadas no projeto e finalizar a instalação podemos levantar nosso ambiente de desenvolvimento usando o comando:

quasar dev

Conhecendo a Speech API

A Web Speech API permite incorporar dados de voz em aplicativos da web. A nossa aplicação vai utilizar 2 recursos da Web Speech API : SpeechSynthesisUterrance (Texto para Fala) e SpeechRecognition (Reconhecimento de Fala Assíncrona).

SpeechSynthesisUtterance

A SpeechSynthesisUtterance representa um pedido de fala e é compatível com os seguintes browsers

Para poder testar, abra o console de seu navegador(um que esteja na lista de compatibilidade) e execute:

speechSynthesis.speak(new SpeechSynthesisUtterance('Esse é um pedido de fala executado'))

Você também pode configurar algumas propriedades:

lang – defina o idioma (os valores usam uma tag de idioma BCP 47, como en-USou pt-BR);
pitch – obtém e define o tom na qual a expressão será dita aceita entre [0 e 2 ], o padrão é 1;
rate– definir a velocidade, aceita entre [0,1-10], o padrão é 1;
text – em vez de configurá-lo no construtor, você pode passá-lo como uma propriedade. O texto pode ter no máximo 32767 caracteres;
voice – define a voz (mais sobre isso abaixo);
volume – define o volume, aceita entre [0 – 1], o padrão é 1;

Faça o teste no console de seu navegador:

const utterance = new SpeechSynthesisUtterance('Esse é um pedido de fala executado')
utterance.pitch = 1.5
utterance.volume = 0.5
utterance.rate = 8
speechSynthesis.speak(utterance)

SpeechRecognition

A SpeechRecognition é a interface para o serviço de reconhecimento. Atualmente essa é uma tecnologia experimental, então sua compatibilidade ainda é bastante limitada com os navegadores do mercado.
Atualmente disponível no Chrome a partir da versão 33 e no WebView. Ou seja, se você também construir um aplicativo híbrido que utilize uma webview, também será compatível com essa API.

Aqui você pode conferir um exemplo interessante onde o fundo se modifica caso a cor falada esteja na lista pré definida. Basta clicar na tela e falar:

https://mdn.github.io/web-speech-api/speech-color-changer/

Criando Boot Files

Iremos criar um arquivo Boot em nosso projeto Quasar. Mas antes precisamos entender o que de fato ele faz.

Um arquivo de inicialização(boot) é um arquivo JavaScript simples que pode, opcionalmente, exportar uma função. O Quasar chamará a função exportada quando inicializar o aplicativo e, além disso, passará um objeto com as seguintes propriedades para a função:

app – Objeto com o qual o componente raiz e instanciado pelo Vue
router – instância do Vue Router de ‘src/router/index.js’
store – instância do aplicativo Vuex Store
Vue – É como se fizéssemos import Vue from ‘vue’ e está lá por conveniência
ssrContext – Disponível apenas no lado do servidor, se estiver construindo uma aplicação SSR

Bem, agora iremos criar o nosso próprio boot chamado de speech.js no diretório /src/boot.

import { Loading, QSpinnerAudio, QSpinnerBars } from 'quasar'
export default async ({ Vue }) => {
  Vue.prototype.$speechTalk = (lang = 'pt-BR', text) => {
    return new Promise((resolve, reject) => {
      let speech = new SpeechSynthesisUtterance()
      // Set the text and voice attributes.
      speech.lang = lang
      speech.text = text
      speech.volume = 1
      speech.rate = 1
      speech.pitch = 1
      setTimeout(() => {
        window.speechSynthesis.speak(speech)
      }, 300)

      speech.addEventListener('start', () => {
        Loading.show({
          delay: 0,
          spinner: QSpinnerAudio, // ms,
          backgroundColor: 'primary'
        })
      })

      speech.addEventListener('end', () => {
        Loading.hide()
        resolve(true)
      })
    })
  }
  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition
  const recognition = SpeechRecognition ? new SpeechRecognition() : false

  Vue.prototype.$speechToText = {
    start: (lang = 'pt-BR', continuous = false) => {
      return new Promise((resolve, reject) => {
        let text = ''
        setTimeout(() => {
          Loading.show({
            // delay: 400,
            spinner: QSpinnerBars, // ms,
            backgroundColor: 'primary',
            message: 'Aguardando áudio',
            messageColor: 'white'
          })
          recognition.lang = lang // this.voiceSelect
          recognition.continuous = continuous
          recognition.start()
        }, 400)

        recognition.onresult = (event) => {
          let current = event.resultIndex
          // Get a transcript of what was said.
          let transcript = event.results[current][0].transcript
          // Add the current transcript to the contents of our Note.
          // var noteContent += transcript
          text += transcript
          resolve(text)
        }
        recognition.onspeechend = (event) => {
          // if (continuous) {
          reject(false)
          // }
        }
        recognition.nomatch = () => {
          reject(false)
        }
        recognition.onend = () => {
          text = ''
          Loading.hide()
          if (!continuous) {
            reject(false)
          }
        }
      })
    },
    stop: () => {
      recognition.stop()
    }
  }
}

Neste arquivo adicionamos 2 propriedades a instância Vue. A propriedade $speechTalk e $speechToText.

A $speechTalk irá disparar a api SpeechSynthesisUtterance e iniciar a fala do assistente. Para isso precisamos passar 2 parâmetros:

lang – onde passaremos o idioma escolhido para a narração.
text – o texto que será narrado

Além disso, conseguimos fazer com que as propriedades sejam Promises, já que é possível identificar os eventos de inicialização e finalização(start e end).

Na $speechToText passaremos os parâmetros:

lang – onde passamos o idioma escolhido para a fala.
continuous – quando true, fica constantemente recebendo eventos e detectando a fala e convertendo para texto

Temos 2 possibilidades com o $speechToText, o start para iniciar o processo de captura e o stop para forçar a parada.

Criando nossa Página(Page)

No diretório src/pages alteramos o Index.vue para o seguinte código:

<template>
  <q-page class="container">
    <div class="row q-col-gutter-md q-pt-md">
      <q-select
        outlined v-model="voiceSelect"
        :options="optionsVoice"
        label="Idiomas"
        class="col-12"
        emit-value
        map-options/>
      <div class="col-6 q-pt-md">
        <q-btn
          push color="primary"
          round size="lg" icon="keyboard_voice"
          class="float-right"
          @click="record()"/>
      </div>
      <div class="col-6 q-pt-md">
        <q-btn
        push color="primary"
        round size="lg" icon="play_arrow"
        @click="playAudio()"/>
      </div>
      <div class="col-12 text-center">
        <q-toggle
        v-model="continuous"
        label="Contínuo"
        left-label
      />
      </div>
      <div class="col-12 q-pa-xl">
        <q-input
          v-model="text"
          autogrow
          label="Texto"
          clearable
          outlined/>
      </div>
        <div class="col-12 q-pa-lg text-caption">
          <div class="text-bold">Instruções:</div>
          <div>Escolha seu idioma para que o assistente escreva corretamente sua fala.</div>
          <div>Aperte no botão microfone
             <q-btn dense color="primary" round size="xs" icon="keyboard_voice" />
             para iniciar a captura de fala, e autorize seu dispositivo a utilizar o microfone.
          </div>
          <div>
            Ao aparecer a tela com a mensagem "Aguardando Áudio" diga a frase que deseja que seja transcrita.<br>
            Ao finalizar, sua fala aparecerá no campo de Texto.
          </div>
          <div>Caso queira ouvir o texto, basta apertar no botão play <q-btn dense color="primary" round size="xs" icon="play_arrow" />. </div>
        </div>
      </div>
      <q-page-sticky v-if="btnStop" position="bottom-right" :offset="[15, 18]" style="z-index: 10000">
        <q-btn fab icon="stop" color="negative" @click="stop()" />
      </q-page-sticky>
  </q-page>
</template>

<style>
</style>

<script>
export default {
  name: 'PageIndex',
  data () {
    return {
      text: '',
      voiceSelect: 'pt-BR',
      optionsVoice: [],
      continuous: false,
      btnStop: false
    }
  },
  mounted () {
    this.setVoices()
  },
  methods: {
    setVoices () {
      let id = setInterval(() => {
        if (this.optionsVoice.length === 0) {
          this.voicesList()
        } else {
          clearInterval(id)
        }
      }, 50)
    },
    voicesList () {
      let teste = window.speechSynthesis
      this.optionsVoice = teste.getVoices().map(voice => ({
        label: voice.name, value: voice.lang
      }))
    },
    playAudio () {
      this.$speechTalk(this.voiceSelect, this.text)
    },
    record () {
      this.btnStop = true
      this.$speechToText.start(this.voiceSelect, this.continuous)
        .then((suc) => {
          this.text += ' ' + suc
          if (this.continuous) {
            this.record()
          }
          // this.btnStop = false
        })
        .catch(() => {
          this.btnStop = false
        })
    },
    stop () {
      this.$speechToText.stop()
      this.btnStop = false
    }
  }
}
</script>

Antes de tentar exibir o projeto é necessário habilitar alguns componentes em nosso quasar.conf.js.

components: [
  'QLayout',
  'QHeader',
  'QDrawer',
  'QPageContainer',
  'QPage',
  'QToolbar',
  'QToolbarTitle',
  'QBtn',
  'QIcon',
  'QList',
  'QItem',
  'QItemSection',
  'QItemLabel',
  'QInput',
  'QSelect',
  'QSpinnerBars',
  'QSpinnerComment',
  'QBadge',
  'QImg',
  'QAvatar',
  'QScrollArea',
  'QPageSticky',
  'QToggle'
],

No mounted() da nossa página, é disparado o método setVoices(), este método serve para recuperar os tipos de idiomas disponíveis no navegador, e são armazenados no parâmetro optionsVoice para serem exibidos no select de Idiomas.

O método playAudio(), dispara o narrador. Ele utiliza o idioma selecionado e o texto da textarea para enviar ao $speechTalk.

O método record irá ativar o $speechToText e ficar aguardando uma fala em seu app. Para isso é passado ao método o idioma selecionado e o parâmetro “continuous” que como vimos anteriormente, deixa o ouvinte constante ou não.

Por fim temos o método stop(), que é usado em um botão quando o modo continuo for ativado.

O resultado de nosso app é este:

Não precisamos instalar nenhuma dependência externa em nossa aplicação. Isso mostra que os navegadores evoluíram muito e possuem muitos recursos poderosos e pouco utilizados por desenvolvedores.

O projeto está atualizado no meu github e você pode clona-lo ou baixa-lo através do link:

https://github.com/patrickmonteiro/quasar-speech-api

Ou acessar a DEMO: https://quasarspeechapi.surge.sh/#/