Crypto Flexs
  • DIRECTORY
  • CRYPTO
    • ETHEREUM
    • BITCOIN
    • ALTCOIN
  • BLOCKCHAIN
  • EXCHANGE
  • ADOPTION
  • TRADING
  • HACKING
  • SLOT
  • TRADE
Crypto Flexs
  • DIRECTORY
  • CRYPTO
    • ETHEREUM
    • BITCOIN
    • ALTCOIN
  • BLOCKCHAIN
  • EXCHANGE
  • ADOPTION
  • TRADING
  • HACKING
  • SLOT
  • TRADE
Crypto Flexs
Home»ADOPTION NEWS»Building Real-Time Language Translation in JavaScript with AssemblyAI and DeepL
ADOPTION NEWS

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

By Crypto FlexsJuly 14, 20244 Mins Read
Facebook Twitter Pinterest LinkedIn Tumblr Email
Building Real-Time Language Translation in JavaScript with AssemblyAI and DeepL
Share
Facebook Twitter LinkedIn Pinterest Email

Ted Hisokawa
July 14, 2024 05:20

Learn how to build a real-time language translation service in JavaScript using AssemblyAI and DeepL. A step-by-step guide for developers.





AssemblyAI provides insight into how to build a real-time language translation service using JavaScript in a comprehensive tutorial. The tutorial leverages AssemblyAI to perform real-time speech-to-text conversion and leverages DeepL to translate the converted text into multiple languages.

Introducing Real-Time Translation

Translation plays a vital role in communication and accessibility across languages. For example, foreign tourists may have difficulty communicating if they do not understand the local language. AssemblyAI’s Streaming Speech-to-Text service transcribes speech in real time and then translates it using DeepL to enable seamless communication.

Project Settings

The tutorial starts by setting up a Node.js project. The required dependencies are installed, including Express.js to create a simple server, dotenv to manage 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

The API keys for AssemblyAI and DeepL are stored in the .env file to keep them secure and prevent them from being exposed to the frontend.

Create backend

