Building Real-Time Language Translation with AssemblyAI and DeepL in JavaScript

In a comprehensive tutorial, AssemblyAI offers insights into creating a real-time language translation service using JavaScript. The tutorial leverages AssemblyAI for real-time speech-to-text transcription and DeepL for translating the transcribed text into various languages.

Introduction to Real-Time Translation

Translations play a critical role in communication and accessibility across different languages. For instance, a tourist in a foreign country may struggle to communicate if they don’t understand the local language. AssemblyAI’s Streaming Speech-to-Text service can transcribe speech in real-time, which can then be translated using DeepL, making communication seamless.

Setting Up the Project

The tutorial begins with setting up a Node.js project. Essential dependencies are installed, including Express.js for creating a simple server, dotenv for managing environment variables, and the official libraries for AssemblyAI and DeepL.

mkdir real-time-translation
cd real-time-translation
npm init -y
npm install express dotenv assemblyai deepl-node

API keys for AssemblyAI and DeepL are stored in a .env file to keep them secure and avoid exposing them in the frontend.

Creating the Backend

The backend is designed to keep API keys secure and generate temporary tokens for secure communication with the AssemblyAI and DeepL APIs. Routes are defined to serve the frontend and handle token generation and text translation.

const express = require("express");
const deepl = require("deepl-node");
const { AssemblyAI } = require("assemblyai");
require("dotenv").config();

const app = express();
const port = 3000;

app.use(express.static("public"));
app.use(express.json());

app.get("https://blockchain.news/", (req, res) => {
  res.sendFile(__dirname + "/public/index.html");
});

app.get("/token", async (req, res) => {
  const token = await client.realtime.createTemporaryToken({ expires_in: 300 });
  res.json({ token });
});

app.post("/translate", async (req, res) => {
  const { text, target_lang } = req.body;
  const translation = await translator.translateText(text, "en", target_lang);
  res.json({ translation });
});

app.listen(port, () => {
  console.log(`Listening on port ${port}`);
});

Frontend Development

The frontend consists of an HTML page with text areas for displaying the transcription and translation, and a button to start and stop recording. The AssemblyAI SDK and RecordRTC library are utilized for real-time audio recording and transcription.