Live Translate

Live Translate thumbnail image

Initiated on 9 August 2022

  • [Vue.js 3]
  • [Tailwind CSS]
  • [DaisyUI]
  • [Vercel]

Table of Contents

  1. About The Project
  2. Translate API

At the time, I was curious on how would I understand these Japanese Vtubers streams’. I tried to use free online transcribing services, but they can’t translate anything.

To make this into reality I just need 2 things:

  • Speech Recognition
  • Translation

After looking around, I found that Google Chrome has a built-in API for speech recognition, and there’s a “legal” Google Translate library for Node. So then I started making this.


This single-page website is made with Vue.js v3 and Vite 3, and Tailwind CSS and daisyUI for the user interface. The project is fairly simple, it’s to make use of Web Speech API and using an external API to translate the transcriptions.

About The Project

This single-page website is made with Vue.js v3 and Vite 3, and Tailwind CSS and daisyUI for the user interface. The project is fairly simple, it’s to make use of Web Speech API and using an external API to translate the transcriptions. Read Translate API section below for explanations regarding the translation API.

Note: The Web Speech API is not supported by every major browsers, this is why I explicitly mentioned Google Chrome and not the others, for compatibilities check this page by MDN.

Translate API

The API uses @vitalets/google-translate-api package for translation. To host your own API for translation, copy the api folder and deploy it on Vercel.