Integrating Speech-to-Text API in React: Building a Web Audio App

Converting speech into text automatically is a critical requirement for modern web applications. However, a major challenge for developers is accurately processing Vietnamese and language mixing (code-switching). In this guide, we explore how to integrate a Speech-to-Text API in React to build a professional web audio app, optimized for Vietnamese users.

Why Integrate a Speech-to-Text API in React?

React is currently the most popular frontend library, enabling the creation of highly interactive user interfaces. When combined with Speech-to-Text (STT) technology, you can create features such as voice notes, real-time translation, and virtual assistants.

Instead of building complex speech recognition models from scratch, using an API from a specialized provider saves time and cost. Specifically for Vietnamese, handling punctuation, homophones, and interspersed English words requires a model specifically trained for these nuances.

Benefits of a Specialized STT API

• High Accuracy: Models trained on large volumes of Vietnamese data minimize recognition errors.
• Code-switching Support: The ability to recognize both Vietnamese and English within the same sentence is a crucial feature in the Vietnamese business environment.
• Real-time Capability: Support for streaming over WebSocket allows text to appear as the user is speaking.
• Low Latency: Suitable for conversational applications and live recording.

Environment Setup and Installation

To get started, you need a basic React project. Ensure you have axios installed or use the native fetch API to call the service.

npx create-react-app my-stt-app
cd my-stt-app
npm install axios

You also need to register an account and obtain an API Key from the service provider. For AIVISION, you can create your API Key directly in the console after signing up.

Building the Recorder Component

The most complex part of web audio recording is handling sound from the microphone. Instead of using complex libraries, you can leverage the MediaRecorder API available in modern browsers.

Here is the basic structure of an AudioRecorder component:

1. Access Microphone: Use navigator.mediaDevices.getUserMedia.
2. Record: Initialize MediaRecorder to collect audio data.
3. Transmit Data: Send the audio blob to the server or stream it directly via WebSocket.

import React, { useState, useRef } from 'react';

const AudioRecorder = () => {
    const [isRecording, setIsRecording] = useState(false);
    const mediaRecorderRef = useRef(null);

    const startRecording = async () => {
        try {
            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
            const mediaRecorder = new MediaRecorder(stream);
            mediaRecorderRef.current = mediaRecorder;
      
            const chunks = [];
            mediaRecorder.ondataavailable = (e) => chunks.push(e.data);
            mediaRecorder.onstop = () => {
                const blob = new Blob(chunks, { type: "audio/webm" });
                handleAudio(blob); // Call audio processing function
            };
      
            mediaRecorder.start();
            setIsRecording(true);
        } catch (err) {
            console.error("Error accessing microphone:", err);
        }
    };

    const stopRecording = () => {
        if (mediaRecorderRef.current) {
            mediaRecorderRef.current.stop();
            setIsRecording(false);
        }
    };

    // ... audio processing and API call logic
};

export default AudioRecorder;

Integrating the STT API with React

There are two main ways to integrate STT into your React application:

1. File Transcription

This method is suitable when the user records audio first and then submits it. You upload the audio file to the server, and the server returns the text result.

const handleAudio = async (blob) => {
    const formData = new FormData();
    formData.append('file', blob, 'recording.webm');
  
    try {
        const response = await fetch('https://api.s2speech.com/v1/audio/transcriptions', {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${API_KEY}`
            },
            body: formData
        });
    
        const data = await response.json();
        setTranscript(data.text);
    } catch (error) {
        console.error('Transcription failed', error);
    }
};

2. Real-time Streaming

For applications requiring low latency, you should use WebSocket. This method allows text to appear as the user is speaking, creating a smoother experience.

const connectWebSocket = () => {
    const ws = new WebSocket('wss://api.s2speech.com/v1/stream');
  
    ws.onopen = () => {
        console.log('Connected to STT Server');
    };
  
    ws.onmessage = (event) => {
        const data = JSON.parse(event.data);
        setTranscript(prev => prev + data.text);
    };
  
    // Send audio chunks from MediaRecorder via ws.send()
};

Data Processing and Displaying Results

After receiving text data from the API, you need to process it for display. A few key points to note:

• Word Timestamps: If the API supports it, store the time position of each word. This is useful for synchronizing text with audio in editing applications.
• Text Formatting: Add automatic punctuation to make the text more readable.
• History: Save previous records so users can review them.

Tips for Optimizing User Experience

When building a web audio app, user experience (UX) is decisive. Here are some practical tips:

1. Instant Feedback: Clearly display statuses like "Recording..." or "Processing...".
2. Error Handling: Check if the user has granted microphone access. If not, guide them on how to grant permission.
3. Data Optimization: Compress audio files before sending them to the server to save bandwidth.
4. Multilingual Support: If your user base includes non-native speakers, choose an STT service that supports multiple languages. AIVISION supports 24 languages, with Vietnamese specifically optimized for high accuracy on independent test datasets.

Comparison of Integration Methods

Criteria	Upload File (REST)	Streaming (WebSocket)
Latency	High (must wait for recording to finish)	Low (real-time)
Implementation Complexity	Low	Higher
Best For	Notes, interviews	Conversation, live translation
Bandwidth Cost	High (sending large files)	Low (sending small streams)

Conclusion

Integrating a Speech-to-Text API in React is a crucial step to modernizing your web application. By using specialized APIs, you can provide accurate web audio features, especially for Vietnamese, without investing heavily in building AI models from scratch.

Start by experimenting with simple APIs, then upgrade to real-time streaming if your application requires it. If you are looking for a Speech-to-Text solution optimized for Vietnamese, consider the services at s2speech.com. You can Start free to experience the accuracy of the Vietnamese AI model and test code-switching capabilities today.

Frequently asked questions

What is a Speech-to-Text API in React?

It is the integration of Speech-to-Text technology into applications built with the React library, allowing users to record audio and receive text results directly in the browser.

How can I record audio on the web without installing software?

You can use the MediaRecorder API available in modern browsers like Chrome, Firefox, or Safari to capture audio directly from the microphone and send the data to the server.

Does AIVISION support Vietnamese and English simultaneously?

Yes, AIVISION Speech-to-Text is designed to handle language mixing (code-switching) effectively, accurately recognizing both Vietnamese and English within the same sentence.

Can I try AIVISION for free?

You can register an account at [Start free](/signup) to receive an API Key and start integrating it into your React project immediately.

#Speech-to-Text API#React#Web Audio#Real-time Streaming#Vietnamese STT#Code-switching#AIVISION