Sujet Précédent Sujet Suivant

Input en javascript

Fermé
RaphaelDesinope Messages postés 2 Date d'inscription mercredi 18 mai 2022 Statut Membre Dernière intervention 28 mai 2022 - Modifié le 28 mai 2022 à 19:30
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 - 28 mai 2022 à 19:36
Bonjour,



je souhaite fusionner un input que j'ai codé qui donne une phrase et des commentaires sur une liste de chiffres quand on rentre juste la liste de chiffres, avec une API de synthèse vocale de mozilla qui donne une voix lisant un texte que l'on rentre . I lfaudrait que mon texte de sortie devienne le texte d'entrée automatiquement et directement an français. Je présume que cela se passe dans le txt ou text du second script.

HTML : 

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">

    <title>Speech synthesiser</title>

    <link rel="stylesheet" href="style.css">
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
   
  </head>

  <body>
    
    <h1> Number Analyser</h1>
    Please copy-paste this random series of one hundred numbers into the input prompter, then click the red button:</h3></div>
 <br/><br/> <p>1, 32, 34, 18, 34, 30, 35, 19, 19, 21, 28, 31, 32, 9, 29, 31, 11, 19, 36, 17, 25, 19, 0, 34, 1, 21, 26, 17, 36, 27, 29, 22, 27, 18, 15, 0, 16, 31, 30, 34, 2, 18, 10, 35, 33, 13, 3, 25, 1, 4, 13, 19, 21, 0, 29, 7, 26, 6, 32, 23, 11, 21, 22, 12, 32, 17, 32, 11, 4, 14, 2, 19, 25, 15, 14, 1, 23, 21, 16, 16, 21, 26, 1, 6, 22, 34, 2, 14, 20, 28, 27, 7, 7, 3, 25, 14, 11, 29, 34, 15, 1 <br/><br/></center></h>




<br/><h4>
 <center> <input class="txt " type="text"   id="myInput"   value=""   style="width:80%"><br><br/>



  <button onclick ="myFunction()" button class="button"  type="submit" >PRESS AFTER PASTING NUMBERS</button> </center><br/><br/></h4><p>

  I would like to merge the two inputs and code so that on input <b/>I get on one hand the numbers displayed in html and simultaneously automatically the numbers enter read in French or Englisg
</p>

<h4 id="experience0" style="color: blue"><br/>
    <h1>Speech synthesiser</h1>

    <p>Enter some text in the input below and press return  or the "play" button to hear it. change voices using the dropdown menu.</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>
    <div class="controls">
      <button id="play" type="submit">Play</button>
    </div>
    </form>




<script>


var array= [] ;

var No ; 
var someStr ;
var n;
function myFunction(){
  var n = document.getElementById("myInput").value;
  
  var someStr = n ;
  
 var No = someStr.split(", ");//.join('');

    var len = No.length ; 
  

  document.getElementById("experience0").innerHTML += "Hello, In experiment n°1, you submitted the following numbers which are primary data that I classified in an array called var No which contains the following"+len+"  numbers " +No+ " ."  ;

}

//---------- speech synthtiser code 

var synth = window.speechSynthesis;

var inputForm = document.querySelector('form');
var inputTxt = document.querySelector('.txt');
var voiceSelect = document.querySelector('select');

var pitch = document.querySelector('#pitch');
var pitchValue = document.querySelector('.pitch-value');
var rate = document.querySelector('#rate');
var rateValue = document.querySelector('.rate-value');

var voices = [];

function populateVoiceList(){
  voices = synth.getVoices().sort(function (a, b) {
      const aname = a.name.toUpperCase(), bname = b.name.toUpperCase();
      if ( aname < bname ) return -1;
      else if ( aname == bname ) return 0;
      else return +1;
  });
  var selectedIndex = voiceSelect.selectedIndex < 0 ? 0 : voiceSelect.selectedIndex;
  voiceSelect.innerHTML = '';
  for(i = 0; i < voices.length ; i++) {
    var option = document.createElement('option');
    option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
    
    if(voices[i].default) {
      option.textContent += ' -- DEFAULT';
    }

    option.setAttribute('data-lang', voices[i].lang);
    option.setAttribute('data-name', voices[i].name);
    voiceSelect.appendChild(option);
  }
  voiceSelect.selectedIndex = selectedIndex;
}

populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
  speechSynthesis.onvoiceschanged = populateVoiceList;
}

function speak(){
    if (synth.speaking) {
        console.error('speechSynthesis.speaking');
        return;
    }
    if (inputTxt.value !== '') {
    var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
    utterThis.onend = function (event) {
        console.log('SpeechSynthesisUtterance.onend');
    }
    utterThis.onerror = function (event) {
        console.error('SpeechSynthesisUtterance.onerror');
    }
    var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
    for(i = 0; i < voices.length ; i++) {
      if(voices[i].name === selectedOption) {
        utterThis.voice = voices[i];
        break;
      }
    }
    utterThis.pitch = pitch.value;
    utterThis.rate = rate.value;
    synth.speak(utterThis);
  }
}

inputForm.onsubmit = function(event) {
  event.preventDefault();

  speak();

  inputTxt.blur();
}

pitch.onchange = function(){
  pitchValue.textContent = pitch.value;
}

rate.onchange = function(){
  rateValue.textContent = rate.value;
}

voiceSelect.onchange = function(){
  speak();
}


</script>

  </body>
</html>


EDIT : Ajout des balises de code

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
28 mai 2022 à 19:36
Bonjour,

As tu essayé de comprendre ce que font tes codes au lieu de juste les copier/coller ??

Par exemple, As tu vu, dans le second script, quelle variable est utilisée pour "contenir" le texte à lire ?
Donc, commence par la remplacer par celle dans laquelle tu mets ton texte...

Ensuite, tu te pencheras sur le "déclenchement" automatique...


PS: à l'avenir, pour poster du code sur le forum, pense à utiliser les balises de code ( https://forums.commentcamarche.net/forum/affich-37598670-mise-en-forme-du-forum-et-des-fiches-pratiques-ccm#les-codes-sources )
0

Discussions similaires

input signal out of range
marlene -
usman000 -

14 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
comment désactiver out of range
lzri98 -
jeannets -

3 réponses
No video input après mise en veille
Shaverguy -
Shaverguy -

17 réponses
2ND ECRAN "Input not supported"
cath -
cath -

2 réponses