Lesson 11: Making Music

App Lab | Maker Toolkit

Overview

In this lesson students will use the buzzer to its full extent by producing sounds, notes, and songs with the buzzer. Students start with a short review of the buzzer's frequency and duration parameters, then move on to the concept of notes. Notes allow students to constrain themselves to frequencies that are used in Western music and provide a layer of abstraction that helps them to understand which frequencies might sound good together. Once students are able to play notes on the buzzer, they use arrays to hold and play sequences of notes, forming simple songs.

Purpose

This lesson allows students to get more creative with the buzzer by introducing the concept of a "note" and by using arrays to hold sequential collections of notes. Using notes rather than frequencies provides a layer of abstraction that makes it easier for students to identify sounds that can be used to make music. Arrays provide a way to group together sounds in sequence, so that they can be played as music. Using the playNotes block to iterate over an array of notes provides a conceptual foundation for working with for loops in the next lesson.

Agenda

Warm-Up (5 min)

Activity

Wrap-Up (5 min)

View on Code Studio

Objectives

Students will be able to:

  • Create and modify an array
  • Use an array to produce sound on the buzzer
  • Recognize an array as a list of elements that can be operated on sequentially.

Introduced Code

Teaching Guide

Warm-Up (5 min)

Color LEDs vs the Buzzer

Discussion Goal

Students may come up with many different ideas, but there are two aspects of this problem that should be highlighted before students move on to the activity. First, specifying frequencies is not the best way to indicate how high or low a buzz should be, since music only uses a limited number of frequencies, and other frequencies are considered "out of tune". Music is usually written down as specific notes on a scale, which makes it much easier to see which sounds will go well together. (Students with a musical background will likely have a much better grasp of this issue.) Second, students will need a way to string sounds, or notes, together to make a song. This second point should be more universally understood.

Prompt: We've been using the buzzer to make sounds, but those buzzes didn't always sound too great. What do you think you need to make real music on the buzzer?

Activity

Making Music

Transition: Send students to Code Studio.

Wrap-Up (5 min)

Journal

Goal: Help students make the connection between the playNotes block and the for loops that they will use in the next lesson.

Prompt: Today, instead of just choosing one element from an array, we used the playNotes block to do something to every element. Think back to the other arrays you have seen. How might doing something to every element in an array be useful there?

Share After giving students time to reflect in their own journals, have them share with a partner or in small groups.

  • Making Sounds
  • 2
  • 3
  • 4
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Circuit Piano

Look at the code below. You're not going to be changing it, but try to see what it does.

Do this

  • Run the program and play with the piano on the screen.
View on Code Studio

Student Instructions

Making the Buzzer Buzz

The frequency of the buzzer determines how high or how low the buzzer will sound when it plays. The higher the number you give frequency, the higher the buzzer will sound.

Do this

  • Right now the buzzer plays a high note when the left button is pressed. Make the buzzer play a low note instead.
View on Code Studio

Student Instructions

Making the Buzzer Buzz

Now that you can use the buzzer's frequency, try to make the buzzer play a high sound when the same button pops back up.

Do this

  • Add another onBoardEvent block so the buzzer plays a high sound when the left button comes back up
View on Code Studio

Today you’re going to learn how to use and create functions.

Creating a function lets you make your own blocks! There are two parts to a function:

Making a newly named block that has all of the code you want to run inside of it. -xml of function definition-

The single green block itself that you use, or call, to run the function you created. -xml of function call-

Prepare to get familiar with functions, learn how to edit them, and create your own!

  • Playing with Notes
  • 6
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Piano Notes

This is the same piano that you saw at the beginning of the lesson, but there are some bugs!

Do this

  • Edit the code so that all keys are using a buzzer.note() block to play the corresponding note.
  • Make sure that all the values passed in to buzzer.note() are notes, and not frequencies.

Hint: Remember to put quotes around the notes! e.g buzzer.note("A4", 100);

View on Code Studio

Today you’re going to learn how to use and create functions.

Creating a function lets you make your own blocks! There are two parts to a function:

Making a newly named block that has all of the code you want to run inside of it. -xml of function definition-

The single green block itself that you use, or call, to run the function you created. -xml of function call-

Prepare to get familiar with functions, learn how to edit them, and create your own!

  • Musical Arrays
  • 8
  • 9
  • 10
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Piano Panic

