Hello there! I am a beginner and I am attempting to create 5 different players by using some code that I found. Here is the code I have been working with: https://codepen.io/katzkode/pen/ZbxYYG
My goal is to divide the loop below into 5 separate divs for each player, rather than having them all under #audio-players:
function createAudioPlayers() {
for (f in files) {
var playerString = "<div id=\"audioplayer-" + f + "\" class=\"audioplayer\"><button id=\"playbutton-" + f + "\" class=\"play playbutton\"></button><div id=\"timeline-" + f + "\" class=\"timeline\"><div id=\"playhead-" + f + "\" class=\"playhead\"></div></div></div>";
$("#audio-players").append(playerString);
}
}
Below is the code for the audio files:
var files = ["interlude.mp3", // 0
"chooseyourweapon.mp3", // 1
"interlude.mp3", // 2
"scriptures.mp3",
"scriptures.mp3"// 3
];
I'm still learning and not sure how to proceed from here. Any help would be appreciated. Thank you!