Implements Google Chrome's Web Speech API and translates the transcription allowing users to translate speeches in real-time.
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.
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.
To make your own implementation of the API for your platform, make sure to follow these rules:
- Check for CORS headers to allow your website to fetch the API
- POST request endpoint with the following body:
textfor the text to translatetofor target language
- POST request endpoint must return the value from @vitalets/google-translate-api's
translatefunction
You can try the demo here https://translate.sglkc.my.id/.
Or follow these steps below to get the website running on your local machine:
- Clone the repo
git clone https://github.com/sglkc/live-translate.git
cd live-translate- Install npm dependencies
npm install- Copy or rename
.env.exampleto.env - Enter your translate API endpoint in
.env(You may also want to change translation interval here) - Compile and minify for production
npm run buildEvery contributions are greatly appreciated! You can start by forking this repository then create a pull request.
- Fork the repository
- Create your branch (
git checkout -b new-feature) - Commit your changes (
git commit -m 'feat: add new command') - Push to the branch (
git push origin new-feature) - Open a pull request
Distributed under the MIT License. See LICENSE for more information.