So far you’ve just been using the elements of an array. Now, you're going to change what's inside the array.

Our good friend the piano is back, except now it plays notes from two arrays: notes, which holds natural notes (C, D, E, F, G, A, B), and sharpNotes, which holds sharp notes (C#, D#, F#, G#, A#).

Do this

The sharpNotes array only has one item inside of it right now.

  • Fix the array so that the sharp keys on the piano can actually play the right note.

Hint: Modifying arrays is much easier in text mode. You can always switch between block and text mode by clicking the button at the top right of your code workspace.

View on Code Studio

Student Instructions

Random Song Generator

You're going to make a random song generator. When you press a button, a random note should play. Press it enough times, and you have yourself a beautiful arrangement of bleeps and bloops.

You used randomNumber() to select an element from an array in the previous lesson, so this should be familiar.

Do This

  • Add code to randomly select a note from the notes array and play it.
  • Run the program and press the left button to hear your buzzer sing its beautiful tune.
View on Code Studio

Student Instructions

Making New Arrays

You know how to change arrays, now it's time for you to make your own.

Do this

  • Make a new array with whatever notes you want. They can be in different octaves, arranged in a certain key, etc. Anything you want!
  • Have the buzzer play a random note from your array when the right button is pressed.
View on Code Studio

Student Instructions

Markdown is in contained level

Make a Prediction

Look at the code below. What do you think it's going to do?

Give it a guess and run the code to find out!

View on Code Studio

Student Instructions

Making Songs

You can make and play full songs with buzzer.playNotes(). It takes two parameters: an array of notes to play, and a tempo at which to play the notes. In previous bubbles you created arrays of notes and played through them randomly, but buzzer.playNotes() plays each note consecutively instead.

Do this

  • Pull out a buzzer.playNotes block and change the starting array inside.
  • Make sure the new array you give it has at least two pairs of notes that are next to each other in the list (Example: ["A5", "A5", "G4", "G4"])

Hint: Don't forget that you can always switch back and forth between block and text mode.

View on Code Studio

Student Instructions

Null Notes

You may have noticed that if you put the same note side-by-side in the array, the buzzer just plays that note as one long sound instead of as individual notes. In music we often want a break (or rest) between notes. You can get your buzzer to play a rest by sending it the value null.

null is a special value that represents emptiness in computer science. playNotes plays each note for the same duration, so a null element in the array is just telling playNotes to play nothing for the same duration as everything else.

Do this

  • Run the code to hear what it sounds like first.
  • Examine the array inside buzzer.playNotes().
  • Put a pause between notes that are the same and side-by-side, and any other place you deem appropriate.

Tip: null references a value, just like a variable name. Make sure you don't put it in quotation marks!

View on Code Studio

Student Instructions

Sound Board 2.0

You can now play sounds, notes, and songs! With this new knowledge, you can even turn your board into a sound board.

In the toolbox you have all of the buzzer and led-related blocks at your disposal. See what cool stuff you can come up with!

Do This

  • Use all of the button related board events (up, down), to play a unique sound or song at each event.
  • Are there any other events you could use to play even more sounds/songs?
View on Code Studio

Student Instructions

Challenge: 2D Arrays

Arrays can hold all sorts of data, like numbers, strings, and even other arrays. When we put an array inside another, this becomes a 2D array. The buzzer.playSong() block can be used to play songs that sound more precise with 2D arrays.

The structure that you've been using to play notes looks like this:

buzzer.playNotes( [array of notes to play] , tempo of the whole song);

The main difference with buzzer.playSong() is each element inside the [array of notes to play], is an array with two elements: the note you want to play, and the duration of the note. Sometime you'll want a quarter note in your song, other times you'll want a full note, or maybe somewhere in between. A full song might look something like this:

buzzer.playSong([ ["G3",0.25], ["C4",0.25], ["E4",0.25], ["G4",0.125], [null,0.375], ["E4",0.1875], ["G4",1] ], 120);

Do this

  • Use the buzzer.playSong block to make a different song.
  • When you get comfortable with the structure, add more notes to the song.
View on Code Studio

Student Instructions

Stopping the Music

Sometimes you need to be able to stop the music when you want, like in the code below. Duration wasn't specified so now the note plays continuously. Luckily, the buzzer.stop() method is here to save your ears.

Do this

  • Find a way to get the note to stop playing with buzzer.stop().
  • Celebrate your win over the endless note!