text to speech

In this code, you'll need to replace YOUR_API_KEY in the <script> tag with your actual ResponsiveVoice API key. Make sure you sign up on the ResponsiveVoice website (https://responsivevoice.com) to obtain an API key.

This code creates a simple interface with a text area where you can enter the text to be converted to speech. You can select the desired language from a dropdown list, and upon clicking the "Speak" button, the text will be spoken using the selected language. The styling is done using CSS, including colorful styling for the "Speak" button.

Remember to substitute the YOUR_API_KEY with your actual API key from ResponsiveVoice. Additionally, you can customize the styling further by modifying the CSS rules according to your preferences

<!DOCTYPE html>

<html>

<head>

  <title>Text-to-Speech Converter</title>

  <style>

    body {

      font-family: Arial, sans-serif;

      background-color: #f2f2f2;

    }

    h1 {

      color: #333;

    }

    #text-input {

      width: 300px;

      height: 100px;

      margin-bottom: 10px;

    }

    #language-select {

      margin-bottom: 10px;

    }

    #speak-btn {

      padding: 10px 20px;

      background-color: #4CAF50;

      border: none;

      color: white;

      font-size: 16px;

      cursor: pointer;

    }

  </style>

</head>

<body>

  <h1>Text-to-Speech Converter</h1>

  <textarea id="text-input" placeholder="Enter text..."></textarea>

  <label for="language-select">Select a language:</label>

  <select id="language-select">

    <option value="en-US">English (US)</option>

    <option value="en-GB">English (UK)</option>

    <option value="es-ES">Spanish (Spain)</option>

    <option value="fr-FR">French (France)</option>

    <!-- Add more language options as needed -->

  </select>

  <button id="speak-btn">Speak</button>

  <script src="https://code.responsivevoice.org/responsivevoice.js?key=YOUR_API_KEY"></script>

  <script>

    // Ensure the ResponsiveVoice library is loaded before executing code

    window.onload = function () {

      var speakButton = document.getElementById("speak-btn");

      speakButton.addEventListener("click", function () {

        var textInput = document.getElementById("text-input").value;

        var languageSelect = document.getElementById("language-select");

        var selectedLanguage = languageSelect.options[languageSelect.selectedIndex].value;

        responsiveVoice.speak(textInput, selectedLanguage);

      });

    };

  </script>

</body>

</html>