Voice Search Enhancement

Allow your users to perform vocal searches on your site.

// #####################################################################################
// variable declaration
// #####################################################################################

var recognition;
let injectInvisibleDivForSearchElement;
let turnMicOn;
let turnMicOff;
let getSearchInputs;
let putMicIntoPlaceholder;
var SpeechRecognitionGrammarList;
let getStylesObjectForInvisibleDiv;
var grammar = "#JSGF V1.0;";
let setClickListenerOnInvisibleDiv;
let searchInput_element;
let measureCharacterLength;
let invDivWidthMultiplier = 3;
let invDivHeightMultiplier = 1.4;
let assignUniqueIDtoInput;
let injectStyleForInvisibleDiv;
let positionDivOverMicCharacter;
let htmlDecode;
let generateRandomNumber;
let micAvailable = false;
let turnOnMicVisualization;
let turnOffMicVisualization;
let addVolumeMeterFunctionality;
let showWaveform;
let hideWaveform;
let inputIsFixed;
let invDivStopPropagation;
let setStopPropagationListeners;
let repositionFunction;
let textDirection;

// #####################################################################################
// adding jQuery
// #####################################################################################

if (window.jQuery) {
  $ = window.jQuery;
  mainJS();
} else {
  var script = document.createElement("SCRIPT");
  script.src =
    "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js";
  script.type = "text/javascript";
  // this is doc.ready
  //-------------------
  script.onload = function () {
    var $ = window.jQuery;
    mainJS();
  };
  document.head.appendChild(script);
}

