How to insert audio control bar

Hello

It's been 8 years and still no built in audio control bar, yet you managed to add one in the 360 image marker options, so why isn't it a feature already ? 

Hi, Nic -- It looks like a similar question was asked in this older thread, and there are definitely some ideas you could consider that have been offered. Please let us know if that will work for you or if you had something else in mind! :)

Exactly! thanks.

You're right, Stacey. I apologize for the inconvenience but appreciate the heads up.

Here's an update and I'll update the link above too.

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.

Yes, I understand what you're talking about. Initially, I worked with only one slide, focusing mainly on adding the audio controls. I didn't consider potential issues beyond that. After creating a few more slides and importing additional audio files, I tested it and noticed the same behavior.

With the current technique, the audio files are randomly pulled from the Storyline content folder. To address this, I decided to import all my audio files to the Resources. Although they will still be stored in the Storyline content folder, this way, the audio files will not be randomly renamed, and I can call them directly by name through the modified scripts, ensuring they still have audio controls.

Triggers associated with audio files, such as play, pause, and stop, will not be available if the audio files are imported to Resources. However, you won't need these triggers since you now have controls. If you want to change the variable value based on the audio status, you can use event listeners to log when the audio is playing, paused, or ended. You can still import other audio files as you normally would, but they will not have audio controls.

I don't have time to record a tutorial, so I am attaching the .story file so you can take a look at how everything is pulled together. There are a few different versions, such as when the audio file is loaded automatically or when triggered by clicking another object. If you have any questions or need assistance with setting it up, please don't hesitate to ask. 

If I may, one way to do so is to create a video with only your audio file, like we see on YouTube, Vimeo and such. That way, you can import your audio as a video and check to get the control bar.

I will say that it's a weird omittion that audio files don't have control bars. What if I want my user to listen to a 5-minute interview as part of a question? I guess that I could link the interview to an external page, but still, the lack of control options for audio is odd.

There's also the idea to make your own control bar using assets, but whether you use a Wipe Left animation or a ball that travels along a line, you cannot have animation that lasts more than 59 seconds.

Hi JC,

This discussion is quite a bit older - but I appreciate your suggestion around using a video file to play back only audio. That's an idea I've seen recommended a few times too. 

If having the audio control bar is something that would improve your experience using Articulate you can submit a feature request here. We'd love to know more about how this would make your life easier. 

I'm trying to include a seekbar for my audio file in a marker. This is a feature that is included in Rise 360. I'm not sure why StoryLine 360 hasn't been updated to include this but I'm finding a lot of features that I expected Storyline to have that Rise has but that don't seem possible or straightforward in Storyline. 

Hi Chelsea and welcome to E-Learning Heroes. 😊

I'm not sure I'm following along with what you are creating here, but I created a quick Peek 360 video with your Marker Audio options as well as adjustments and seekbar control as Anthony mentioned.

Just let us know if you have any further questions.