!
Nel video ti mostro come realizzare un sintetizzatore vocale in JavaScript con il quale puoi realizzare una Web app in Google Apps Script:
Di seguito il codice integrale dell'app [ISCRIVITI AL CANALE YOUTUBE]:
Code.gs
function doGet() {
return HtmlService.createTemplateFromFile('index').evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
body, html {margin: 0;}html {height: 100%;}body {height: 90%;max-width: 800px;margin: 0 auto;}h1, p {font-family: sans-serif;text-align: center;padding: 20px;}.txt, select, form > div {display: block;margin: 0 auto;font-family: sans-serif;font-size: 16px;padding: 5px;}.txt {width: 80%;}select {width: 83%;}form > div {width: 81%;}.txt, form > div {margin-bottom: 10px;overflow: auto;}.clearfix {clear: both;}label {float: left;width: 10%;line-height: 1.5;}.rate-value, .pitch-value {float: right;width: 5%;line-height: 1.5;}#rate, #pitch {float: right;width: 81%;}.controls {text-align: center;margin-top: 10px;}.controls button {padding: 10px;}
</style>
</head>
<body>
<h1>Speech synthesizer</h1>
<p>
Inserisci un testo nel campo di input qui sotto e premi Invio per ascoltarlo. Puoi cambiare le voci utilizzando il menu a discesa.
</p>
<form>
<input type="text" class="txt" />
<div>
<label for="rate">Rate</label
><input type="range" min="0.5" max="2" value="1" step="0.1" id="rate" />
<div class="rate-value">1</div>
<div class="clearfix"></div>
</div>
<div>
<label for="pitch">Pitch</label
><input type="range" min="0" max="2" value="1" step="0.1" id="pitch" />
<div class="pitch-value">1</div>
<div class="clearfix"></div>
</div>
<select></select>
</form>
<script>
const synth = window.speechSynthesis;
const inputForm = document.querySelector("form");
const inputTxt = document.querySelector(".txt");
const voiceSelect = document.querySelector("select");
const pitch = document.querySelector("#pitch");
const pitchValue = document.querySelector(".pitch-value");
const rate = document.querySelector("#rate");
const rateValue = document.querySelector(".rate-value");
var voices = [];
function populateVoiceList() {
voices = synth.getVoices();
for (const voice of voices) {
const option = document.createElement("option");
option.textContent = `${voice.name} (${voice.lang})`;
if (voice.default) {
option.textContent += " — DEFAULT";
}
option.setAttribute("data-lang", voice.lang);
option.setAttribute("data-name", voice.name);
voiceSelect.appendChild(option);
}
}
populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
speechSynthesis.onvoiceschanged = populateVoiceList;
}
inputForm.onsubmit = (event) => {
event.preventDefault();
const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
const selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
for (const voice of voices) {
if (voice.name === selectedOption) {
utterThis.voice = voice;
}
}
utterThis.pitch = pitch.value;
utterThis.rate = rate.value;
synth.speak(utterThis);
utterThis.onpause = (event) => {
const char = event.utterance.text.charAt(event.charIndex);
console.log(
`Speech paused at character ${event.charIndex} of "${event.utterance.text}", which is "${char}".`
);
};
inputTxt.blur();
}
pitch.onchange = () => {
pitchValue.textContent = pitch.value;
};
rate.onchange = () => {
rateValue.textContent = rate.value;
};
</script>
</body>
</html>
ISCRIVITI AL CANALE YOUTUBE! E attiva la campanella in modo da essere aggiornato sui prossimi video pubblicati e codici pronti all'uso! :)
scrivi un commento
Non ci sono commenti
Nessuno ha ancora commentato questo articolo, fallo tu per primo!
scrivi un commento