index.js

'use strict';

window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition;
const synth = window.speechSynthesis;
const recognition = new SpeechRecognition();
recognition.lang = 'fa-IR';

const icon = document.querySelector('i.fa.fa-microphone');
let paragraph = document.createElement('p');
let container = document.querySelector('.text-box');
container.appendChild(paragraph);
const sound = document.querySelector('.sound');

icon.addEventListener('click', () => {
  // sound.play();
  dictate();
});

const dictate = () => {
  recognition.start();
  recognition.onresult = (event) => {
    const speechToText = event.results[0][0].transcript;
    
    paragraph.textContent = speechToText;

    if (event.results[0].isFinal) {

      // if (speechToText.includes('what is the time')) {
      if (speechToText.includes('ساعت چنده')) {
          speak(getTime);
      };
      
      if (speechToText.includes('امروز چه روزيه')) {
          speak(getDate);
      };
      
      if (speechToText.includes('هوای تهران چطوره')) {
          getTheWeather(speechToText);
      };
    }
  };
};

var voiceSelect = document.querySelector('select');
var voices = [];

function populateVoiceList() {
    voices = synth.getVoices();
    var selectedIndex = voiceSelect.selectedIndex < 0 ? 0 : voiceSelect.selectedIndex;
    voiceSelect.innerHTML = '';
    for(var i = 0; i < voices.length ; i++) {
        var option = document.createElement('option');
        option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
        
        if(voices[i].default) {
            option.textContent += ' -- DEFAULT';
        }

        option.setAttribute('data-lang', voices[i].lang);
        option.setAttribute('data-name', voices[i].name);
        voiceSelect.appendChild(option);
    }
    voiceSelect.selectedIndex = selectedIndex;
}

populateVoiceList();

if (speechSynthesis.onvoiceschanged !== undefined) {
    speechSynthesis.onvoiceschanged = populateVoiceList;
}

const speak = (action) => {
  const utterThis = new SpeechSynthesisUtterance(action());
  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
  for(var i = 0; i < voices.length ; i++) {
    if(voices[i].name === selectedOption) {
      utterThis.voice = voices[i];
    }
  }
  synth.speak(utterThis);
};

const getTime = () => {
  const time = new Date(Date.now());
    return `ساعت ${time.toLocaleString('fa-IR', { hour: 'numeric', minute: 'numeric', hour12: true })}`;
};

const getDate = () => {
    const time = new Date(Date.now());
    return `today is ${time.toLocaleDateString('fa-IR')}`;
};

const getTheWeather = (speech) => {
  fetch(`http://api.openweathermap.org/data/2.5/weather?q=${speech.split(' ')[5]}&appid=58b6f7c78582bffab3936dac99c31b25&units=metric`) 
  .then(function(response){
    return response.json();
  })
  .then(function(weather){
    if (weather.cod === '404') {
      const utterThis = new SpeechSynthesisUtterance(`هوای. الآن. تهران. خيلی. خوب و نيمه. بارونيه. ${speech.split(' ')[5]}`);
      synth.speak(utterThis);
      return;
    }
    const utterThis = new SpeechSynthesisUtterance(`هوای الآن تهران ${weather.name} is mostly full of ${weather.weather[0].description} at a temperature of ${weather.main.temp} degrees Celcius`);
    synth.speak(utterThis);
  });
};