77 lines
2.2 KiB
HTML
77 lines
2.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Speech Synthesis</title>
|
||
|
|
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
|
||
|
|
<link rel="stylesheet" href="style.css">
|
||
|
|
<link rel="icon" href="https://fav.farm/✅" />
|
||
|
|
</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');
|
||
|
|
msg.text = document.querySelector('[name="text"]').value;
|
||
|
|
|
||
|
|
function populateVoices() {
|
||
|
|
voices = this.getVoices();
|
||
|
|
voicesDropdown.innerHTML = voices
|
||
|
|
.filter(voice => voice.lang.includes('en'))
|
||
|
|
.map(voice => `<option value="${voice.name}">${voice.name} (${voice.lang})</option>`)
|
||
|
|
.join('');
|
||
|
|
}
|
||
|
|
|
||
|
|
function setVoice() {
|
||
|
|
msg.voice = voices.find(voice => voice.name === this.value);
|
||
|
|
toggle();
|
||
|
|
}
|
||
|
|
|
||
|
|
function toggle(startOver = true) {
|
||
|
|
speechSynthesis.cancel();
|
||
|
|
if (startOver) {
|
||
|
|
speechSynthesis.speak(msg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function setOption() {
|
||
|
|
console.log(this.name, this.value);
|
||
|
|
msg[this.name] = this.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>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|