[JavaScript30] πŸŽ™23. Speech Synthesis

μ‘°μ€€ν˜•Β·2021λ…„ 7μ›” 31일
0

JavaScript30

λͺ©λ‘ 보기
23/30

πŸŽ™ 23. Speech Synthesis

μžλ°”μŠ€ν¬λ¦½νŠΈλ‘œ 글을 μ½μ–΄μ£ΌλŠ” 도ꡬ κ΅¬ν˜„

초기 μ½”λ“œ

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Speech Synthesis</title>
    <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style_JuneHyung.css">
</head>
<body>
    <div class="voiceinator">

    <h1>The Voiceinator 5000</h1>

    <select name="voice" id="voices">
        <option value="">Select A Voice</option>
    </select>

    <label for="rate">Rate:</label>
    <input name="rate" type="range" min="0" max="3" value="1" step="0.1">

    <label for="pitch">Pitch:</label>

    <input name="pitch" type="range" min="0" max="2" step="0.1">
    <textarea name="text">Hello! I love JavaScript πŸ‘</textarea>
    <button id="stop">Stop!</button>
    <button id="speak">Speak</button>

    </div>

<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');
</script>

</body>
</html>

초기 ν™”λ©΄

🌏 μƒˆλ‘œ μ•Œκ²Œ 된 것

πŸ‘‰ SpeechSynthesisUtterance

Web Speech API의 SpeechSynthesis Utterance μΈν„°νŽ˜μ΄μŠ€λŠ” μŒμ„± μš”μ²­μ„ λ‚˜νƒ€λƒ…λ‹ˆλ‹€.
μ—¬κΈ°μ—λŠ” μŒμ„± μ„œλΉ„μŠ€κ°€ 읽어야 ν•  λ‚΄μš©κ³Ό μ½λŠ” 방법에 λŒ€ν•œ 정보(예: μ–Έμ–΄, 음쑰 및 λ³Όλ₯¨)κ°€ ν¬ν•¨λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.

  • 속성

SpeechSynthesisUtterance.lang : λ§ν•˜λŠ” μ–Έμ–΄λ₯Ό κ°€μ Έμ˜€κ³  μ„€μ •.

SpeechSynthesisUtterance.pitch

SpeechSynthesisUtterance.rate : λ§ν•˜λŠ” 속도

SpeechSynthesisUtterance.text : 말할 λ•Œ ν…μŠ€νŠΈ

SpeechSynthesisUtterance.voice : 말할 λ•Œ λͺ©μ†Œλ¦¬

SpeechSynthesisUtterance.volume : 말할 λ³Όλ₯¨μ„ κ°€μ Έμ˜΄.

🌏 κ³Όμ •

πŸ‘‰ 0. μ‚¬μš©ν•  λ³€μˆ˜ μ„ μ–Έ

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');

πŸ‘‰ 1. λͺ©μ†Œλ¦¬ 리슀트 좜λ ₯

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

function populateVoices(){
    voices = this.getVoices();
    // console.log(voices);

    voicesDropdown.innerHTML = voices
        .filter(voice => voice.lang.includes('ko'))
        .map(voice => `<option value="${voice.name}">${voice.name} (${voice.lang})				</option>`)
        .join('');
}

voices에 μ‚¬μš© κ°€λŠ₯ν•œ λͺ©μ†Œλ¦¬ λͺ©λ‘μ„ λ‹΄κ³ , filter둜 ko인 λͺ©μ†Œλ¦¬λ§Œ 걸러 μΆœλ €ν•œλ‹€.

πŸ‘‰ 2. μž¬μƒ 및 정지

// μ„ νƒν•œ voice둜 speak함.
function setVoices(){
    // console.log('Changing voice');
    msg.voice = voices.find(voice => voice.name === this.value);
    toggle();
}
    
// λ§ν•˜λŠ”μ€‘μ— μ–Έμ–΄λ³€κ²½ μ‹œ 말을 끊고 μƒˆ λͺ©μ†Œλ¦¬λ‘œ λ‹€μ‹œ μž¬μƒ 
function toggle(startOver = true){
    speechSynthesis.cancel();
    if(startOver){
        speechSynthesis.speak(msg);
    }
}

λ©”μ„Έμ§€μ˜ λͺ©μ†Œλ¦¬λ₯Ό μ„ νƒν•΄μ„œ 이름에 λ”°λΌμ„œ 선택할 수 있게 함.

선택 ν›„ toggle()을 톡해 μž¬μƒ.

toggle둜 메세지λ₯Ό μž¬μƒ ν˜Ήμ€ 정지 μ‹œν‚΄.

πŸ‘‰ 3. μ˜΅μ…˜μ„€μ •

function setOption(){
    console.log(this.name, this.value);
    msg[this.name] = this.value;
    toggle();
}

λ ˆμ΄λ”λ‘œ λ³€ν™”λœ 값을 μ„ΈνŒ…ν•˜κ³ , λͺ©μ†Œλ¦¬λ₯Ό μž¬μƒμ‹œν‚΄.

πŸ‘‰ 4. λ©”μ„œλ“œμ μš©

speechSynthesis.addEventListener('voiceschanged', populateVoices);
voicesDropdown.addEventListener('change', setVoices);
options.forEach(option => option.addEventListener('change', setOption));

speakButton.addEventListener('click', toggle);
stopButton.addEventListener('click', ()=> toggle(false));
profile
κΉƒν—ˆλΈŒ : github.com/JuneHyung

0개의 λŒ“κΈ€