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.