Node.js Express Speech Translator Live Web App Using Google Translate API Tutorial For Beginners 2020

Node.js Express Speech Translator Live Web App Using Google Translate API Tutorial For Beginners 2020

 

 

Live Demo

 

You can see the live demo of the app at this link here

 

 

Get Started

 

 

In order to get started you need to install these dependencies inside your node.js project as follows

 

npm i express

 

npm i nodemon

 

npm i @vitalets/google-translate-api

 

 

Install these dependencies inside your project and then make the index.js  file and copy paste the following code to it

 

 

index.js

 

 

const express = require("express");

const bodyParser = require("body-parser");

const translate = require('@vitalets/google-translate-api');

const app = express();

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

const PORT = process.env.PORT || 5000;


app.get('/speechtranslator',(req,res) => {
  res.render('speechtranslator',{title:"Speech Translator Online to Multiple Languages - Free Media Tools",translated:""})
})

app.post('/speechtranslator',(req,res) => {

  console.log(req.body.speech)

  translate(req.body.speech, {to: req.body.language}).then(response => {
    res.render('speechtranslator',{title:"Speech Translator Online to Multiple Languages - Free Media Tools",translated:response.text})
}).catch(err => {
    console.error(err);
});

})


app.listen(PORT, () => {
  console.log(`App is listening on Port ${PORT}`);
});

 

 

 

Now after that make the speechtranslator.ejs template inside your views folder inside the node.js project as follows

 

views/speechtranslator.ejs

 

 

speechtranslator.ejs

 

 

<div class="container">
          <h1 class="text-center">
              Speech Translator Online
          </h1>
          <form action="/speechtranslator" method="post">
            <div class="form-group">
                <label for="speech">Write Text:</label>
                <textarea class="form-control" name="speech" required id="" cols="30" rows="10"></textarea>
            </div>

            <div class="form-group">
                <label for="format">Select Language of Voice:</label>
                <select class="form-control" name="language" id="">
                    <option value="af">Afrikaans</option>
                    <option value="sq">Albanian</option>
                    <option value="ar">Arabic</option>
                    <option value="hy">Armenian</option>
                    <option value="ca">Catalan</option>
                    <option value="zh">Chinese</option>
                    <option value="hr">Croatian</option>
                    <option value="cs">Czech</option>
                    <option value="da">Danish</option>
                    <option value="nl">Dutch</option>
                    <option value="en" selected>English</option>
                    <option value="en-au">English (Australia)</option>
                    <option value="en-uk">English (United Kingdom)</option>
                    <option value="en-us">English (United States)</option>
                    <option value="eo">Esperanto</option>
                    <option value="fi">Finnish</option>
                    <option value="fr">French</option>
                    <option value="de">German</option>
                    <option value="el">Greek</option>
                    <option value="ht">Haitian Creole</option>
                    <option value="hi">Hindi</option>
                    <option value="hu">Hungarian</option>
                    <option value="is">Icelandic</option>
                    <option value="id">Indonesian</option>
                    <option value="it">Italian</option>
                    <option value="ja">Japanese</option>
                    <option value="ko">Korean</option>
                    <option value="la">Latin</option>
                    <option value="lv">Latvian</option>
                    <option value="mk">Macedonian</option>
                    <option value="no">Norwegian</option>
                    <option value="pl">Polish</option>
                    <option value="pt">Portuguese</option>
                    <option value="pt-br">Portuguese (Brazil)</option>
                    <option value="ro">Romanian</option>
                    <option value="ru">Russian</option>
                    <option value="sr">Serbian</option>
                    <option value="sk">Slovak</option>
                    <option value="es">Spanish</option>
                    <option value="es-es">Spanish (Spain)</option>
                    <option value="es-us">Spanish (United States)</option>
                    <option value="sw">Swahili</option>
                    <option value="sv">Swedish</option>
                    <option value="ta">Tamil</option>
                    <option value="th">Thai</option>
                    <option value="tr">Turkish</option>
                    <option value="vi">Vietnamese</option>
                    <option value="cy">Welsh</option>
                </select>
            </div>
            <div class="form-group">
                <button class="btn btn-danger btn-block">
                    Translate
                </button>
            </div>
            <div class="form-group">
                <label for="translated">Translated Text:</label>
                <textarea class="form-control" name="translated" id="" cols="30" rows="10"><%=translated%></textarea>
            </div>
        </form>

        <br><br>

 

See also  Node.js Express Merge Multiple PDF Files Using Easy-PDF-Merge Library Full Tutorial 2020

 

 

 

 

 

 

 

 

 

Leave a Reply