// Web Speech API の 音声認識を設定
SpeechRecognition = webkitSpeechRecognition || SpeechRecognition;
let recognition = new SpeechRecognition();

// 音声認識の開始・停止
const speechBtn = document.querySelector('#speech-btn');

let speechToText = false;

const stop = () => {
  recognition.stop();
  speechBtn.textContent = "Speech to Text";
  speechBtn.style.color = "#000";
  speechBtn.style.background = "#fff";
};

const start = () => {
  recognition.start();
  speechBtn.textContent = "Stop";
  speechBtn.style.color = "#fff";
  speechBtn.style.background = "red";
};

speechBtn.addEventListener("click", event => {
  speechToText ? stop() : start();
  speechToText = !speechToText;
})

// 音声認識結果の受け取り
const readme = document.querySelector('#readme');

recognition.interimResults = true;
recognition.continuous = true;

let finalTranscript = '';
recognition.onresult = (event) => {
  let interimTranscript = '';
  for (let i = event.resultIndex; i < event.results.length; i++) {
    let transcript = event.results[i][0].transcript;
    if (event.results[i].isFinal) {
      finalTranscript += transcript;
    } else {
      interimTranscript = transcript;
    }
  }
  readme.innerHTML = finalTranscript + '' + interimTranscript + '';
}

// select 要素の生成
const voiceSelect = document.querySelector('#voice-select');

function appendVoices() {
  const voices = speechSynthesis.getVoices();
  voiceSelect.innerHTML = '';
  voices.forEach(voice => {
    const option = document.createElement('option');
    option.value = voice.name;
    option.lang = voice.lang;
    option.text = `${voice.name} (${voice.lang})`;
    option.setAttribute('id', voice.name);
    voiceSelect.appendChild(option);
  });

  const lang = document.createElement('option');
  lang.text = `Select a Language & Voice`;
  lang.setAttribute('selected', true);
  lang.setAttribute('disabled', true);
  lang.setAttribute('hidden', true);
  voiceSelect.appendChild(lang);
}

appendVoices()
speechSynthesis.onvoiceschanged = e => {
  appendVoices()
}

voiceSelect.addEventListener('change', (event) => {
  const selectLang = voiceSelect.selectedIndex;
  recognition.lang = voiceSelect.options[selectLang].lang;
});