Forum Discussion
How to insert audio control bar
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.
- JasonRich-dcf744 months agoCommunity Member
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.