js challenge day 23

speech Synthesis

Code

  <script>
    const msg = new SpeechSynthesisUtterance();
    let voices = [];
    const voicesDropdown = document.querySelector('[name="voice"]');
    const options = document.querySelectorAll('[type="range"], [name="text"]');
    const speakButton = document.querySelector('#speak');
    const stopButton = document.querySelector('#stop');

    msg.text = document.querySelector('[name="text"]').value;

    const populateVoices = (e) => {
      voices = e.target.getVoices();
      voicesDropdown.innerHTML = voices.filter(voice => voice.lang.includes("ko"))
        .map(voice => `<option value="${voice.name}">${voice.name} (${voice.lang})</option>`)
        .join("");
    }
    const toggle = (startOver = true) => {
      speechSynthesis.cancel();
      if (startOver) speechSynthesis.speak(msg);

    }
    const setVoice = (e) => {
      msg.voice = voices.find(voice => voice.name === e.target.value);
      toggle();
    }
    const setOption = (e) => {
      msg[e.target.name] = e.target.value;
      toggle();
    }
    speechSynthesis.addEventListener('voiceschanged', populateVoices);
    voicesDropdown.addEventListener('change', setVoice);
    options.forEach(option => option.addEventListener('change', setOption));
    speakButton.addEventListener('click', toggle);
    stopButton.addEventListener('click', () => toggle(false));
  </script>

배운 점 & 느낀 점

SpeechSynthesisUtterance라는 webApi를 이용해서 text를 읽어주는 과제였습니다.

속도나, 억양을 선택할 수 있었습니다.

재밌는 과제였고, 언젠간 쓸날이 있지않을까 ? 하는 생각이 들었습니다..