Free Text to Speech Converter using JavaScript

Text to Speech (TTS) conversion is a technology that transforms written text into spoken words. This technology has advanced significantly in recent years, driven by developments in machine learning, natural language processing (NLP), and deep learning.

Text to Speech Conversion Steps

The first step involves breaking down the written text into smaller units such as sentences, phrases, words, and phonemes (the smallest units of sound). This process, known as text normalization, converts numbers, abbreviations, and symbols into a format that can be spoken. The next step involves understanding the context, grammar, and meaning of the text. The system determines the correct pronunciation, intonation, and stress for each word based on its context in the sentence. Advanced TTS systems use NLP techniques to achieve this. The final step involves generating the voice output. Modern TTS systems can mimic various accents, tones, and speaking styles. Technologies like WaveNet, developed by DeepMind, use neural networks to produce high-quality, human-like speech.

TTS is crucial for individuals with visual impairments or reading disabilities, providing them with the ability to access written content audibly. Virtual assistants like Siri, Alexa, and Google Assistant rely heavily on TTS to interact with users, provide information, and perform tasks. In today’s fast-paced digital world, technology continues to bridge gaps and break barriers in communication. One such innovation that has transformed the way we interact with information is Text to Speech (TTS) conversion. Text to Speech technology converts written text into spoken words, enabling users to listen to text-based content rather than reading it. This remarkable advancement has not only revolutionized accessibility for people with visual impairments but has also found widespread applications across various industries and daily activities. Text to Speech conversion stands as a testament to the transformative power of technology in amplifying accessibility, enabling cross-cultural communication, and enhancing productivity across diverse domains. From empowering individuals with disabilities to facilitating seamless multilingual communication, TTS technology continues to redefine the way we interact with information in the digital age. As we navigate the evolving landscape of technological innovation, Text to Speech conversion remains a beacon of inclusivity, efficiency, and empowerment in the pursuit of a more accessible and interconnected world. You may also like : Image Steganography : Hiding Text in Images using PHP Text to Speech technology transcends linguistic boundaries, offering multilingual support that enables users to convert text into spoken words in various languages. This feature is invaluable for language learners, travelers, and multicultural communities, as it facilitates communication and comprehension across different languages. By simply converting text into speech, individuals can overcome language barriers and engage with content in their preferred language, fostering cultural exchange and understanding on a global scale. Follow this video for complete guidance : https://www.youtube.com/watch?v=QOHz0q3OBms

Full Source Code

<style type="text/css">

body {
    display: grid;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
    color: #fff;
    background-image: linear-gradient(45deg, #4b5dbb, #72b8db, #08c81c);
    font: 1.25rem/1 'Poppins', sans-serif;
}
.container {
    display: grid;
    gap: 20px;
    width: 600px;
    max-width: calc(100vw - 40px);
    padding: 30px;
    border-radius: 10px;
    background-color: #0003;
}
#text {
    display: block;
    height: 100px;
    padding: 20px;
    border: none;
    font-size: inherit;
    font-family: inherit;
    resize: vertical;
}
#voice{
    width:100%;
    height:50px;
    font-size: 1rem;
}
#speak {
  padding: 10px;
  border: 1px solid #fff;
  color: #fff;
  background-color: #0009;
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
}

</style>

<div class="container">
    <textarea id="text">Hi ! This is the dummy text</textarea>
    <select id="voice"></select>
    <button id="speak">Speak</button>
</div>


<script type="text/javascript">
    const textEl = document.getElementById('text');
    const voiceInEl = document.getElementById('voice');
    const speakEl = document.getElementById('speak');
    speakEl.addEventListener('click', speakText);
    window.speechSynthesis.onvoiceschanged = updateVoices;

    function updateVoices() {
        window.speechSynthesis.getVoices().forEach(voice => {
            const isAlreadyAdded = [...voiceInEl.options].some(option => option.value === voice.voiceURI);
            if (!isAlreadyAdded) {
                const option = new Option(voice.name, voice.voiceURI, voice.default, voice.default);
                voiceInEl.add(option);
            }
        });
    }

    function speakText() {
        // stop any speaking in progress
        window.speechSynthesis.cancel();

        // create new utterance with all the properties
        const text = textEl.value;
        const utterance = new SpeechSynthesisUtterance(text);
        utterance.voice = window.speechSynthesis.getVoices().find(voice => voice.voiceURI === voiceInEl.value);
        utterance.pitch = 1;
        utterance.rate = 1;
        utterance.volume = 1;

        // speak that utterance
        window.speechSynthesis.speak(utterance);
    }

</script>