Crypto Flexs
  • DIRECTORY
  • CRYPTO
    • ETHEREUM
    • BITCOIN
    • ALTCOIN
  • BLOCKCHAIN
  • EXCHANGE
  • TRADING
  • HACKING
  • SLOT
  • CASINO
  • SUBMIT
Crypto Flexs
  • DIRECTORY
  • CRYPTO
    • ETHEREUM
    • BITCOIN
    • ALTCOIN
  • BLOCKCHAIN
  • EXCHANGE
  • TRADING
  • HACKING
  • SLOT
  • CASINO
  • SUBMIT
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

Bitcoin Treasury Firm Strive adds an industry veterans and starts a new $ 950 million capital initiative.

September 16, 2025

The best Solana depin project to form the future -Part 2

September 8, 2025

Ether Lee (ETH) tests major support for $ 4,453 after the highest rejection.

August 31, 2025
Add A Comment

Comments are closed.

Recent Posts

Green Hood Contracts Thanksgiving Summary -Ackee Blockchain

September 17, 2025

BetFury Is At SBC Summit Lisbon 2025: Affiliate Growth In Focus

September 17, 2025

FED Mining’s Cloud Mining Platform Is Helping Users Earn $8,800 Per Day, And XRP’s Growth Is Driving Market Enthusiasm.

September 17, 2025

Stablecoin Holdings Drop As Investors Pivot To SOL, XRP, And Altcoins

September 17, 2025

Flipster Partners With WLFI To Advance Global Stablecoin Adoption Through USD1 Integration

September 17, 2025

Zircuit Launches $495K Grants Program To Accelerate Web3 Super Apps

September 16, 2025

Kintsu Launches SHYPE On Hyperliquid

September 16, 2025

New Cryptocurrency Mutuum Finance (MUTM) Raises $15.8M As Phase 6 Reaches 40%

September 16, 2025

How XRP Enthusiasts Can Earn $15k/Day

September 16, 2025

Bringing 1R0R To R0AR Chain Unlocks New Incentives

September 16, 2025

As the Air drop recipient is sold, the infinite price is 46% conflict after Binance listing.

September 16, 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

Green Hood Contracts Thanksgiving Summary -Ackee Blockchain

September 17, 2025

BetFury Is At SBC Summit Lisbon 2025: Affiliate Growth In Focus

September 17, 2025

FED Mining’s Cloud Mining Platform Is Helping Users Earn $8,800 Per Day, And XRP’s Growth Is Driving Market Enthusiasm.

September 17, 2025
Most Popular

Presales for Shiba Memu are targeting $5 million. Is it a good idea to buy memecoin now?

December 13, 2023

Rep. McHenry seeks action to repeal SEC accounting bulletin ‘across the finish line’.

February 2, 2024

Solana’s Phantom Wallet is Down: What Happened?

October 29, 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.