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).
- 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).
- Initialize Firebase At
Speech.vueusing the Google Cloud API Browser Key.
Create a new API key from the Google console and open
Speech.vue file to fill your key.
Then you can clone the project using the command:
git clone https://github.com/aofdev/vue-pwa-speech.git
Cd the project
//ex. cd vue-firebase-auth-vuex
Install its dependencies
npm install || yarn install
You can now serve with hot reload at
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.