// start defining functions only after jQuery is available
function mainJS() {
  // ######################################################################################
  // adding helper functions from online
  // ######################################################################################

generateRandomNumber = (len) => {
    let maximum = 9;
    let minimum = 0;
    let num_str = "";
    for (let i = 0; i  {
    var doc = new DOMParser().parseFromString(input, "text/html");
    return doc.documentElement.textContent;
  };

// add character width ruler
  document.body.insertAdjacentHTML("beforeend", `<span id="ruler"></span>`);
  document.head.insertAdjacentHTML(
    "beforeend",
    `
        #ruler { visibility: hidden; white-space: nowrap; position: fixed; }
     `
  );

// #####################################################################################
  // defining functions
  // #####################################################################################

addVolumeMeterFunctionality = (callback) => {
    let script = document.createElement("SCRIPT");
    script.src = "https://unpkg.com/wavesurfer.js";
    document.head.appendChild(script);
    let intervalTimeWaited = 0;
    let interval = setInterval(() => {
      if (intervalTimeWaited === 10000) {
        clearInterval(interval);
      }
      intervalTimeWaited = intervalTimeWaited + 50;
      if (typeof WaveSurfer !== "undefined") {
        if (!document.querySelector("#micPluginScript")) {
          let micPluginScript = document.createElement("SCRIPT");
          micPluginScript.id = "micPluginScript";
          micPluginScript.src =
            "https://unpkg.com/wavesurfer.js@4.6.0/dist/plugin/wavesurfer.microphone.min.js";
          document.head.appendChild(micPluginScript);
        }
        if (typeof WaveSurfer.microphone !== "undefined") {
          if (typeof WaveSurfer.microphone.create !== "undefined") {
            micAvailable = true;
            clearInterval(interval);
            callback();
          }
        }
      }
    }, 50);
  };

showWaveform = () => {
    document.querySelector(".wavesurfer-container").style.visibility =
      "visible";
  };

hideWaveform = () => {
    document.querySelector(".wavesurfer-container").style.visibility = "hidden";
  };

turnOnMicVisualization = () => {
    document.querySelector("#waveform").innerHTML = "";
    wavesurfer = WaveSurfer.create({
      container: "#waveform",
      waveColor: "black",
      interact: false,
      cursorWidth: 0,
      fillParent: true,
      minPxPerSec: 10,
      height: 100,
      plugins: [WaveSurfer.microphone.create()],
    });
    wavesurfer.microphone.start();
  };

turnOffMicVisualization = () => {
    wavesurfer.microphone.stop();
  };

turnMicOn = () => {
    navigator.mediaDevices
      .getUserMedia({ audio: true })
      .then(() => {
        try {
          recognition.abort();
        } catch {
          console.error("recognition.abort failed");
        }
        try {
          recognition.start();
        } catch {
          console.error("recognition.start failed");
        }
      })
      .catch((err) => {
        console.error(`getUserMedia fail: ${err}`);
      });
  };

turnMicOff = () => {
    try {
      recognition.stop();
    } catch {
      console.error("recognition.stop failed");
    }
  };

getSearchInputs = () => {
    return [...document.querySelectorAll("input")].filter((input) => {
      let inputHTML = input.outerHTML.replace(input.innerHTML, "");
      if (inputHTML.toLowerCase().indexOf("search") !== -1) {
        return true;
      }
      return false;
    });
  };

putMicIntoPlaceholder = (uniqueID_str) => {
    let inputElement = document.querySelector(
      `input[twikid="${uniqueID_str}"]`
    );
    document.head.insertAdjacentHTML(
      "beforeend",
      `
      
        input[twikid="${uniqueID_str}"] {
          font-family: FontAwesome !important;
        }
      
    `
    );
    inputElement.placeholder = `${htmlDecode("")} ${
      inputElement.placeholder
    }`;
  };

setClickListenerOnInvisibleDiv = (uniqueID_str) => {
    let twikInvisibleDiv = document.querySelector(
      `div[class="twik-invisible-div"][twikid="${uniqueID_str}"]`
    );
    twikInvisibleDiv.addEventListener("click", () => {
      try {
        turnMicOff();
        turnOffMicVisualization();
      } catch {}
      turnMicOn();
      showWaveform();
      turnOnMicVisualization();
      sessionStorage.setItem("active_twikid", uniqueID_str);
    });
  };

assignUniqueIDtoInput = (inputElement) => {
    let uniqueID_str = generateRandomNumber(10);
    // make sure there are no matching ids
    while (document.querySelector(`input[twikid="${uniqueID_str}"]`)) {
      uniqueID_str = generateRandomNumber(10);
    }
    inputElement.setAttribute("twikid", uniqueID_str);
  };

injectInvisibleDivForSearchElement = (uniqueID_str) => {
    let inputElement = document.querySelector(
      `input[twikid="${uniqueID_str}"]`
    );

let twikInvisibleDiv = document.querySelector(
      `div[class="twik-invisible-div"][twikid="${uniqueID_str}"]`
    );

twikInvisibleDiv.parentElement.addEventListener("click", (e) => {
      e.stopPropagation();
    });

console.log("injectInvisibleDivForSearchElement");
  };

measureCharacterLength = (inputElement) => {
    var ruler = document.querySelector("#ruler");
    ruler.style.fontFamily = window.getComputedStyle(
      inputElement,
      ":placeholder"
    )["fontFamily"];
    ruler.style.fontSize = window.getComputedStyle(
      inputElement,
      ":placeholder"
    )["fontSize"];
    ruler.innerHTML = inputElement.placeholder[0];
    return ruler.offsetWidth;
  };

inputIsFixed = (uniqueID_str) => {
    let inputElement = document.querySelector(
      `input[twikid="${uniqueID_str}"]`
    );
    return window.getComputedStyle(inputElement)["position"] === "fixed";
  };

getStylesObjectForInvisibleDiv = (uniqueID_str) => {
    let styles_obj = new Object();
    let inputElement = document.querySelector(
      `input[twikid="${uniqueID_str}"]`
    );
    let inputElement_boundingRect = inputElement.getBoundingClientRect();

// if inputElement is not on the screen - hide the invisible div
    if (
      inputElement.value.length > 0 ||
      window.getComputedStyle(inputElement)["display"] === "none" ||
      window.getComputedStyle(inputElement)["visibility"] === "hidden" ||
      inputElement_boundingRect["width"] *
        inputElement_boundingRect["height"] ==
        0
    ) {
      styles_obj["visibility"] = "hidden";
      return styles_obj;
    } else {
      styles_obj["visibility"] = "visible";
    }

// fix alignment of the invisible div
    if (
      window.getComputedStyle(inputElement.parentElement)["alignItems"] ===
      "center"
    ) {
      styles_obj["transform"] = "translate(0%, -50%)";
    }

// get height ad width
    styles_obj["height"] = `${parseInt(
      inputElement_boundingRect.height * invDivHeightMultiplier
    )}px`;
    styles_obj["width"] = `${
      measureCharacterLength(inputElement) * invDivWidthMultiplier
    }px`;

// if inputElement is fixed - collect styles for a fixed invisible div
    if (inputIsFixed(uniqueID_str)) {
      styles_obj["position"] = "fixed";
      styles_obj[textDirection === "ltr" ? "left" : "right"] = `${parseInt(
        inputElement_boundingRect.left -
          parseInt(
            window.getComputedStyle(inputElement)["paddingLeft"].match(/\d+/)[0]
          ) -
          parseInt(
            (measureCharacterLength(inputElement) * invDivWidthMultiplier -
              measureCharacterLength(inputElement)) /
              2
          )
      )}px`;
      styles_obj["top"] = `${parseInt(
        inputElement_boundingRect.top -
          parseInt(
            (inputElement_boundingRect.height * invDivHeightMultiplier -
              inputElement_boundingRect.height) /
              2
          )
      )}px`;
      // if inputElement is position absolute - collect styles for a position absolute invisible div
    } else {
      styles_obj["position"] = "absolute";
      styles_obj[textDirection === "ltr" ? "left" : "right"] = `${
        parseInt(
          window.getComputedStyle(inputElement)["paddingLeft"].match(/\d+/)[0]
        ) -
        parseInt(
          (measureCharacterLength(inputElement) * invDivWidthMultiplier -
            measureCharacterLength(inputElement)) /
            2
        )
      }px`;

styles_obj["top"] = `${parseInt(
        -parseInt(
          inputElement_boundingRect.height * ((invDivHeightMultiplier - 1) / 2)
        )
      )}px`;
    }

return styles_obj;
  };

injectStyleForInvisibleDiv = (uniqueID_str, styles_obj) => {
    let invisibleDiv = document.querySelector(
      `div[class="twik-invisible-div"][twikid="${uniqueID_str}"]`
    );

// remove previous style element if it's outdated
    if (document.querySelector(`style[twikid="${uniqueID_str}"]`)) {
      for (let key of Object.keys(styles_obj)) {
        if (key === "transform") {
          continue;
        }
        if (styles_obj[key] != window.getComputedStyle(invisibleDiv)[key]) {
          document.querySelector(`style[twikid="${uniqueID_str}"]`).remove();
          break;
        }
      }
    }

// inject a new style if none was present or previous one was outdated and removed
    if (!document.querySelector(`style[twikid="${uniqueID_str}"]`)) {
      let style_str = "";
      Object.keys(styles_obj).map((key) => {
        style_str += `${key}: ${styles_obj[key]};`;
      });

invDivStopPropagation = (e) => {
    e.stopPropagation();
  };

positionDivOverMicCharacter = (uniqueID_str) => {
    // console.log("positionDivOverMicCharacter");
    let styles_obj = getStylesObjectForInvisibleDiv(uniqueID_str);
    injectStyleForInvisibleDiv(uniqueID_str, styles_obj);
  };

// #####################################################################################
  // injecting main HTML and CSS
  // #####################################################################################

document.body.insertAdjacentHTML(
    "beforeend",
    `
    <div class="wavesurfer-container">
      <div class="wavesurfer-wrapper">
        <div id="waveform"></div>
      </div>
    </div>
    <div class="twik-invisible-divs"></div>
  `
  );

document.head.insertAdjacentHTML(
    "beforeend",
    `

.wavesurfer-wrapper {
      width: 300px;
      height: 100px;
    }

.wavesurfer-container {
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 300px;
      height: 150px;
      background-color: white;
      border: 1px solid black;
      visibility: hidden;
      z-index: 999999999999999999999999999;
      display: flex;
      align-items: center;
      justify-content: center;
    }

#waveform {
        height: 100%;
        width: 100%;
      }

.twik-invisible-div {
        opacity: 0;
        cursor: pointer;
      }

.twik-invisible-div-wrapper {
        position: relative;
      }
    
      `
  );

document.head.insertAdjacentHTML(
    "beforeend",
    `
    
    `
  );

// #####################################################################################
  // setting event listeners
  // #####################################################################################

repositionFunction = () => {
    [...document.querySelectorAll("input[twikid]")].map((inputElement) => {
      let uniqueID_str = inputElement.getAttribute("twikid");
      positionDivOverMicCharacter(uniqueID_str);
    });
  };
  setInterval(repositionFunction, 500);

window.addEventListener("click", () => {
    try {
      turnMicOff();
    } catch {}
    try {
      hideWaveform();
    } catch {}
    try {
      turnOffMicVisualization();
    } catch {}
  });

// ##############################################################
  // speech-to-text
  // ##############################################################
  if (
    typeof SpeechRecognition !== "undefined" &&
    typeof SpeechGrammarList !== "undefined"
  ) {
    recognition = new SpeechRecognition();
    SpeechRecognitionGrammarList = new SpeechGrammarList();
  } else if (
    typeof webkitSpeechRecognition !== "undefined" &&
    typeof webkitSpeechGrammarList !== "undefined"
  ) {
    recognition = new webkitSpeechRecognition();
    SpeechRecognitionGrammarList = new webkitSpeechGrammarList();
  }

SpeechRecognitionGrammarList.addFromString(grammar, 1);

recognition.grammars = SpeechRecognitionGrammarList;
  recognition.interimResults = false;
  if (document.getElementsByTagName("html")[0].getAttribute("lang")) {
    recognition.lang = document
      .getElementsByTagName("html")[0]
      .getAttribute("lang");
  }

recognition.addEventListener("result", (e) => {
    turnMicOff();
    hideWaveform();
    turnOffMicVisualization();
    let uniqueID_str = sessionStorage.getItem("active_twikid");
    let inputElement = document.querySelector(
      `input[twikid="${uniqueID_str}"]`
    );
    inputElement.value = e.results[e.results.length - 1][0].transcript;
    inputElement.dispatchEvent(new Event("input"));
    inputElement.dispatchEvent(new Event("change"));
    inputElement.dispatchEvent(new Event("keyup"));
    inputElement.dispatchEvent(new Event("keydown"));
    console.log("result");
  });

recognition.addEventListener("speechend", (e) => {
    turnMicOff();
    hideWaveform();
    turnOffMicVisualization();
    console.log("speechend");
  });

recognition.addEventListener("error", (e) => {
    turnMicOff();
    hideWaveform();
    turnOffMicVisualization();
    console.log("error");
  });

// #####################################################################################
  // activating major functionality
  // #####################################################################################

textDirection = window.getComputedStyle(document.body).direction;

addVolumeMeterFunctionality(() => {
    getSearchInputs().map((searchInput_element) => {
      assignUniqueIDtoInput(searchInput_element);
      let twikid = searchInput_element.getAttribute("twikid");
      putMicIntoPlaceholder(twikid);
      injectInvisibleDivForSearchElement(twikid);
      positionDivOverMicCharacter(twikid);
      setClickListenerOnInvisibleDiv(twikid);
    });
  });
}

Overview

Allow your users to perform vocal searches on your site. This variant enhances your existing site search field by adding a microphone icon to the search box- clicking the microphone icon will utilize your browser’s voice recognition capabilities and enable your visitors to run voice search queries.