Speech Recognition PWA: Vue Speech


A PWA able to recognize speech powered by Vue.js & the Google Cloud Speech API. This app when running records a message and making use of Google services recognizes the recorded message from the user, based on the chosen language and then displays it with high accuracy.

Styling of the project was made with Vuetify.

This app is a very good example of the integration of Google services to Vue.js projects. Take a look below to see how to run it yourself.

Instalation & Usage


Initially, you have to enable the Cloud Speech API on a project, (if you don't have one you can create a new one).

  1. Enable the Cloud Speech API for your project.

Inside the Cloud Platform Console, you will be asked to enable billing, (there is no need for payment, currently there is a quite good free trial, you only have to provide credit card info but no charges will be made unless you choose to).

  1. Initialize Firebase At Speech.vue using the Google Cloud API Browser Key.

Create a new API key from the Google console and open Speech.vue file to fill your key.

apiKey: ""

Then you can clone the project using the command:

git clone https://github.com/aofdev/vue-pwa-speech.git

Cd the project

cd vue-firebase-auth-vuex

Install its dependencies

npm install || yarn install

You can now serve with hot reload at localhost:8080

npm run dev || yarn dev

Build for production with minification and to build Progressive Web Apps

npm run build || yarn build

That's it! You can now record messages via your microphone and see them on display. All these recordings, errors & other info can be monitored through the Google Cloud Speech API console in your project.

If you don't need to use this app further, don't forget to disable your API Key.

PWA vue-speech is open-source & hosted on GitHub under an MIT license. More on Voice Recognition in this article.