I have a website set up with 3 simple audio players (F, R, and C) such that clicking an image pauses all other players (if any are playing) and plays preloaded audio file until it is clicked again, another is clicked, or the track ends — no other controls.

Instead of preloaded audio, I want the players to shuffle and play a series of files from the audio folder. Each player should have its own unique 'playlist', but some tracks will belong to multiple players/playlists, e.g., track 1 is in the playlist of players F and C, but not player R.

My inclination was to use the track filenames to 'tag' them for certain players. For example, naming an audio file 'fr.mp3' would make the file 'available' to the playlists of players F and R, and not to player C. Presumably all filenames would be returned as strings and passed through an if statement that decides whether they are added to an index that is then shuffled and played.

If this approach is wise, how would I go about implementing it? If this approach is foolish, what should I do instead? I'd ideally like it to be easy to add more files in the future by simply dropping them into the audio folder with the appropriate naming convention.

If it's any help, the current code is in this github repo, https://github.com/chrisscottromano/musicradiosite but all it does currently is manage playing each players' preloaded audio and pause others when one is played. I'm a bit stumped on how to modify it to perform like described above.

The current code also has a page if seeing the site in action is useful https://chrisscottromano.github.io/musicradiosite/

Any bright ideas?