Enabling Speech Recognition in an Oracle APEX application

Goal

Enable speech recognition provided by most of the browser in a Text field or TextArea item in an Oracle APEX application

CSS inline

The CCS must be added at the page level, in CSS Inline property

.icon-inside-textarea {
position: absolute;
right: 20px;
bottom: 10px;
z-index: 10;
color: #888;
cursor: pointer;
}

Post Text

This markup must be added at the item level in the Post Text property

<span class="icon-inside-textarea">
  <span class="fa fa-lg fa-microphone" id="mic-icon"></span>
</span>

Page Load DA

document.getElementById("mic-icon").addEventListener("click", function() {
  console.log("Clic icon !");
  // Vérifier si le navigateur supporte la reconnaissance vocale
  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  if (!SpeechRecognition) {
    //micBtn.disabled = true;
    console.warn("Speech recognition non supportée sur ce navigateur.");
    return;
  }
 console.warn("Scontinue.");
  const recognition = new SpeechRecognition();
  recognition.lang = 'fr-FR'; // ajuster la langue 
  recognition.interimResults = false;
  recognition.maxAlternatives = 1;

  //micBtn.addEventListener("click", () => {
    recognition.start();
  //});
  recognition.onresult = function (event) {
  // Concatenate new text with previous, if any.  
  const transcript = event.results[0][0].transcript;
    prevnote = apex.item("P30_NOTE").getValue();
    apex.item("P30_NOTE").setValue(prevnote.concat(transcript));
  };

  recognition.onerror = function (event) {
    console.error("Erreur de reconnaissance vocale :", event.error);
    apex.message.showErrors([
      {
        type: "error",
        location: "page",
        message: "Échec de la reconnaissance vocale : " + event.error,
        unsafe: false
      }
    ]);
  };
});