Skip to content

Please update your browser

Your browser version is not supported by this site. CS First may not work properly. Learn more


In this add-on, you will program a music playlist that users can change!

To start, add music to your program. Click the stage, select the “sounds” tab and “choose sound from library.” Select the music loops category. Select a sound and click OK. Then, click the “choose sound from library” button again, and select another. Select as many tracks as you’d like to play in your program! Select each track and rename each track as a number, starting with the number 1.

Next, start playing one of the tracks when the flag is clicked. Select the scripts tab.

Drag out a “play sound until done” block. Above that, snap a when flag clicked block.

Click the green flag to test it. Great! But the music only plays once. It should keep playing.

To make the music keep playing, place a “forever” block around the “play sound until done” block. Test it out. Great! The music repeats over and over.

Next, make the tracks change. To change the music to the next track, you need to tell the program which track to play. Create a "music" variable. Select the data menu, and click "make a variable." Variables hold values, like numbers or words. In this example, the variable will hold the track number. Name the variable "music," and click OK.

Place the “music” block in the “play sound until done” block. Now, the program will play the sound with the name that is in the “music” variable. But right now the “music” variable is 0 and there is no track named 0!

Drag out a “set music to 0” block, and change its value to 1. Place the block just after the “when flag clicked” block. Click the green flag to test it. Great, it works!

Drag out a “change music by 1” block to try changing the track. Cool! When the current track finishes playing, the track changes. Snap a “when right arrow key pressed” block on top. To test it, click the flag and then press the right arrow key. Cool!

But the “music” variable will keep increasing forever, and you don’t have that many music tracks! To make the music variable stop increasing after playing all the tracks, add an “if then” block around the “change music by 1” block. Place a “less than” block inside the diamond-shaped space.

On the left side, place a “music” variable block. On the right side, this example has 4 tracks. Click the green flag to test it. Press the right arrow key multiple times.

Great! The “music” variable never goes beyond 3.

Next, program the left arrow to allow users to go backward through the tracks. Right click the “when right arrow key pressed” block stack, and select duplicate. Change the dropdown to say “left arrow key.” Change the green operator block to a “greater than” block.

On the left side, place a “music” variable block. On the right side, type 1. Type negative 1 in the “change music by” block. Click the flag to test the whole thing. Cool!

Pressing the right and left arrow keys changes the track.

But, there’s a bug in the program. The music should change *as soon as* the user presses the arrow key, not when the track finishes playing.

To fix the bug, place a “stop all sounds” block above the “change music by 1” blocks.

Test it out! Great, the music changes immediately when the arrow keys are pressed.

Last, make sure your users know that they can control the sound in the program! Click the “paint a new sprite” button. Use the text tool to type instructions, like “Use the arrow keys to change the music!” Now everyone will know how to use the playlist you created! Now, it’s your turn: Add several music tracks to your program. Program the sound to start when the flag is clicked. Allow the user to change tracks by pressing the arrow keys using “change by” and “stop all sounds” blocks.

Finally, paint a new sprite to show off the music playlist feature.

Choisir une extension
Musique de défilé
Laisse l'utilisateur choisir la musique jouée par ton projet.
Plus de mannequins
Sélectionne un second mannequin et laisse l'utilisateur basculer entre les deux choix.
Ajouter du son
Ajoute un son qui joue chaque fois que l'utilisateur clique sur le mannequin.
Caractéristiques de mode
Dessine une autre caractéristique sur ta création et fais ton mannequin réagir lorsque la caractéristique est cliquée.
Entrée en scène
Programme ton mannequin pour qu'il tourne dans la scène.
Effets spéciaux
Crée un effet chaque fois que l'utilisateur clique sur la tenue.
arrow_backward Retour
Suivant arrow_forward
  1. Regarde la vidéo de présentation.
  2. Défile vers le bas pour voir les extensions proposées.
  3. Sélectionne une extension et commence la création !
  4. Choisis une autre extension et continue à créer.