Sorry for the delay in response Angel - I’ve been without power for three days here in rain soaked N. California (far better than another year of drought!)… and am now behind in my project; as such I will only have time to post here and will not be able to reply for another day or two - if any follow up question of yours requires an involved response.
And Thanks to @DBear for filling in with his above post. You can follow his advice and stick with the simpler code as previously presented (as You are learning things) - or take a leap… if so read on.
Let’s take it up another level.
Our overall goal in the new code is to condense to one function the ability to handle the “Play” ~ “Pause” ~ “Stop” button controls and know which “voice over” to play. This approach will save You a fair amount of coding time as You have seven layouts that all basically do the same thing.
The code presented here is not the only way to accomplish our goal - and may not be the most elegant form. But this approach has proved very serviceable to me in working with a collection of media files, and is relatively easy to follow along.
Project Demo: CharactersDemo_JHSv4.zip (1.3 MB)
Warning: I have only tried the following suggested code in this simplified version of your project. There may be things in the full project that conflict with this code - or cause unexpected results; while unlikely - it is a possibility. An inconsistency with ID names would be one area to create a problem, so be consistent in your approach (more on this topic just below).
Changes to the Project Structure:
The “control” button IDs in this demo now have a specific naming structure e.g.:
“play01_Terra”; “pause01_Terra”; “stop01_Terra”.
Each layout requires a unique ID. In this demo I only have one layout - but the idea is that You would name them according to the layout order (and the voice over name). So You would have the “Play” button for the second layout named “play02_Terra”. The “Pause” button ID for the second layout would be “pause02_Terra”. The “Stop” button ID for the second layout would be “stop02_Terra”. The third layout would use “03” instead of “02” in the names.
You do not have to use this exact naming schema - but this is how I’ve chosen to do it here as it is dead simple. Using the actual layout name or some part of it will add a layer of complexity - unnecessarily muddying the waters for the purposes of this demonstration.
We will use two methods not in my previous Demo: slice(); and indexOf().
The slice() method does just that - it slices a part of a string and returns one of the sliced components.
whichBtn = element.id // i.e. the element the user clicked on e.g. "play01_Terra"
whichBtn.slice(7); // returns the characters in the string *after* the seventh character: i.e. "Terra"
Do note that the “pause01_” has one more character than both “play01_” & “stop01_” so we will use “whichBtn.slice(8)” for the “pause01_Terra” string instead of “whichBtn.slice(7)” used for the “play” & “stop” IDs.
Read more about the slice() method here.
indexOf() method returns the position of the first occurrence of a specified value in a string. If it does not find this value it returns “-1”. This “-1” value is how we will be employing the indexOf() method. We don’t care where in the string the specified value occurs - only if it exists or not.
if (whichBtn.indexOf("play") > -1) {
If the value is greater than “-1” it exists in the string and then we will do something (like play the voice over).
More info on the indexOf() method here.
Just below is the new code. Below this code, using the “Play” button ID from the demo project (“play01_Terra”) I will annotate one conditional iteration (if, else… statements - read about them here).
function voiceOverControls(hypeDocument, element, event) {
whichBtn = element.id;
if (whichBtn.indexOf("play") > -1) {
whichVoiceOver = whichBtn.slice(7);
whichVoiceOver = hypeDocument.getElementById(whichVoiceOver);
whichVoiceOver.play();
}
else if(whichBtn.indexOf("pause") > -1) {
whichVoiceOver = whichBtn.slice(8);
whichVoiceOver = hypeDocument.getElementById(whichVoiceOver);
whichVoiceOver.pause();
}
else if(whichBtn.indexOf("stop") > -1) {
whichVoiceOver = whichBtn.slice(7);
whichVoiceOver = hypeDocument.getElementById(whichVoiceOver);
whichVoiceOver.load();
}
}
**Here is the annotated version:**
whichBtn = element.id;
// i.e. "play01_Terra" was clicked; "whichBtn" is a variable holding this value
if (whichBtn.indexOf("play") > -1) {
//"play" is found in the variable "whichBtn" (and so the value is "> -1")
whichVoiceOver = whichBtn.slice(7);
// whichBtn.slice(7); gives us "Terra" from the string "play01_Terra"
// so the "whichVoiceOver" variable now equals "Terra"
whichVoiceOver = hypeDocument.getElementById(whichVoiceOver);
// whichVoice over is now being set to the value of the audio tag whose ID is "Terra"
whichVoiceOver.play();
// play the "Terra" voice over
As a memory refresher here is what our audio tag - located in the “Play” button’s innerHTML looks like:
<audio id="Terra" preload="auto">
<source src="${resourcesFolderName}/Terra - Voice over.mp3" type="audio/mpeg">
</audio>
Note the audio tag’s ID of “Terra” and the audio file it references in the “Resources Library” - “Terra - Voice over.mp3”, just as with the previous project file in my first post above: “CharactersDemo_JHSv2.zip”