I'm building a small personal website. Basically, they are 20 short sound files. Clicking a button will play one of those files randomly. Once played, that file will no longer be played. So in total, the user clicks the button 20 times, each time getting a new random sound.

My question is should the frontend (angularjs) keep track of this list of sound files or should it be done in the backend.

Frontend Approach

  • An array of file names is populated from an initial server call
  • When the 'Play' button is clicked, a name is selected randomly from the list
  • A server call is made to get this soundfile, e.g. getSoundFile('abc.mp3')
  • That filename is then removed from the list


Backend Approach

  • A collection is initially populated with sound file names
  • When the 'Play' button is clicked, a server call is made to get a random sound file, e.g. getRandomSound()
  • The server randomly selects a filename in this collection, removes it from the collection, finds the corresponding file and returns it to the browser.

Are there pros / cons to each approach? Personally, I would prefer to keep the front-end as light as possible so I am leaning toward the backend approach but I'm wondering if I am overlooking something that would make the frontend approach preferable. Thanks.

EDIT: Question title changed to reflect correct terminology

1 Answer 1


Frontend and backend are not synonyms for client side and server side.

Indeed you can have a frontend and backend without a server being involved at all.

Regardless of the terminology, the big issue I see here is state. When you remove from the list you aren't being simply random anymore. You're doing a shuffle. That requires that you remember what's been removed.

That causes me to ask an important question: How long do you need this removal to be remembered? Can we start over if the user reloads the page? Do we need to remember from session to session?

I can see the choice you're struggling with impacting your ability to remember state in a few different ways. Make sure you're comfortable with how that choice limits you before you set it in stone.

  • Thanks for replying, and for advising me on the correct terminology. Yes I was referring to client side and server side. State isn't a concern. Yes, if the page is reloaded, we start over. There are no user profiles or accounts. No session cookies or anything like that. It is basically as simple as I described in the question: 20 sounds, each click of a button plays a random sound, no sound can be repeated, total of 20 clicks. No further requirements or functionality.
    – John Steed
    Commented Apr 9, 2019 at 20:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.