Forum Discussion
Can users record and interact with their own audio in Articulate Storyline 360?
Nathan_Hilliard Thank you for the shoutout!
The code can be copied and used exactly as Nathan suggested. It's all contained within an index.html file, which includes both the logic and the necessary UI elements. You can easily adjust or modify this code to customize properties such as colors, fonts, icons, and dimensions to fit the available space on your Storyline slide. You can import the copied HTML as a web object in Storyline, provided that you’ve created the necessary text variables in Storyline (e.g., note01, note02, note03, etc.). When these variables are referenced on the slide, they will display exactly what was spoken during each subsequent recording—creating a smooth, story-like narration told by the learner.
I also created another version for this eLearning challenge. The code setup is essentially the same, but with one key difference: This version does not capture speech or update a text variable in Storyline with the recognized speech content. Instead, I used a custom "slideTitle" variable so the audio gets saved with filenames like: YourSlideTitle_Note_1, YourSlideTitle_Note_2, and so on. However, the code can also be adjusted to save the recorded audio and update any text variable in Storyline with the recognized speech content, so that the transcribed text is displayed on the slide in real time.
In this version, I also modified the initializeRecorder function to use the Web Audio API, which processes the audio stream and adds a GainNode for volume control before recording. This significantly improves the quality of the recorded audio and provides much more flexibility allowing you to adjust volume, apply filters, EQ, effects, and more.
For your interaction, I suggest integrating a timer that starts counting down from 2 minutes to zero when recording begins. Once the countdown reaches zero, the recording would automatically stop and the audio file could be saved to the learner’s computer. I haven’t tested this setup yet, but it should work with the right modifications to the code. Of course, this feature is optional, but it could enhance the experience by providing a clear time limit for responses.
Related Content
- 12 months ago