Continuous SQL and others

Hello all,

I coded a voice recognition page using the new Google Web Speech API in JS. Here is my JS party:

// ####### Afficher des info ############

    function displayInfo(_info,_id){
      var x = document.getElementById(_id);
      x.innerHTML = _info + "<hr />" + x.innerHTML;
    }

    // ######## Date ########
    function MaDate(){
        var LaDate = new Date();
        return LaDate.getHours() + ":" + LaDate.getMinutes() + ":" + LaDate.getSeconds() + ":" + LaDate.getMilliseconds() + " ";
    }

    // ######### Test browser support #########

    window.SpeechRecognition = window.SpeechRecognition ||
                               window.webkitSpeechRecognition ||
                               null;

    if (window.SpeechRecognition === null) {
      document.getElementById('ws-unsupported').classList.remove('hidden');
      document.getElementById('button-play-ws').setAttribute('disabled', 'disabled');
      document.getElementById('button-stop-ws').setAttribute('disabled', 'disabled');
    } else {
      var recognizer = new window.SpeechRecognition();
      var transcription = document.getElementById('transcription');
      var log = document.getElementById('log');
      var contenu = "";

      // Le module de reconnaissance n'arrête pas d'écouter même si l'utilisateur fait une pause
      recognizer.continuous = true;

      // Commencez à reconnaître
      recognizer.onresult = function(event) {
        transcription.textContent = '';
          document.getElementById('Rouge').style.visibility="hidden";
        //########## Fonction proncipal #########
        for (var i = event.resultIndex; i < event.results.length; i++) {
          if (event.results[i].isFinal) {
            //##################
            contenu = event.results[i][0].transcript;
            transcription.textContent = contenu;

            if (contenu == ' rouge' || contenu == 'rouge') {
              document.getElementById('Rouge').style.visibility="visible";
              redirectPost('litemanager.nexgate.ch/data-irock7S', 'POST', contenu, '$dataIrock');
            }

          } else {
            transcription.textContent += event.results[i][0].transcript;
          }
        }
        //###############################
      };

      // Écoutez les erreurs
      recognizer.onerror = function(event) {
        log.innerHTML = 'Recognition error: ' + event.message + '<br />' + log.innerHTML;
      };

      // ######## Start ########
      document.getElementById('button-play-ws').addEventListener('click', function() {
        // Définir si nous avons besoin de résultats intermédiaires
        recognizer.interimResults = document.querySelector('input[name="recognition-type"][value="interim"]').checked;

        try {
          recognizer.start();
          log.innerHTML = 'Recognition started' + '<br />' + log.innerHTML;
        } catch(ex) {
          log.innerHTML = 'Recognition error: ' + ex.message + '<br />' + log.innerHTML;
        }
      });

      // ######## Stop ########
      document.getElementById('button-stop-ws').addEventListener('click', function() {
        recognizer.stop();
        log.innerHTML = 'Recognition stopped' + '<br />' + log.innerHTML;
      });

      // ######## Tout effacer ########
      document.getElementById('clear-all').addEventListener('click',
        function() {
        transcription.textContent = '';
      log.textContent = '';
  });
}

Now I would like to be able to continuously write on a MySQL database the “content” character string which contains the text that the person said. My main problem is that I don’t want to refresh the page! Especially not ! It has to be continuous. That’s why I turned to a language other than php, so I looked at length if it was possible in JS but I found nothing usable (normal since the js is client side) . So do you have any idea what I can use? :slight_smile:

And my goal is to recover the character chain with an Arduino Yun which is connected to the network so it can be another solution (create a txt file on the server side, I was looking for but I found nothing).

I had started by returning the info with the POST method:

function redirectPost(_url, _method, _data, _name) {
  var form = document.createElement('form');
  document.body.appendChild(form);
  form.method = _method;
  form.action = _url;

  var input = document.createElement('input');
  input.type = 'text';
  input.name = _name;
  input.value = _data;
  form.appendChild(input);

  form.submit();
}

But with each sending, the page is updated (as with this same method in PHP). There you have any ideas?