Free Speech Synthesizer with HTML CSS and JavaScript

document.addEventListener('DOMContentLoaded', () => {
  const synth = window.speechSynthesis;
  const inputText = document.getElementById('text-input');
  const selectLanguage = document.getElementById('language-select');
  const selectVoice = document.getElementById('voice-select');
  const speakButton = document.getElementById('speak-button');
  const logOutput = document.getElementById('log-output');

  let voices = [];

  function log(message, type = 'info') {
    console.log(message);
    const p = document.createElement('p');
    p.textContent = `> ${message}`;
    p.classList.add(`log-${type}`);
    logOutput.appendChild(p);
    logOutput.scrollTop = logOutput.scrollHeight;
  }

  function getGenderFromName(name) {
    const lowerCaseName = name.toLowerCase();
    const maleNames = ['jack', 'derrick', 'amarnath', 'joel'];
    const femaleNames = [
      'deepti',
      'pamila',
      'leena',
      'suzane',
      'kalpana',
      'zira',
      'sherina',
    ];
    if (maleNames.some((maleName) => lowerCaseName.includes(maleName)))
      return '(Male)';
    if (femaleNames.some((femaleName) => lowerCaseName.includes(femaleName)))
      return '(Female)';
    return '';
  }

  function populateVoiceList(language) {
    const voicesForLanguage = voices.filter((voice) => voice.lang === language);
    selectVoice.innerHTML = '';

    if (voicesForLanguage.length > 0) {
      voicesForLanguage.forEach((voice) => {
        const option = document.createElement('option');
        const gender = getGenderFromName(voice.name);
        option.textContent = `${voice.name} ${gender}`;
        option.setAttribute('data-name', voice.name);
        selectVoice.appendChild(option);
      });
      log(
        `Populated ${voicesForLanguage.length} voices for language: ${language}.`
      );
    } else {
      log(`No voices found for language: ${language}.`, 'error');
    }
  }

  function initialize() {
    voices = synth.getVoices();
    if (voices.length === 0) {
      log('No voices loaded yet. Retrying in a moment...', 'error');
      setTimeout(initialize, 100); // Retry if voices aren't loaded immediately
      return;
    }

    log(`Found ${voices.length} total voices.`, 'success');

    const languages = [...new Set(voices.map((voice) => voice.lang))];
    selectLanguage.innerHTML = '';

    const langNames = new Intl.DisplayNames(['en'], { type: 'language' });

    languages.forEach((lang) => {
      const option = document.createElement('option');
      option.value = lang;
      // Format 'en-US' to 'English (United States)'
      try {
        const regionNames = new Intl.DisplayNames(['en'], { type: 'region' });
        const parts = lang.split('-');
        const langName = langNames.of(parts[0]);
        const regionName = parts[1] ? ` (${regionNames.of(parts[1])})` : '';
        option.textContent = `${langName}${regionName}`;
      } catch (e) {
        option.textContent = lang; // Fallback for complex tags
      }
      selectLanguage.appendChild(option);
    });

    // Set default to Hindi if available, otherwise the first language
    const defaultLang = languages.includes('hi-IN') ? 'hi-IN' : languages[0];
    selectLanguage.value = defaultLang;
    populateVoiceList(defaultLang);

    speakButton.disabled = false;
    log('Generator is ready!', 'success');
  }

  function speak() {
    if (synth.speaking) {
      synth.cancel(); // If speaking, the button becomes a 'Stop' button
      return;
    }
    if (inputText.value !== '') {
      const utterThis = new SpeechSynthesisUtterance(inputText.value);
      const selectedVoiceName =
        selectVoice.selectedOptions[0]?.getAttribute('data-name');

      if (!selectedVoiceName) {
        log('Error: No voice selected.', 'error');
        return;
      }

      utterThis.voice = voices.find(
        (voice) => voice.name === selectedVoiceName
      );
      utterThis.lang = selectLanguage.value;

      utterThis.onstart = () => {
        speakButton.textContent = 'Stop';
      };
      utterThis.onend = () => {
        speakButton.textContent = 'Speak';
      };
      utterThis.onerror = (e) => {
        log(`An error occurred: ${e.error}`, 'error');
        speakButton.textContent = 'Speak';
      };
      synth.speak(utterThis);
    }
  }

  if ('speechSynthesis' in window) {
    log('Web Speech API is supported.', 'success');
    // The 'voiceschanged' event is the primary trigger for loading voices.
    synth.onvoiceschanged = initialize;
    // Call initialize directly as a fallback for some browsers.
    initialize();
  } else {
    log('Error: Web Speech API is not supported by this browser.', 'error');
    speakButton.disabled = true;
    speakButton.textContent = 'Not Supported';
  }

  selectLanguage.addEventListener('change', () => {
    populateVoiceList(selectLanguage.value);
  });
  speakButton.addEventListener('click', speak);
});