SpeakEase

Your Voice, Our Text, Any Language

Comment

Inspiration

The idea for this project was born from the need to bridge language barriers and make communication more accessible to everyone. Worldwide, there are more than 1.5 billion people who suffer from hearing loss, and more than 50% of them don't have the financial stability to get medical aid. Inspired by the growing demand for multilingual support in applications and the increasing importance of speech recognition technology, this app aims to provide a seamless experience for converting speech to text and translating it into various languages.

According to the World Health Organization (WHO), there are approximately 63 million people in India who suffer from significant auditory impairment. This statistic highlights the urgent need for accessible communication tools that can help individuals with hearing disabilities engage more effectively with the world around them. By providing speech-to-text and translation functionalities, this app can play a crucial role in enhancing their communication capabilities, allowing them to participate more fully in educational, social, and professional environments.

What It Does

SpeakEase offers a seamless solution for converting speech to text and translating it into various languages. It provides the following functionalities:

  • Speech Recognition: Captures spoken words and converts them into written text using the Web Speech API. This allows users to easily transcribe their speech.
  • Language Selection: Supports multiple languages, enabling users to choose their source and target languages for transcription and translation.
  • Text Translation: Utilizes a translation API to translate the transcribed text into the selected target language, facilitating multilingual communication.
  • Text Export: Allows users to save their transcriptions as text files for future reference or sharing.
  • User Interface: Features an intuitive design with dropdowns for language selection, buttons for recording control, and areas to display both the original and translated text.

How We Built It

  • Setting Up the React App: Initialized the project with Create React App and established the foundational structure. bash npx create-react-app speakease cd speakease npm start
  • Integrating Speech Recognition: Implemented speech recognition using the Web Speech API to convert speech into text. javascript const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; const recognition = new SpeechRecognition(); recognition.lang = 'en-US'; recognition.onresult = (event) => { console.log(event.results[0][0].transcript); }; recognition.start();
  • Adding Language Support: Defined language codes and incorporated functionality to switch between source and target languages. javascript const languageCodes = { english: 'en', spanish: 'es', french: 'fr', german: 'de', italian: 'it', tamil: 'ta', portuguese: 'pt', dutch: 'nl', russian: 'ru', chinese: 'zh' };
  • Implementing Translation Feature: Integrated a translation API to handle the conversion of transcribed text into various languages. javascript const translateText = async (text, sourceLang, targetLang) => { const response = await fetch(`https://api.mymemory.translated.net/get?q=${encodeURIComponent(text)}&langpair=${languageCodes[sourceLang]}|${languageCodes[targetLang]}`); const data = await response.json(); return data.responseData.translatedText; };
  • Designing the User Interface: Created a user-friendly UI with language selection dropdowns, recording buttons, and text display areas. jsx <select id="source-language" value={sourceLanguage} onChange={(e) => setSourceLanguage(e.target.value)} > {Object.keys(languageCodes).map(lang => ( <option key={lang} value={lang}> {lang.charAt(0).toUpperCase() + lang.slice(1)} </option> ))} </select>
  • Handling Errors: Added error handling for speech recognition and translation processes to ensure reliability and a smooth user experience. javascript recognition.onerror = (event) => { console.error('An error occurred during speech recognition.', event); };

Challenges We Ran Into

  • Browser Compatibility: Ensuring consistent performance of the Speech Recognition API across different browsers and handling unsupported cases.
  • Accurate Transcription: Addressing issues with the accuracy of speech recognition and improving the transcription quality.
  • API Limitations: Managing the limitations and rate limits of the translation API and handling errors gracefully.
  • User Experience: Designing an intuitive interface that is easy to navigate and provides clear feedback to users.

Accomplishments That We're Proud Of

  • Successful Integration of Multiple Features: Effectively combined speech recognition and translation functionalities in a single app.
  • Multi-Language Support: Implemented support for a diverse range of languages, enhancing accessibility and usability.
  • User-Friendly Interface: Developed a simple and intuitive UI that makes the app easy to use for a wide audience.
  • Error Handling and Stability: Ensured that the app handles errors effectively and maintains stability even when encountering issues.

What We Learned

  • Advanced Use of APIs: Gained experience in integrating and utilizing speech recognition and translation APIs.
  • React Hooks: Enhanced understanding of React hooks such as useState and useEffect for managing state and side effects.
  • Asynchronous Operations: Improved skills in handling asynchronous API calls and managing data flow within the application.
  • UI/UX Design: Learned about creating user-friendly interfaces and addressing user experience challenges.

What's Next for SpeakEase

  • Expanding Language Support: Adding more languages and dialects to further enhance the app’s reach and usability.
  • Improving Transcription Accuracy: Implementing advanced techniques to increase the accuracy of speech-to-text conversion.
  • Enhancing User Experience: Refining the UI/UX based on user feedback to ensure a more intuitive and responsive experience.
  • Exploring Additional Features: Considering the integration of voice commands, real-time translation, and other innovative features to improve functionality and user engagement.

Built With

Share this project:

Updates