μλ°μ€ν¬λ¦½νΈλ‘ κΈμ μ½μ΄μ£Όλ λꡬ ꡬν
μ΄κΈ° μ½λ
<!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>
μ΄κΈ° νλ©΄
Web Speech APIμ SpeechSynthesis Utterance μΈν°νμ΄μ€λ μμ± μμ²μ λνλ
λλ€.
μ¬κΈ°μλ μμ± μλΉμ€κ° μ½μ΄μΌ ν λ΄μ©κ³Ό μ½λ λ°©λ²μ λν μ 보(μ: μΈμ΄, μμ‘° λ° λ³Όλ₯¨)κ° ν¬ν¨λμ΄ μμ΅λλ€.
SpeechSynthesisUtterance.lang : λ§νλ μΈμ΄λ₯Ό κ°μ Έμ€κ³ μ€μ .
SpeechSynthesisUtterance.pitch
SpeechSynthesisUtterance.rate : λ§νλ μλ
SpeechSynthesisUtterance.text : λ§ν λ ν μ€νΈ
SpeechSynthesisUtterance.voice : λ§ν λ λͺ©μ리
SpeechSynthesisUtterance.volume : λ§ν λ³Όλ₯¨μ κ°μ Έμ΄.
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;
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μΈ λͺ©μλ¦¬λ§ κ±Έλ¬ μΆλ €νλ€.
// μ νν 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λ‘ λ©μΈμ§λ₯Ό μ¬μ νΉμ μ μ§ μν΄.
function setOption(){
console.log(this.name, this.value);
msg[this.name] = this.value;
toggle();
}
λ μ΄λλ‘ λ³νλ κ°μ μΈν νκ³ , λͺ©μ리λ₯Ό μ¬μμν΄.
speechSynthesis.addEventListener('voiceschanged', populateVoices);
voicesDropdown.addEventListener('change', setVoices);
options.forEach(option => option.addEventListener('change', setOption));
speakButton.addEventListener('click', toggle);
stopButton.addEventListener('click', ()=> toggle(false));