Forum Discussion
How to insert audio control bar
I have inserted an .mp3 into my project using the Insert- Audio from File tool. I need give the user the ability to drag the audio bar to rewind in case they missed something in the audio.
The feature I need would be much like a video control bar- to be able to seek to different parts of the video.
Where and how do I activate this feature in my project?
Hi Leslie -
When I try to use your link, it asks me to authenticate with my google account or go to articulate.zone for the review. I don't know if this is an internal website for articulate or if the link has been hacked.I've attached a picture of the 2 sites it takes me to.
Play/Control bars for audio tracks please!!
Agreed, I've been annoyed all day by the fact that this is unavailable...even through Javascript!
Agree! I am so surprised this isn't an option. Please add.
+100
Technically, we can add audio controls to the Storyline interface using JavaScript. A more complex challenge lies in positioning the audio element on the slide across different scenarios. Attached video demonstrates the visibility of audio controls on the slide.
Hey Nedim! Do you have a tutorial that shows how to do this? Or where to find the code?
You can't see it on the slide because this is not a built-in Storyline feature. When you preview the slide, you should be able to see it if the JavaScript code is executed. Once it's visible on the slide, you can use the developer tools to move it to the desired location, note the CSS properties, and update the code accordingly. You can also place a shape on the slide as a marker and adjust the CSS properties until it's properly aligned. My initial code sets the audio player right in the center. For instance, I used this code to position my audio player at the bottom center of the slide, stretched horizontally to occupy 98% of the slide width:
const audios = document.querySelectorAll('audio');
const slideLayer = document.querySelector('.slide');
audios.forEach(audio => {
audio.controls = true;
audio.style.position = "fixed";
audio.style.top = "94%";
audio.style.left = "50%";
audio.style.width = "98%";
audio.style.transform = "translate(-50%, -50%)";
slideLayer.appendChild(audio);
})
To prevent the audio from auto-playing, simply use the trigger "Stop audio Audio When the timeline starts on this slide." Then handle the audio with the audio controls.Hi Nedim, was actually doing something similar but ran into the issue with the way Storyline was loading in the audio when there are multiple audio files on the page. What ends up happening is the players start stacking over each other.
What would you like to do with multiple audio players? Do you want to display them all with different positions and styles, or just show a specific one? If you have a JavaScript setup that iterates through all the audio players, you can access each one individually and customize their styles by indexing them.
