How to insert audio control bar

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.