Forum Discussion

HelenDudley's avatar
HelenDudley
Community Member
2 days ago

Text Entry Input field

Can the text entry input be speech/voice-to-text as well as keyboard entry?   Any help would be greatly appreciated.
accessibility
advice
storyline 360
Taylah_Pech's avatar
Taylah_Pech
Community Member
2 days ago

This is a great idea, Helen! It's not a native function but I have built an example using some JavaScript. I can see so many use cases for this... I've included some instructions below on how I built this. Note that it doesn't work in Preview so you'll have to publish it to web to test it.

Required Storyline Variables

Create these variables in your Storyline project:

  • UserInput (Text) - Stores the combined keyboard and voice input
  • IsListening (True/False) - Shows when voice recording is active

 

Setup Steps

1. Create Your Slide Elements

  • Text Entry Field: Use Storyline's built-in text entry field
    • Set it to update the variable "UserInput"
  • Voice Button: Create a button with label "🎤 Start Voice Input"
    • Add a state called "Listening" with different styling
    • Set trigger: Change state to "Listening" when variable "IsListening" changes to True
    • Set trigger: Change state to "Normal" when variable "IsListening" changes to False

2. Add JavaScript Trigger

On your voice button:

  • Add trigger: Execute JavaScript when user clicks
  • Paste the code from storyline-voice-input.js

3. Browser Compatibility

Supported browsers:

  • Google Chrome (recommended)
  • Microsoft Edge
  • Safari (limited support)

Not supported:

  • Firefox (no Web Speech API support)
  • Internet Explorer

4. Important Notes

  • Users must grant microphone permissions
  • HTTPS is required for voice input to work (won't work in preview mode reliably)
  • Voice input appends to existing text - clear the variable if you want fresh input
  • Consider adding a "Clear" button to reset the UserInput variable