Alternate way to embed an audio clip

If I was able to identify the AUDIO OBJECT in the Storyine HTML I could synch the audio clip to a progress bar - but I have not been able to get the OBJECT. It doesn't use an <audio> tag like the video objects use the <video> tag.

So - here's another way to address it.

1. Add an audio clip (mp3) as a resource.
2. The script below automatically hides ANY mp3 file from the resources list
3. Add the script to the screen onload (when timeline begins) and change TWO values - the name of the mp3 and the variable name of the slider.
4. You can also create TWO variables for tracking percent VAR_Percentdone and seconds played with VAR_Seconds 
   
   

This is the script to be added to the page and I'll attach the story file as well

//MODIFY THE FOLLOWING ONLY

//SET THE NAME OF THE AUDIO FILE THAT YOU ADDED AS A RESOURCE
//BE SURE TO ADD THE EXTENSION -> "whatever.mp3"
var nameOfAudio = "CUES.mp3"
//IF YOU ARE TRACKING THE PROGRESS OF AN AUDIO FILE
//SET THE END OF THE PROGRESS BAR TO 100
//SET THE BELOW VARIABLE TO THE NAME OF THE VARIABLE
//ASSOCIATED WITH THE PROGRESS BAR
var progressBarVariable = "Slider2"

/********************************************

    DO NOT MODIFY ANYTHING BELOW THIS

********************************************/

//THIS CHECKS TO SEE IF THE AUDIO IDENTIFIES IS ACTUALLY
//IMPORTED AND AVAILABLE INSIDE THE COURSE

//THIS CREATES THE HTML5 AUDIO OBJECT
const audio = document.createElement("AUDIO");
//THIS ASSIGNS THE SOURCE OF THE AUDIO FILE TO THE OBJECT
//IMPORTED RESOURCES ALWAYS GET PUT IN THE EXTERNAL FILES FOLDER INSIDE STORY_CONTENT FOLDER
audio.setAttribute("src", "story_content/external_files/" + nameOfAudio);
//WE APPEND THE OBJECT TO THE HTML PAGE
document.body.appendChild(audio);

//THIS HIDES ALL OF THE AUDIO FILES (MP3) THAT WERE
//IMPORTED INTO THE COURSE AS RESOURCES
const collection = document.getElementsByClassName("resources-list");
//THIS LOOKS THRU ALL OF THE LISTED ITEMS IN THE RESOURCES
//AND HIDES ANY RESOURCE THAT IS AN MP3 (AUDIO FILE)
for (i = 0; i < collection[0].children.length; i++) {

    if ( collection[0].children[i].innerHTML.includes(".mp3") ){
    
        collection[0].children[i].hidden = true
    }
}


var myInterval;

//ADD A EVENT LISTENER TO THE AUDIO FILE WHERE
//THE EVENT IS WHEN THE AUDIO IS PLAYING
audio.addEventListener("play", markIt )//, 1000 )

function markIt(){

    myInterval = setInterval(myTimer, 100);

}

function myTimer(){
    
    var player = GetPlayer();
    
    const percentageDone = ( ( audio.currentTime / audio.duration ) * 100 );
    
    //SET THE STORYLINE VARIABLE VAR_PERCENTDONE TO THE
    // AMOUNT OF THE AUDIO FILE PROCESSED
    player.SetVar( "VAR_PercentDone", Math.round( percentageDone ) )
    
    if( percentageDone < 100 ){
    
    player.SetVar( progressBarVariable, Math.round( percentageDone ) );
    
    player.SetVar( "VAR_Seconds", audio.currentTime.toFixed(2) );
    
    }
    else if( percentageDone == 100 ){
        
        player.SetVar( progressBarVariable, Math.round( percentageDone ) );
        clearInterval(myInterval);
    }
}