More

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




    Ted Hisokawa
    Jul 14, 2024 05:20

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





    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.

    
    
      
        
        
        Voice Recorder with Transcription
        
    - Advertisement -

    You might also like...