The backend is designed to keep API keys safe and generate temporary tokens for secure communication with the AssemblyAI and DeepL APIs. Routes are defined to provide 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`);
);

Front-end development

The frontend consists of an HTML page with text areas for displaying transcripts and translations, and buttons to start and stop recording. The AssemblyAI SDK and RecordRTC library are used for real-time audio recording and transcription.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Voice Recorder with Transcription</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div class="min-h-screen flex flex-col items-center justify-center bg-gray-100 p-4">
      <div class="w-full max-w-6xl bg-white shadow-md rounded-lg p-4 flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
        <div class="flex-1">
          <label for="transcript" class="block text-sm font-medium text-gray-700">Transcript</label>
          <textarea id="transcript" rows="20" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm"></textarea>
        </div>
        <div class="flex-1">
          <label for="translation" class="block text-sm font-medium text-gray-700">Translation</label>
          <select id="translation-language" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm">
            <option value="es">Spanish</option>
            <option value="fr">French</option>
            <option value="de">German</option>
            <option value="zh">Chinese</option>
          </select>
          <textarea id="translation" rows="18" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm"></textarea>
        </div>
      </div>
      <button id="record-button" class="mt-4 px-6 py-2 bg-blue-500 text-white rounded-md shadow">Record</button>
    </div>
    <script src="https://www.unpkg.com/assemblyai@latest/dist/assemblyai.umd.min.js"></script>
    <script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script>
    <script src="main.js"></script>
  </body>
</html>

Real-time transcription and translation

The main.js file handles audio recording, transcription, and translation. The AssemblyAI real-time transcription service processes the audio, and the DeepL API translates the final transcription into the language of your choice.

const recordBtn = document.getElementById("record-button");
const transcript = document.getElementById("transcript");
const translationLanguage = document.getElementById("translation-language");
const translation = document.getElementById("translation");

let isRecording = false;
let recorder;
let rt;

const run = async () => {
  if (isRecording) 
    if (rt) 
      await rt.close(false);
      rt = null;
    
    if (recorder) 
      recorder.stopRecording();
      recorder = null;
    
    recordBtn.innerText = "Record";
    transcript.innerText = "";
    translation.innerText = "";
   else {
    recordBtn.innerText = "Loading...";
    const response = await fetch("/token");
    const data = await response.json();
    rt = new assemblyai.RealtimeService( token: data.token );
    const texts = ;
    let translatedText = "";
    rt.on("transcript", async (message) => 
      let msg = "";
      texts(message.audio_start) = message.text;
      const keys = Object.keys(texts);
      keys.sort((a, b) => a - b);
      for (const key of keys) 
        if (texts(key)) 
          msg += ` $texts(key)`;
        
      
      transcript.innerText = msg;
      if (message.message_type === "FinalTranscript") 
        const response = await fetch("/translate", 
          method: "POST",
          headers: 
            "Content-Type": "application/json",
          ,
          body: JSON.stringify(
            text: message.text,
            target_lang: translationLanguage.value,
          ),
        );
        const data = await response.json();
        translatedText += ` $data.translation.text`;
        translation.innerText = translatedText;
      
    );
    rt.on("error", async (error) => 
      console.error(error);
      await rt.close();
    );
    rt.on("close", (event) => 
      console.log(event);
      rt = null;
    );
    await rt.connect();
    navigator.mediaDevices
      .getUserMedia( audio: true )
      .then((stream) => 
        recorder = new RecordRTC(stream, 
          type: "audio",
          mimeType: "audio/webm;codecs=pcm",
          recorderType: StereoAudioRecorder,
          timeSlice: 250,
          desiredSampRate: 16000,
          numberOfAudioChannels: 1,
          bufferSize: 16384,
          audioBitsPerSecond: 128000,
          ondataavailable: async (blob) => 
            if (rt) 
              rt.sendAudio(await blob.arrayBuffer());
            
          ,
        );
        recorder.startRecording();
        recordBtn.innerText = "Stop Recording";
      )
      .catch((err) => console.error(err));
  }
  isRecording = !isRecording;
};
recordBtn.addEventListener("click", () => 
  run();
);

conclusion

This tutorial shows how to build a real-time language translation service using AssemblyAI and DeepL in JavaScript. These tools can significantly improve user communication and accessibility in a variety of linguistic contexts. For more detailed instructions, visit the original AssemblyAI tutorial.

Image source: Shutterstock


Share. Facebook Twitter Pinterest LinkedIn Tumblr Email

Related Posts

Gala Games improves leader board rewards and introduces preference systems.

June 20, 2025

Ether Leeum Whale starts a $ 11 million leverage betting in the 30% increase in ETH prices.

June 12, 2025

AI starts a cost -effective batch API for LLM request.

June 12, 2025
Add A Comment

Comments are closed.

Recent Posts

No Altcoin Season 2025 ? Why Bitcoin Dominance Is Holding Strong In The Crypto Market

June 28, 2025

Why It Matters For Every Crypto Investor

June 27, 2025

Why It Matters For Every Crypto Investor

June 27, 2025

Safe smart account audit summary

June 27, 2025

CARV’s New Roadmap Signals Next Wave Of Web3 AI

June 27, 2025

CARV’s New Roadmap Signals Next Wave Of Web3 AI

June 27, 2025

Bybit Expands Global Reach With Credit Card Crypto Purchases In 25+ Currencies And Cashback Rewards

June 27, 2025

BYDFi Joins Seoul Meta Week 2025, Advancing Web3 Vision And South Korea Strategy

June 27, 2025

Earns $9,800 Per Day With BTC Breaks Through $107,000, GoldenMining Global Market.

June 27, 2025

Why Bakkt Holdings can buy Bitcoin with a $ 1 billion increase

June 27, 2025

NVIDIA RTX strengthens FITY’s AI -centered innovation in Cooler Design.

June 27, 2025

Crypto Flexs is a Professional Cryptocurrency News Platform. Here we will provide you only interesting content, which you will like very much. We’re dedicated to providing you the best of Cryptocurrency. We hope you enjoy our Cryptocurrency News as much as we enjoy offering them to you.

Contact Us : Partner(@)Cryptoflexs.com

Top Insights

No Altcoin Season 2025 ? Why Bitcoin Dominance Is Holding Strong In The Crypto Market

June 28, 2025

Why It Matters For Every Crypto Investor

June 27, 2025

Why It Matters For Every Crypto Investor

June 27, 2025
Most Popular

Paxos Receives Approval for Expansion to Solana from New York Regulators

December 22, 2023

A guide to crypto trading bots: Analyzing strategies and performance

April 22, 2025

Ethereum ÐΞV Update II by Gav

May 25, 2024
  • Home
  • About Us
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions
© 2025 Crypto Flexs

Type above and press Enter to search. Press Esc to cancel.