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 fea...
I don't have a tutorial. It just came to mind as I see there is quite a lot of interest in having the ability to show an audio control bar. The code below is just a draft and can be customized further. The main idea is to add the 'controls' attribute to an audio element, append it to the slide area, and position it to be visible on the slide.
const audios = document.querySelectorAll('audio');
const slideLayer = document.querySelector('.slide');
audios.forEach(audio => {
audio.controls = true;
audio.style.position = "fixed";
audio.style.top = "50%";
audio.style.left = "50%";
audio.style.transform = "translate(-50%, -50%)";
slideLayer.appendChild(audio);
});
We could also achieve this with the Plyr media player, dynamically added to Storyline to target the audio element and show the audio controls, which can be further customized with the CSS available in the Plyr library.
Thats cool you can use Plyr in Storyline, as a side note I was just using Plyr in a custom Rise block to narrate flashcard content, I love it as you can fully customize the UI with css.
Thank you Thank you Thank you!!
Would you be able to explain this a bit further? I can get the javascript to work but how do I see it on the slide without being in preview so that I can place it where I would like it? Is there a way to not auto start the audio??
With this, it works when I preview the slide but when I preview the entire project it is taking the audio from the slide following the one I am on. Why might this be? Thank you
