To add speech-to-text entry to the open end questions in your survey, load our speech-to-text library:

<script src="https://workbench.mercuryanalytics.com/api/survey_speech_input.js"></script>

That’s all that’s required. The script automatically finds every <textarea> on the page and adds a small microphone button in its lower-right corner. When a respondent clicks the button, it asks for microphone permission and begins transcribing speech into the textarea in real time. Clicking the button again stops transcription.

It’s safe to add the script to your survey’s template, since it does nothing on pages that have no <textarea> elements.

Browser Support

The tool requires microphone access, the Web Audio API, and WebSockets. All modern desktop and mobile browsers support these. When a browser does not, the microphone buttons are simply not added — the textareas remain fully usable for typed input.

If a respondent denies microphone permission, the button removes itself from that session. The textarea remains usable for typed input.

Mobile Devices

Although the tool works on mobile browsers, we recommend against using it on mobile. Mobile operating systems provide their own speech-to-text input, accessible directly from the keyboard, which offers a better experience than our tool can provide on those devices. Unfortunately, there is no way to trigger the device’s native speech input programmatically — it can only be activated by the user.

We recommend using browser feature detection to load the script only on desktop browsers. Most survey platforms support conditional logic based on the user agent. As a simple example in plain JavaScript:

<script>
  if (!/Mobi|Android|iPhone|iPad/i.test(navigator.userAgent)) {
    var s = document.createElement("script");
    s.src = "https://workbench.mercuryanalytics.com/api/survey_speech_input.js";
    document.head.appendChild(s);
  }
</script>

Layout Requirement

For the microphone button to be positioned correctly inside the textarea, the textarea must use display: inline-block. Most survey platforms apply display: block by default, which will push the button outside the textarea boundary. To fix this, add an inline style to your textarea:

<textarea style="display: inline-block; width: 100%;" name="q1"></textarea>