How to insert audio control bar

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.

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.

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.

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.

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.