Music App with Playlist, Loop, Shuffle tracks

Loop Through a Playlist

The first thing you’ll need for your music app is two variables.

  1. The currentTrackNumber variable keeps track of which song is playing right now
  2. The listOfTracks is your playlist where you’ll store your songs


The next thing you need is to make the Play button load up the first track

To help you imagine what’s going on here, you can think of it being like a juke box selecting a record. You’re queuing up something to play, but it’s not ready to play…yet!

juke_box


This is the block that allows us to make the playlist app function.

Once the audio is ready to be played the on source loaded event fires.

The first thing we want to do is Play the track that we’ve selected:


These final blocks set up the looping playlist for us.

  1. When the first song finishes playing we increase the currentTrackNumber by 1
  2. We check if there are any tracks left on the playlist, and if not we loop back to the beginning
  3. Finally a new source track is loaded, which in turn will trigger a new on source loaded event and the cycle will continue

4 Likes

Great tutorial! Now we can play endlessly looping elevator music for our business aps and exciting music for the games!!!

Check my remix

http://jaredgibb.xyz/index.php/2020/04/09/audio-loop-https-thunk-app-w-jb50qkg_6/

2 Likes

Great tutorial, @domhnallohanlon! :+1:

Now I can enhance my workspace, by endlessly looping a downloaded relaxing track :smiley_cat:

Thanks! :blush:

2 Likes