Adding audio, such as voiceover narration or background tracks, can significantly enhance the engagement level of your demos. In the HTML Editor, there are three primary ways to incorporate audio depending on your needs and technical comfort level: using the Video Embed Plugin, adding media to Guides, or injecting audio players directly into the HTML.
This article outlines these three methods, with a primary focus on injecting HTML audio snippets for custom placement.
Method 1: The Video Embed Plugin
If you have the Video Embed Plugin enabled, you can use its simple interface to embed video files that contain your desired audio track directly into elements on the screen.
For detailed instructions on this method, please refer to our article: HTML Editor - Video Embed Plugin
Method 2: Audio in Guides
If you want audio to play automatically when a specific Guide step appears (for example, instructional narration for that specific step), you can add media directly within the Guide step editor.
For detailed instructions on adding media to guides, please refer to our article: HTML Editor - Guides
Method 3: Injecting Audio via HTML Snippets
For greater flexibility in placement and behavior, you can inject custom HTML audio players directly into your demo's code. This method requires using the Navigator to locate specific elements and pasting in pre-formatted JavaScript snippets.
There are two common implementation styles for this method: an Embedded Audio Player (which sits within the existing page layout) or a Floating Audio Player (which stays fixed in a corner of the screen).
Prerequisite: Accessing the Navigator
To inject HTML, you first need to access the Navigator to select the precise element where the audio player should reside.
-
In the HTML Editor, open the Navigator located on the left-hand sidebar.
Implementing the Audio Player
Follow the instructions below to add either the embedded or floating player styles.
1. Select the Target Element Use the Navigator to drill down and select the specific HTML element that you want to contain the audio player.
2. Edit Element HTML With the element selected, click the "..." button on the floating menu. then click on "Edit HTML"
3. Choose and Paste Your Snippet Copy one of the snippets below and paste it inside the HTML of your selected element.
IMPORTANT: You must replace the example URL (src="https://res.app2...audio.mp3") inside the snippet with the direct URL to your own hosted audio file.
Option A: Embed audio player in HTML This snippet places a standard audio player inline with the surrounding text or images.
<div style="text-align: center;">
<p style="font-weight: bold; padding-bottom: 5px;">
Play narration:
</p>
<audio style="width: 20%" src="https://res.app2.getreprise.com/app2-published-resources/audio-on-page.mp3" controls="true" controlslist="nodownload" onerror="this.onerror=null; this.src='true';" contenteditable="false" draggable="true" content_node_id="vnde-d8c01944e09642e3bc6beeb53b8e3989">
</audio>
</div>Option B: Floating audio player in HTML This snippet creates an audio player fixed to the bottom-right corner of the screen that stays visible even upon scrolling.
<div style="position: fixed; bottom: 20px; right: 20px; background-color: rgba(255, 255, 255, 0.3); padding: 10px; border-radius: 8px; z-index: 1000;">
<audio style="width: 150px; height: 30px;" src="https://res.app2.getreprise.com/app2-published-resources/audio-floating.mp3" controls="true" controlslist="nodownload" onerror="this.onerror=null; this.src='true';" contenteditable="false" draggable="true" content_node_id="vnde-d8c01944e09642e3bc6beeb53b8e3989">
</audio>
</div>
4. Save changes Click "Apply" or "Save" in the HTML editor window. The audio player should now appear on the screen in the editor, allowing users to play the audio during the replay experience.