Skip to content

Please update your browser

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

Choose an Add-On
Fashion Playlist
Allow the user to choose the music your project plays.
More Models
Select a second model, and allow the user to switch between the two choices.
Add Sound
Add sound that plays each time the user clicks on the model.
Fashion Feature
Draw another feature on your fashion and make your model react when that feature is clicked.
Make an Entrance
Program your model to spin onto the stage.
Special Effects
Create an effect each time the user clicks the outfit.
  • 1. Fashion Innovation Introduction
  • 2. Imagine Your Innovation
  • 3. Interactive Outfit
  • 4. For the Model Only
  • 5. Add-Ons
  • 6. Reflection
  • 7. Wrap-up: Fashion Innovation
  • 8. Wrap-up: Share Your Project
  • 9. Wrap-up: Show Your Project
arrow_backward Back Next arrow_forward

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.

  1. Choose an Add-On, and click "watch" to learn how to build it.
  2. Once you finish one Add-On, try another one below the video!