faire un text to speech de manière automatique
Salut, je suis entrain de développer un projet et depuis 2 jours je suis bloquer sur un script que j'aimerai réaliser.
le principe est le suivant:
-
j'ai un input textarea1 dans lequel j'insère des des données par défaut a partir d'une variable
-
j'ai un script qui me permet de lire de manière vocale les données récupérées dans le textarea1 lorsque je clique sur un bouton que j'ai nommé speak
maintenant ce que j'aimerai faire est de lire automatiquement les données récupérées dans le textarea1 sans cliqué sur le bouton speak.
extrait de code:
<!DOCTYPE html>
<html>
<head>
<title>Text to speech converter in JS</title>
<style type="text/css">
body{
background: #f6f6f6;
}
.container{
background: #f6f6f6;
position: absolute;
top:50%;
left:50%;
transform: translateX(-50%) translateY(-50%);
width: 400px;
padding:20px;
box-shadow: 0 0 10px 0 #ccc;
}.container textarea{
width: 390px;
height: 100px;
resize: none;
outline: none;
border: 1px solid #ccc;
}
.container label{
display: block;
width: 400px;
}
.container label span{
width: 100px;
margin-top: 20px;
display: inline-block;
}
.container label select, .container label input{
width: 290px;
}
.button{
display: inline-block;
background: #f6f6f6;
padding: 10px 20px;
color: #000;
border: 1px solid #ccc;
cursor: pointer;
margin-top: 20px;
}
.button:hover{
box-shadow: 4px 4px 10px 0 #ccc;
}
</style>
</head>
<body>
<div class="container">
<h3>Text to speech converter in JS</h3>
<textarea id="myText">Hello, this is sam. Today, we are learning the text to speech converter in JS</textarea>
<label>
<span>Voice</span>
<select id="voiceOptions"></select>
</label>
<label>
<span>Volume</span>
<input type="range" id="volumeSlider" min="0" max="1" value="0.5" step="0.1" />
</label>
<label>
<span>rate</span>
<input type="range" id="rateSlider" min="0" max="1" value="0.5" step="0.1" />
</label>
<label>
<span>Pitch</span>
<input type="range" id="pitchSlider" min="0" max="2" value="0.5" step="0.1" />
</label>
<div class="button" onclick="speak();">Speak</div>
</div>
<script type="text/javascript">
function checkCompatibilty () {
if(!('speechSynthesis' in window)){
alert('Your browser is not supported. If google chrome, please upgrade!!');
}
};
checkCompatibilty();
var voiceOptions = document.getElementById('voiceOptions');
var volumeSlider = document.getElementById('volumeSlider');
var rateSlider = document.getElementById('rateSlider');
var pitchSlider = document.getElementById('pitchSlider');
ar myText = document.getElementById('myText');
var voiceMap = [];
function loadVoices () {
var voices = speechSynthesis.getVoices();
for (var i = 0; i < voices.length; i++) {
var voice = voices[i];
var option = document.createElement('option');
option.value = voice.name;
option.innerHTML = voice.name;
voiceOptions.appendChild(option)
voiceMap[voice.name] = voice;
};
};
window.speechSynthesis.onvoiceschanged = function(e){
loadVoices();
};function speak () {
var msg = new SpeechSynthesisUtterance();
msg.volume = volumeSlider.value;
msg.voice = voiceMap[voiceOptions.value];
msg.rate = rateSlider.value;
msg.Pitch = pitchSlider.value;
msg.text = myText.value;
window.speechSynthesis.speak(msg);
};
</script>
</body>
< /html >
8 réponses
Salut, t'as juste à mettre un écouteur de changement sur ton textarea, le seul problème c'est que tu seras spammé par le TTS.
Ou alors tu peux lancer ton TTS tous les 10 mots, dès que ca fait 10 secs que t'écris plus, etc...
Salut,
Regarde du côté de ces fonctions là : https://www.grafikart.fr/tutoriels/javascript/debounce-throttle-642 en mixant avec la permière idée de @Balsakup (eventListener).
betaWeb ces fonctions ne resoud pas mon soucis.
je t'explique un peu ce que je suis entrain de faire:
je suis entrain de mettre en place en php js etc.. une file d'attente ecologique(n'utilise pas du papier).
Et donc j'ai 3 pages:(- page 1: qui permet de saisir son matricule par exemple
page2: qui receptionne les infos sur la page 1 et permet de faire un appel.
NB: on fait un appel lorsqu'on a fini de traiter l'information de la personne.
page 3: qui affiche le matricule ou le nom de la personne a l'ecran(TV) qui permet de dirigé la personne vers un guichet .
Et ce que je voudrai faire c'est de lire de maniere vocale avec le synthesis de windows en plus de faire apparaitre le nom ou le matricule a l'ecran(page 3).
NB: J'ai deja fait un script qui emet un signal sonore lorsqu'on fait un appel c'est a dire lorsque le nom ou le matricule apparait sur l'ecran(page 3). Et sa fonctionne tres bien.
DONC MON BUT EST DE REMPLACER CE SIGNAL PAR UNE LECTURE VOCALE .
Beh à l'affichage de la page tu récupères le contenu en question et tu le diffuses, je ne vois pas ce qu'il y a de compliqué ? ^^
Bonjour betaWeb, c'est au niveau de la lecture vocale que je suis bloqué.
En fait c'est le contenu que je recupère que je veux lire de manière vocale et l'afficher en meme temps sur l'ecran.